New graph of frame data

--- name: frame-data-chart-nyt zhname : "NYT-Style Data Chart Frame" enname : "NYT-Style Data Chart Frame" emoji: "📈" description: "NYT Newsroom layout + staggered reveal animation + editorial-style charts (line/bar/range)" category: video scenario: video aspecthint : "1920×1080 (16:9)" featured: 46 tags: ["data", "chart", "nyt", "editorial", "frame"] exampleid : sample-frame-data-chart-nyt examplename : "NYT Wind Line Chart · Global User Count" exampleformat : markdown exampletagline : "Editorial-Grade Charts + Off-Peak Reveal" exampledesc : "8-Year Weekly Active User Line Chart + NYT Red Accent + Mono Annotations" examplesourceurl : "https://hyperframes.heygen.com/catalog" examplesourcelabel : "hyperframes · data-chart" od: mode: video surface: video scenario: video upstream: "https://github.com/nexu-io/html-anything" preview: type: html entry: index.html reload: debounce-100 designsystem : requires: false exampleprompt : "Use the 'NYT-style data chart frame' template to turn my content into a segment featuring 'NYT Newsroom-style layout + staggered reveal animation + editorial-grade charts (line/bar/range).' Maintain the template's visual signature, use real content and data,avoid lorem ipsum and placeholder images." --- 【Template: NYT-Style Data Chart Frame】 【Intent】Turn a set of data (CSV/JSON /a single conclusion) into a single-frame or animated chart with a New York Times column-style feel, suitable for video clips or Twitter cards. Inspired by hyperframes data-chart. 【Canvas】1920×1080, either a warm white background#f7f5ee or a jet-black background#0e0e0e ; text color must contrast with the background. 【Layout】 - Top kicker (11px uppercase, letter spacing 0.14em, color = accent red#a91d1d or mint#5fb38a ): Data source + category, e.g., "GLOBAL · WEEKLY ACTIVE USERS · 2018:2026". - Large headline (Cheltenham / Playfair / Source Serif Pro, 5.6vw, italic; subheading optional): A single concluding sentence. The conclusion must be derived from the user data, not a description of the chart. - Chart Area (55:65% of the canvas): - Line charts: 1:2 lines; main line: solid ink 2.5px; secondary line: dashed 1.5px; Data points: 6px solid circles; labels next to key points:2024 · 412M in small black mono type. - Bar charts: All bars in a single ink color or with one accent bar; large numbers at the top of bars; category names at the bottom in italics (Cheltenham italic). - Range band: Light gray fill (#e6e2d2 ) with an ink outline and centerline. - Bottom source + footnote (10px mono, opacity 0.6): "Source: User data · Chart by html-anything". - Staggered reveal animation: Title fade-in (0s), kicker (200ms), line chart with stroke-dashoffset 1.2s ease-out (400ms), data labels sequentially at 100ms intervals. Can be disabled via `prefers-reduced-motion . 【Design Details】 - **Never**: Use thechart.js / d3 libraries (unless loaded via the jsdelivr CDN); hand-coding SVG is recommended, with no more than 80 lines of inline code. - Fonts: HeadingsSource Serif Pro orCheltenham (if unavailable, usePlayfair Display ); bodyIBM Plex Sans orInter ; data labelsIBM Plex Mono . - 1 primary color (ink) + 1 accent color (choose one of NYT red#a91d1d , editorial mint#5fb38a , or warm orange#d97757 ). - Y-axis scale: only a hairline + 3:4 ticks; labels should be in mono font on the outside of the axis. - Full-screen grid lines, shadows, and 3D columns are strictly prohibited; emojis are strictly prohibited. - Must use data provided by the user. If the input is a text conclusion, automatically estimate reasonable coordinates (but label them as "schematic"); if it is a CSV/JSON file, plot the data directly. - Single HTML file; data point annotation format:<text class="annot">2024 · 412M</text>` .