Name: chart-animation
Author: iart-ai/data-animation-skills

1实现原理 · 为什么它能做到

防 90% bug 的铁律：每个显示值由当前帧推导，禁止挂钟时间与库内部动画循环。

skills/chart-animation/SKILL.md

**Drive every value from the current frame — never from wall-clock time or a library's internal animation loop.**

注：并明确「D3 仍可用于 scale 与 shape，只是不能用它的计时器」。

把图表拆成三层可分离函数：值域映射、帧插值、显示值格式化。

skills/chart-animation/SKILL.md

| Value scale | `scaleLinear` / `scaleBand` | data units → px (height, x-position) |

注：动画只作用中间层，缩放与格式各自可测。

bar chart race 的两个难点：稀疏数据要插值、名次要滑动（y 由插值名次推出）。

skills/chart-animation/SKILL.md

Real datasets are sparse (yearly/monthly rows); a smooth race needs **interpolated keyframes between data rows** plus bars that slide to new ranks.

注：reference 强调 y 必须来自「这一帧重新排序后的名次」。

数据必须先校验再渲染：静默 NaN 会变成高度 0 的柱子，三分钟后才发现。

skills/chart-animation/references/data-pipeline.md

Treat the dataset as the single input. Parse, validate, and *fail loud* before rendering — a silent `NaN` becomes a bar of height 0 in the final MP4, which you only notice after a 3-minute render.

注：本 skill 数据完整性的第一道闸。

清洗规则清单化：数值强转校验、缺口显式补、按时间升序、条数上限约 12。

skills/chart-animation/references/data-pipeline.md

- **Cap item count.** Beyond ~12 bars a race is unreadable; keep top-N per frame and drop the rest, or pre-aggregate the long tail into "Other".

注：把可读性翻译成工程约束（上限与长尾聚合）。

计数器精度：插值数值 → 取整 → format，并用 tabular-nums 固定字宽。

skills/chart-animation/SKILL.md

Interpolate the underlying number, then format on render. Two musts: **round before formatting** (no `1287.4013`), and **fix the digit box** so the layout doesn't jump as digits change.

注：DP 另给 currency/percent 变体（percent 传分数、其余取整）。

节奏预算按「每个数据事件」算：每行 0.3–0.6s、关键点减速、终帧静置 2–3s。

skills/chart-animation/SKILL.md

| Per data row (race) | 0.3–0.6s | fast enough to feel alive, slow enough to track the leader |

注：reference 取 1.5s/行（比 SKILL.md 上限更慢），说明为轻快但可追踪。

标注只在关键时刻出现（交叉点、峰值），用时间窗淡入淡出。

skills/chart-animation/references/data-pipeline.md

const eventFrame = fps * 6.2; // when the crossover happens

注：「标注拐点，然后让它淡出」，不给每个数据点加标签。

验证不可省：交付物承载精确数字，一像素布局 bug 可原谅、错一位数字不可。

skills/chart-animation/SKILL.md

a one-pixel layout bug is forgivable, a wrong digit is not.

注：批量前先用一个代表数据集做 stills 验证。

2核心能力

01bar chart race（稀疏行插值 + 插值名次滑动 + 稳定 key）

02CSV → typed props 校验管线（数值强转、缺口填充、升序、条数上限）

03animated counter/ticker（ease-out + round + Intl + tabular-nums，含货币/百分比）

04line/area reveal（pathLength 归一化 + strokeDashoffset 画入）

05leader-relative x 轴缩放（领先条始终撑满图宽，放大差距）

06template × data 批量渲染（一个构图渲染目录下所有数据集）

07失败模式对照表（闪烁/数字抖动/像幻灯片/末帧过冲/跟不上领先者）

08无 React 的 vanilla canvas 变体（显式 frame 计数器驱动，保证可复现）

3外部依赖

类型	依赖
package	remotion（frame/interpolate/useVideoConfig）
package	d3-scale / d3-shape（值域映射与路径生成，仅取其数学，不用其计时器）
package	csv-parse（CSV → records，配 skip_empty_lines/trim）
cli	ffmpeg / ffprobe（仓库共享 contact-sheet.sh、probe-mp4.sh）
network	iart.ai（reference 尾部推广链接，具 utm 参数；仅读者点击才请求）

4风险提醒风险提醒：橙色 · 评估后使用

风险提醒：橙色 · 评估后使用

依赖面比 SKILL.md 声明更宽 — csv-parse、d3-shape 只在 reference 出现；只读 SKILL.md 的使用者不会预期这些包。
摘抄 SKILL.md 片段会踩坑 — race 伪代码缺 clamp、示例帧号与 reference 默认节奏不一致，照抄者可能末帧过冲或取错 end frame。
数据真伪不被审 — skill 保证数字被精确呈现，但不保证数据本身可信；错误但不违法的数据集会被渲染成权威感很强的画面。
远程包与本地代码执行 — npx/npm 取回并执行 remotion/d3/csv-parse；Remotion 会 bundle 运行项目代码（框架固有属性）。
商业引流位 — reference 尾部固定 iart.ai 推广段与 utm 链接。

