chart-animation

Data Video

Turn a dataset into a chart that moves with intent: a bar chart race, a growing line, a count-up stat. The craft is mapping numbers to pixels every frame, easing the value (not just the opacity), and pacing the data so a viewer can actually read it.

When to use

• Bar chart race / ranking-over-time (the headline use case).
• Animated line/area reveal, animated counters and number tickers.
• One chart design rendered across many datasets (template × CSV → N videos).

The one rule that prevents 90% of bugs

Drive every value from the current frame — never from wall-clock time or a library's internal animation loop. A video frame is rendered deterministically; if a bar's height comes from a CSS transition or a D3/GSAP/Chart.js animation, it flickers or desyncs because the renderer and the animation clock disagree. Compute the displayed value as a pure function of frame.

import { useCurrentFrame, interpolate } from "remotion";
const frame = useCurrentFrame();
const value = interpolate(frame, [0, 60], [0, 1287], { extrapolateRight: "clamp" });

In Remotion, disable all third-party chart animations (animation: false in Chart.js, no D3 .transition()) and let useCurrentFrame() be the only clock. D3 is still great for scales and shapes (scaleLinear, scaleBand, line()) — just not its timers.

Map data → pixels

A chart is two functions: a value scale and a frame interpolator. Keep them separate.

Layer	Tool	Job
Value scale	scaleLinear / scaleBand	data units → px (height, x-position)
Frame interpolation	interpolate / spring	frame → eased progress 0→1
Display value	round + Intl.NumberFormat	progress → the number a human reads

import { scaleLinear } from "d3-scale";
const yScale = scaleLinear().domain([0, maxValue]).range([0, chartHeight]);
const barHeight = yScale(interpolate(frame, [0, 45], [0, datum.value], { extrapolateRight: "clamp" }));

Easing value changes