用途:把一段数据(CSV、JSON 或一句结论)做成《纽约时报》专栏感的单帧或动画图表,适合视频片段或推特卡。灵感来自 hyperframes data-chart。
主要能力:画布 1920×1080,暖白底 #f7f5ee 或墨黑底 #0e0e0e 二选一,文字色与背景相反。布局含顶部 kicker(11px 大写、字距 0.14em,accent 红 #a91d1d 或 mint #5fb38a)、大字结论标题(Cheltenham / Playfair / Source Serif Pro,5.6vw,可选斜体副标)、占画布 55–65% 的图表区与底部 source + footnote(10px mono,opacity 0.6)。图表支持折线(1–2 条线,主线 ink 实心 2.5px,次线 dashed 1.5px,数据点 6px 实心圆)、柱状(ink 单色或 1 道 accent 高亮柱,柱顶大数字,柱底斜体类目)和范围带(浅灰填充 #e6e2d2 包络 + 中线 ink)。动画为错峰揭示:标题 fade-in、kicker 200ms、折线 stroke-dashoffset 1.2s ease-out、数据标签依次 100ms 间隔,可被 prefers-reduced-motion 关闭。
使用方式:单文件 HTML,推荐手写 inline SVG(不超过 80 行),数据点旁注释格式为 <text class="annot">2024 · 412M</text>。字体建议标题 Source Serif Pro 或 Cheltenham(无则 Playfair Display),body IBM Plex Sans 或 Inter,数据标签 IBM Plex Mono。配色为 1 个主色 ink + 1 个 accent(NYT red #a91d1d / 编辑 mint #5fb38a / 暖橙 #d97757 三选一)。Y 轴刻度仅 hairline + 3–4 个 tick,标签在轴外侧用 mono 字。
限制:必须使用用户提供的数据;若输入是文本结论,自动估算合理坐标但需标注 schematic;CSV/JSON 则直接绘制。绝不使用 chart.js / d3 库(除非 jsdelivr CDN 引入);严禁全屏 grid 铺线、阴影、3D 立体柱和 emoji。具体安装命令与收费信息暂未提供。