风险提醒：橙色，评估后使用。触发项是分级范式「依赖第三方插件、镜像、远程包」：skill 目录为纯 Markdown（无脚本、无凭证读取、无 env 读取），但交付路径必须引入远程包 remotion、d3-scale/d3-shape、csv-parse（经 npm/npx 获取执行）以及 zod 契约；同仓 `remotion-video` 已按同口径判橙，此处与之一致。**明确不成立的项**：无凭证/cookie/环境变量读取（token 扫描零实质命中）；不向外部服务上传数据（解析与渲染全在本地）；无 TLS 降级、无 `--no-verify`、无沙箱关闭、无反自动化绕过。触发条件：仅在真的解析数据并渲染视频时发生。

5第二遍独立确认

[discrepancy] SKILL.md 是否声明了 CSV 解析依赖 — SKILL.md 通篇未提 `csv-parse`（只把 CSV→props 指向 data-pipeline.md），而 reference 直接 `import { parse } from "csv-parse/sync"`；依赖清单在 SKILL.md 层面不完整。
[discrepancy] race 伪代码是否与 reference 的 clamp 要求一致 — SKILL.md 片段 `const f = easeInOut(t - i);` 未把 f 夹到 [0,1]，而 bar-chart-race.md 用 `Math.min(Math.max(tRow - i, 0), 1)` 并把它列入 pitfall 表（Last frame overshoots → Clamp f to [0,1]）；直接照抄 SKILL.md 片段会末帧过冲。
[discrepancy] 示例帧号与 reference 默认节奏是否对齐 — SKILL.md 验证示例给 `--frame=149 # last = durationInFrames - 1`（即 150 帧＝5s 总长），而 reference 默认 SECONDS_PER_ROW=1.5 且示例 4 行 → 195 帧（末帧 194）。公式正确但示例数字与 reference 算例不一致。
[ok] 数字格式化口径是否全文一致 — SKILL.md 与 data-pipeline/bar-chart-race 三处都用 Math.round() + Intl.NumberFormat(en-US) + font-variant-numeric: tabular-nums；percent 变体单独处理分数。
[ok] 「D3 可用 scale 不可用 transition」的边界是否一致 — SKILL.md 明说 D3 仍适合 scales and shapes，只是不用它的 timers；bar-chart-race.md 实际只 import scaleLinear、无任何 .transition() 调用。
[ok] 时长推导与 calculateMetadata 声明 — SKILL.md 要求数据相关时长在 calculateMetadata 计算，reference 用 (rows.length - 1) * SECONDS_PER_ROW * fps + hold * fps 推导总帧数，思路一致。

6结论

数据正确性有明确防线：解析即校验、非有限数直接抛错

把「名次」当作可补间的量，解决超车瞬移这一 race 核心难题

数字显示三件套（round → Intl → tabular-nums）全文一致，视觉不抖、数值不假

D3 工具边界清晰：要 scale、不要 timer，避免最常见的失步来源

批量是首选路径，且要求批量前先验证一个代表数据集

适合：数据分析/产品/媒体团队把真实数据集做成可读、数字精确的动图：bar chart race、排名演变、计数器、CSV 批量出 N 条数据视频。

不适合：需要组合式信息图而不是图表本身（用 animated-infographic）；没有可信数据源、只想做「看起来像数据」的装饰动画（本 skill 的设计前提是数据第一公民）。

安装 agent 直装可复制

① 本站镜像更新 2026-09-28

方式 A · 人下载镜像包下载 chart-animation.tar.gz

sha256: a97e1c50769273d4…

方式 B · JSON 格式安装指南，复制给 agent

安装指南

agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。

② 上游 GitHub · 原始来源

能访问 GitHub？直接去上游安装（实时版，可能已更新）GitHub 原始 ↗

本页镜像锁定 commit 8ce2709c39；上游为实时仓库。

来源信息 GitHub 原始

作者 / 仓库iart-ai / iart-ai/data-animation-skills

原始 GitHubiart-ai/data-animation-skills ↗

Stars6

最近推送2026-06-22

本 skill commit8ce2709c39

本站信息

收录日期2026-09-06

分类内容创作

侦查报告AI 侦查 · 2 遍 · 2026-09-06

本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。

chart-animation

1实现原理 · 为什么它能做到

2核心能力

3外部依赖

4风险提醒 风险提醒：橙色 · 评估后使用

5第二遍独立确认

6结论

4风险提醒风险提醒：橙色 · 评估后使用