SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsframe-data-chart-nyt

frame-data-chart-nyt

Data & analytics

View repository

Updated 10-16 09:34

About this skill

[Template: NYT-style data chart frame] [Intent] Turn a piece of data (CSV / JSON / a one-sentence conclusion) into a single-frame/animated chart with a New York Times column feel, suitable for video clips or Twitter cards. Inspired by hyperframes data-chart.

[Canvas] 1920×1080, warm white background #f7f5ee or ink black background #0e0e0e pick one of the two; text color is the opposite of 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, optional italic subhead): a one-sentence conclusion.The conclusion must be distilled from the user's data, not a description of the chart.
  • Chart area (occupies 55-65% of the canvas):
    • Line: 1-2 lines, main line ink solid 2.5px, secondary line dashed 1.5px; data points use 6px solid circles; annotate next to key points with 2024 · 412M small black mono text.
    • Bar: all ink monochrome or add 1 accent highlight bar; large numbers on top of bars; category labels at the bottom of bars in italic (Cheltenham italic).
    • Range band: light gray fill #e6e2d2 envelope + ink center line.
  • 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 stroke-dashoffset 1.2s ease-out (400ms), data labels sequentially at 100ms intervals. Can be prefers-reduced-motion turned off.

[Design details]

  • Never: use chart.js / d3 libraries (unless introduced via jsdelivr CDN); hand-written SVG is recommended, no more than 80 lines inline.
  • Fonts: headline Source Serif Pro or Cheltenham (if unavailable use Playfair Display); body IBM Plex Sans or Inter; data labels IBM Plex Mono。
  • 1 primary color (ink) + 1 accent (NYT red #a91d1d / editorial mint #5fb38a / warm orange #d97757 choose one of the three).
  • Y-axis scale only hairline + 3-4 ticks, labels in mono font outside the axis.
  • Strictly forbidden: full-screen grid lines, shadows, 3D bars; strictly forbidden: emoji.
  • Must use the data provided by the user. If the input is a text conclusion, automatically estimate reasonable coordinates (but mark it as "schematic"); if it is CSV/JSON, draw it directly.
  • Single-file HTML; annotation format next to data points: <text class="annot">2024 · 412M</text>。