🌍 World Population Shift (D3)

You have a spreadsheet: country, year, population. They’re just numbers until D3 turns them into bars that grow, change position, and reveal four decades of geopolitical drama. The viewer doesn’t read the table — they watch it happen.

On each Remotion frame, the dataset for the corresponding year is read, the bars are reordered, and the Y positions are smoothly interpolated. When China and India switch places, the bar race pause for 12 frames — the dramatic moment.

The D3+Remotion integration works because D3 calculates geometry and Remotion advances time. With each call to useCurrentFrame(), you compute the corresponding data frame and let D3 map the pixels.

const frame = useCurrentFrame();
const fps = useVideoConfig().fps;
const year = Math.floor(interpolate(frame, [0, durationInFrames], [1990, 2030]));

const data = getDataForYear(year);
const xScale = scaleLinear().domain([0, maxPop]).range([0, width]);
const yScale = scaleBand().domain(data.map(d => d.country)).range([0, height]);

Labels follow the bars; the year counter in the lower-right corner anchors viewers in time. Both need to be calculated in the same frame — without separate state.

This is the exact prompt you give Claude Code. Each instruction maps to a specific bar race behavior — Claude generates the Remotion composition with D3 integrated in one response.

Create an animated bar race showing the ten most populous
countries from 1990 to 2030.
Animate transitions smoothly.
Display ranking changes in real time.
Pause briefly when leadership changes.

The deliverable is a YouTube-style infographic video—but the component is a parameterized template that works with any time-based ranking dataset. Swap the spreadsheet, change the title, render another video.