🌍 World Population Shift (D3)

Tienes una hoja de cálculo: país, año, población. Son solo números hasta que D3 los convierte en barras que crecen, cambian de posición y revelan el drama geopolítico de cuatro décadas. El espectador no lee la tabla — la ve suceder.

En cada frame de Remotion, se lee el dataset del año correspondiente, las barras se reordenan y las posiciones Y se interpolan suavemente. Cuando China e India intercambian lugares, el bar race pausa de 12 fotogramas — el momento dramático.

La integración D3+Remotion funciona porque D3 calcula la geometría y Remotion avanza en el tiempo. En cada llamada de useCurrentFrame(), calculas el frame de datos correspondiente y dejas que D3 mapee los píxeles.

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]);

Las etiquetas que siguen a las barras son el alma de la carrera de barras. El contador de año en la esquina inferior derecha sitúa al espectador en el tiempo. Ambos deben calcularse en el mismo frame, sin un estado separado.

Este es el prompt literal que le das a Claude Code. Cada instrucción corresponde a un comportamiento específico de la bar race: Claude genera la composición Remotion con D3 integrado en una sola respuesta.

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.

El entregable es un video infográfico al estilo de YouTube, pero el componente es una plantilla parametrizada que funciona con cualquier conjunto de datos de rankings temporales. Cambia la hoja de cálculo, modifica el título y renderiza otro video.