🌐 Qué es D3 y por qué es el estándar
Data-Driven Documents — D3 vincula datos directamente a elementos DOM/SVG. No es una biblioteca de "gráficos listos"; es un mecanismo para transformar datos en formas visuales. Esto ofrece una flexibilidad imposible con Chart.js u otros.
🧠 El paradigma central
En D3, no dices «dibuja una barra de 42px». Dices "vincula este array al conjunto de rectángulos" — y D3 asigna automáticamente cada valor a un atributo SVG mediante scales. Cambia el dato y el aspecto cambia también.
🏁 Bar race — ranking en movimiento
O bar race (carrera de barras) es el gráfico más impactante para las comparaciones temporales. Cada categoría gana tiempo en pantalla proporcional a su valor, y cuando cambia el ranking, las barras se reordenan suavemente.
↑ Las barras crecen y se encogen con el tiempo; en D3+Remotion, cada frame = interpolación entre dos estados de datos
// Prompt:
"Crie um bar race Remotion com D3.js mostrando evolução
anual de 5 países. Dados: [ { ano: 2020, brasil: 42, ... } ]
Duração: 10s, fps: 30, transição suave entre anos."
// D3 + Remotion equivalente:
const t = frame / fps; // tempo atual
const current = interpolateData(data, t);
bars.attr("width", d => xScale(current[d.name]));🏗️ Diagrama de arquitectura animado
Los nodos aparecen en secuencia y las líneas se dibujan conectando la topología. El stroke-dashoffset es la técnica: defines la longitud total de la línea y animas el offset de 100% → 0% — efecto de "dibujo progresivo".
↑ Los nodos aparecen uno a uno; las líneas se dibujan mediante un stroke-dashoffset animado
💡 Técnica stroke-dashoffset
Define stroke-dasharray: PATH_LENGTH y anima stroke-dashoffset de PATH_LENGTH hasta 0. La línea parece dibujarse en tiempo real. En Remotion, usa interpolate(frame, [0, totalFrames], [pathLen, 0]).
🤖 Datos limpios + descripción clara = Claude hace el resto
No necesitas saber D3 para usar D3. Necesitas saber lo que quieres mostrar. El flujo es: limpiar el dato → describir el aspecto visual → Claude genera el componente Remotion completo con D3.
✗ Prompt sin contexto de datos
"Crea un gráfico animado de ventas"
Claude va a inventar datos ficticios, elegir el tipo de chart al azar y probablemente usar la biblioteca equivocada.
✓ Prompt con datos reales
"Remotion + D3. Datos: [{mes:'Jan',valor:42},{mes:'Fev',valor:78}...]. Bar race vertical. La barra crece del frame 0 al 60. Color: #3b82f6."
Resultado exacto, medible y editable.
Limpiar el dato
CSV → JSON, eliminar nulos, normalizar nombres de columnas. Claude también lo hace si pegas la hoja de cálculo.
Describir el aspecto visual
Tipo de gráfico, paleta de colores, duración, transiciones. Cuanto más específico, más preciso será el resultado.
Claude genera el componente
Remotion + D3 + escalas + animación + seek sincronizado. Listo para ejecutarse con npx remotion dev.
Iterar en la conversación
"Aumenta el tamaño de fuente del label", "cambia el color de la barra de Brasil a azul", "agrega una línea de promedio". Cada pedido refina el componente.
🗃️ Casos de uso basados en datos
D3 no se limita a las barras. La biblioteca abarca cualquier tipo de visualización, desde mapas geográficos hasta árboles jerárquicos. La clave es identificar cuál tipo de dato tienes y qué forma visual lo comunica mejor.
Bar race / gráficos
Comparaciones temporales, rankings, métricas de negocio. Datos: series temporales categóricas.
Diagramas de arquitectura
Nodos y aristas. Force layout o posicionamiento manual. Datos: grafo/topología de un sistema.
Mapas geográficos
Rutas, choropleth (mapa de calor), puntos de interés. Datos: GeoJSON + topojson.
Jerarquías / treemaps
Estructuras padre-hijo, presupuestos, taxonomías. Datos: árbol JSON con parent/children.
Líneas de tendencia
Crecimiento a lo largo del tiempo, comparaciones de curvas. Datos: series continuas.
Network graphs
Conexiones entre entidades, flujos de datos y redes sociales. Datos: nodes + edges.
⚠️ Errores comunes con D3 + Remotion
D3 se creó para el navegador: manipula el DOM directamente. Remotion renderiza del lado del servidor (headless). Esta combinación tiene trampas específicas que necesitas conocer.
✗ Errores frecuentes
- ✗Usar
d3.transition()— provoca una animación basada en clock, no en frame. - ✗Seleccionar el DOM en la función de renderizado — D3 manipula el DOM, React administra el DOM. Conflicto.
- ✗Calcular scales dentro del render: se recalculan en cada frame y perjudica el rendimiento.
✓ El enfoque correcto
- ✓Usar D3 solo para cálculos (scales, paths, layouts): deja que React renderice.
- ✓Interpolación manual mediante
interpolate(frame, ...)de Remotion. - ✓Escala en
useMemo— calcula una vez por composición.
💡 Regla D3+Remotion
Usa D3 como calculadora matemática, no como animador. D3 calcula dónde deben estar las cosas; React renderiza; Remotion captura el frame. Cuando le pidas a Claude, especifica: "Usa D3 solo para scales y generadores de paths, no para animación directa".
📋 Resumen del módulo
Lo que aprendimos
- ✓D3 vincula datos con elementos visuales: no es una biblioteca de gráficos
- ✓Bar race = interpolación entre snapshots de datos a lo largo del tiempo
- ✓stroke-dashoffset anima el «dibujo» de líneas SVG
- ✓Datos limpios + descripción visual = Claude genera todo
- ✓D3 como calculadora matemática, no como animador directo
- ✓Evitar d3.transition() — usar interpolate() de Remotion
Siguiente módulo
Escenas 3D renderizadas fotograma a fotograma. Materiales, cámaras y geometría procedural para motion graphics 3D con WebGL.