Content & Media Creation · iart-ai/data-animation-skills
chart-animation
This skill should be used when the user asks to "make a bar chart race", "turn a CSV into a video", "build an animated data visualization", "create an animated statistics video", "animate a chart/graph", "make a number counter/ticker", "animate a ranking over time", or "batch-render one chart template across many datasets". Covers data-driven keyframing, value interpolation, rank transitions, counters, pacing, annotation, and template×data batch output.
L4 High-Privilege · Graded auth & full auditV1 Commit-PinnedExecute CommandNetwork AccessWrite FileDual-pass Audit
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.
1How It Works & Mechanism
The golden rule to prevent 90% of bugs: every displayed value must be derived from the current frame; wall-clock time and internal library animation loops are forbidden.
skills/chart-animation/SKILL.md
**Drive every value from the current frame — never from wall-clock time or a library's internal animation loop.**
Also clarify that "D3 can still be used for scales and shapes, just not for its timers".
Split the chart into three decoupled functions: domain mapping, frame interpolation, and display value formatting.
skills/chart-animation/SKILL.md
| Value scale | `scaleLinear` / `scaleBand` | data units → px (height, x-position) |
Animation operates only on the middle layer; scaling and formatting remain independently testable.
Two hard challenges of a bar chart race: sparse data must be interpolated, and rankings must slide smoothly (y-position derived from interpolated rank).
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.
The reference emphasizes that y must come from "the re-sorted ranking at the current frame".
Data must be validated before rendering: silent NaNs turn into height-0 bars that are only noticed three minutes later.
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.
The first gate for data integrity in this skill.
Checklist of cleaning rules: strict numerical coercion and validation, explicit gap filling, ascending chronological order, and a cap of ~12 bars.
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".
Translating readability into engineering constraints (caps and long-tail aggregation).
Counter precision: interpolate numeric value → round → format, and use tabular-nums for fixed glyph width.
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.
The DP also provides currency/percent variants (fractions passed for percent, others rounded).
Pacing budget calculated "per data event": 0.3–0.6s per row, decelerate at key points, rest for 2–3s on the final frame.
skills/chart-animation/SKILL.md
| Per data row (race) | 0.3–0.6s | fast enough to feel alive, slow enough to track the leader |
The reference uses 1.5s/row (slower than the SKILL.md ceiling) to keep it brisk yet trackable.
Annotations appear only at critical moments (crossovers, peaks), fading in and out via time windows.
skills/chart-animation/references/data-pipeline.md
const eventFrame = fps * 6.2; // when the crossover happens
"Annotate the inflection point, then let it fade out"—do not label every data point.
Verification cannot be skipped: deliverables carry precise numbers; a 1-pixel layout bug is forgivable, but an off-by-one digit is not.
skills/chart-animation/SKILL.md
a one-pixel layout bug is forgivable, a wrong digit is not.
Validate stills using a representative dataset before batch rendering.
2Core Capabilities
01bar chart race (sparse row interpolation + interpolated rank sliding + stable keys)
02CSV → typed props validation pipeline (numeric coercion, gap filling, ascending order, bar count limits)
03animated counter/ticker (ease-out + round + Intl + tabular-nums, including currency/percentage)
04line/area reveal (pathLength normalization + strokeDashoffset draw-in)
05leader-relative x-axis scaling (leading bar always fills the chart width to amplify gaps)
06template × data batch rendering (render all datasets under a directory using a single composition)
07failure mode checklist (flickering / digit jitter / slide-like feel / end-frame overshoot / falling behind leader)
08vanilla canvas variant without React (driven by explicit frame counters to guarantee reproducibility)
3External Dependencies
| Kind | Dependency / Endpoint |
|---|---|
| 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 参数；仅读者点击才请求） |
4Recommended Governance & Evidence
Suggested Controls for Safe Operation
For Agent Runtime
Graded/per-use authorization, sandbox recommended
For Administrators
Approval workflow, rollback support, full audit
Evidence & Triggers (File Paths & Excerpts)
- scripts/: Local script or command execution: No built-in scripts inside the skill directory; SKILL.md/reference instructs the agent to run `node scripts/build-props.mjs`
- 网络端点: External network access declaration: No business API calls during execution; datasets are provided by the user via CSV/JSON.
- 本地工作目录: File I/O and artifact output: Writes `props/<name>.json`, `out/<name>.mp4`, `out/f-start.png`/`out/f-mid.p` inside user project
Audit Notes: . Triggered under the classification rule "Dependencies on third-party plugins, container images, or remote packages": the skill directory contains pure Markdown (no scripts, no credential reads, no env reads), but the delivery pipeline must import remote packages such as remotion, d3-scale/d3-shape, csv-parse (fetched and executed via npm/npx), and zod schemas; the companion repository `remotion-video` was marked orange under the same criteria, and this remains consistent. **Explicit non-factors**: No credential/cookie/environment variable reading (token scan returned zero substantive hits); no data upload to external services (parsing and rendering are entirely local); no TLS downgrade, no `--no-verify`, no sandbox disabling, and no anti-automation circumvention. Trigger condition: Occurs only when actually parsing data and rendering video.
5Second-Pass Verification
- [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 推导总帧数，思路一致。
6Verdict & Scenarios
Best for: Data analysis, product, and media teams transforming real datasets into readable, numerically accurate motion graphics: bar chart races, ranking evolutions, counters, and batch-rendering N data videos from CSVs.
Not for: When composite infographics are needed rather than chart-focused visuals (use animated-infographic); when there is no trustworthy data source and the goal is merely decorative "data-looking" animations (this skill treats data as a first-class citizen).
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload chart-animation.tar.gz
sha256:
Option B · Copy Guide for Agenta97e1c50769273d4…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 8ce2709c39.