frame-data-chart-nyt

Original：🇨🇳 Chinese

Translated

NYT-newsroom Layout + Staggered Reveal Animation + Editorial-grade Charts (Line/Bar/Range Band)

3installs

Sourcenexu-io/html-anything

Added on2026-05-16

NPX Install

npx skill4agent add nexu-io/html-anything frame-data-chart-nyt

SKILL.md Content (Chinese)

View Translation Comparison →

【Template: NYT-style Data Chart Frame】【Purpose】Turn a piece of data (CSV / JSON / a conclusion sentence) into a single-frame/animated chart with the column style of The New York Times, suitable for video clips or Twitter cards. Inspired by hyperframes data-chart.

【Canvas】1920×1080, choose between warm white background

#f7f5ee

or dark black background

#0e0e0e

; text color contrasts with the background.

【Layout】

Top kicker (11px uppercase, letterspace 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 subtitle optional): A conclusion sentence. The conclusion must be extracted from the user's data, not a description of the chart.
Chart area (occupies 55-65% of the canvas):
- Line chart: 1-2 lines, main line solid ink 2.5px, secondary line dashed 1.5px; data points are 6px solid circles; small black mono text like
```
2024 · 412M
```
  is labeled next to key points.
- Bar chart: All bars in solid ink or with 1 accent highlighted bar; large numbers on top of bars; italic category labels at the bottom of bars (Cheltenham italic).
- Range band: Light gray fill
```
#e6e2d2
```
  envelope + midline ink.
Bottom source + footnote (10px mono, opacity 0.6): "Source: User Data · Chart by html-anything".
Staggered reveal animation: Headline fade-in (0s), kicker (200ms), line chart stroke-dashoffset 1.2s ease-out (400ms), data labels appear sequentially with 100ms intervals. Can be disabled by
```
prefers-reduced-motion
```
.

【Design Details】

Never: Use chart.js / d3 libraries (unless imported via jsdelivr CDN); recommend handwritten SVG, no more than 80 lines of inline code.

Fonts: Headline

Source Serif Pro

or

Cheltenham

(use

Playfair Display

if unavailable); body

IBM Plex Sans

or

Inter

; data labels

IBM Plex Mono

.

1 main color (ink) + 1 accent color (choose from NYT red
```
#a91d1d
```
/ editorial mint
```
#5fb38a
```
/ warm orange
```
#d97757
```
).
Y-axis ticks only have hairline + 3-4 ticks, labels are mono text outside the axis.
Strictly prohibit full-screen grid lines, shadows, 3D solid bars; strictly prohibit emojis.
Must use the data provided by the user. If the input is a text conclusion, automatically estimate reasonable coordinates (but label "schematic"); if it's CSV/JSON, draw directly.
Single-file HTML; annotation format next to data points:
```
<text class="annot">2024 · 412M</text>
```
.

frame-data-chart-nyt

NPX Install

Tags

SKILL.md Content (Chinese)