🌐 O que é D3 e por que é o padrão
Data-Driven Documents — D3 vincula dados diretamente a elementos DOM/SVG. Não é uma biblioteca de "charts prontos"; é um mecanismo de transformação de dados em formas visuais. Isso dá uma flexibilidade impossível com Chart.js ou outros.
🧠 O paradigma central
Em D3, você não diz "desenhe uma barra de 42px". Você diz "vincule este array ao conjunto de retângulos" — e o D3 mapeia automaticamente cada valor a um atributo SVG via scales. Mude o dado, o visual muda junto.
🏁 Bar race — ranking em movimento
O bar race (corrida de barras) é o chart mais impactante para comparações temporais. Cada categoria ganha tempo de tela proporcional ao seu valor — e quando o ranking muda, as barras reordenam suavemente.
↑ Barras crescem e encolhem ao longo do tempo — em D3+Remotion cada frame = interpolação entre dois estados de dados
// 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 arquitetura animado
Nós aparecem em sequência, linhas se desenham conectando a topologia. O stroke-dashoffset é a técnica: você define o comprimento total da linha e anima o offset de 100% → 0% — efeito de "desenho progressivo".
↑ Nós surgem um a um; linhas se desenham via stroke-dashoffset animado
💡 Técnica stroke-dashoffset
Defina stroke-dasharray: PATH_LENGTH e anime stroke-dashoffset de PATH_LENGTH até 0. A linha parece ser desenhada em tempo real. Em Remotion, use interpolate(frame, [0, totalFrames], [pathLen, 0]).
🤖 Dado limpo + descrição clara = Claude faz o resto
Você não precisa saber D3 para usar D3. Você precisa saber o que quer mostrar. O fluxo é: limpar o dado → descrever o visual → Claude gera o componente Remotion completo com D3.
✗ Prompt sem contexto de dados
"Crie um gráfico animado de vendas"
Claude vai inventar dados fictícios, escolher o tipo de chart aleatoriamente e provavelmente usar a biblioteca errada.
✓ Prompt com dado real
"Remotion + D3. Dados: [{mes:'Jan',valor:42},{mes:'Fev',valor:78}...]. Bar race vertical. Barra cresce do frame 0 ao 60. Cor: #3b82f6."
Resultado exato, mensurável, editável.
Limpar o dado
CSV → JSON, remover nulos, normalizar nomes de colunas. Claude também faz isso se você colar a planilha.
Descrever o visual
Tipo de chart, paleta de cores, duração, transições. Quanto mais específico, mais preciso o resultado.
Claude gera o componente
Remotion + D3 + scales + animação + seek sincronizado. Pronto para rodar com npx remotion dev.
Iterar na conversa
"Aumenta a fonte do label", "muda a cor da barra do Brasil para azul", "adiciona linha de media". Cada pedido refina o componente.
🗃️ Casos de uso data-driven
D3 não é apenas barras. A biblioteca cobre qualquer tipo de visualização — desde mapas geográficos até árvores hierárquicas. A chave é identificar qual tipo de dado você tem e qual forma visual melhor o comunica.
Bar race / charts
Comparações temporais, rankings, métricas de negócio. Dados: séries temporais categóricas.
Diagramas de arquitetura
Nós e arestas. Force layout ou posicionamento manual. Dados: grafo/topologia de sistema.
Mapas geográficos
Rotas, choropleth (mapa de calor), pontos de interesse. Dados: GeoJSON + topojson.
Hierarquias / treemaps
Estruturas pai-filho, budgets, taxonomias. Dados: árvore JSON com parent/children.
Linhas de tendência
Crescimento ao longo do tempo, comparações de curvas. Dados: series contínuas.
Network graphs
Conexões entre entidades, fluxos de dados, redes sociais. Dados: nodes + edges.
⚠️ Armadilhas comuns com D3 + Remotion
D3 foi criado para o browser — manipula o DOM diretamente. Remotion renderiza no lado do servidor (headless). Essa combinação tem pegadinhas específicas que você precisa conhecer.
✗ Erros frequentes
- ✗Usar
d3.transition()— causa animação baseada em clock, não em frame. - ✗Selecionar DOM no render function — D3 manipula DOM, React gerencia DOM. Conflito.
- ✗Calcular scales dentro do render — recalcula todo frame, prejudica performance.
✓ A abordagem correta
- ✓Usar D3 apenas para cálculos (scales, paths, layouts) — deixa React renderizar.
- ✓Interpolação manual via
interpolate(frame, ...)do Remotion. - ✓Scales em
useMemo— calcula uma vez por composição.
💡 Regra D3+Remotion
Use D3 como calculadora matemática, não como animador. D3 calcula onde as coisas devem estar; React renderiza; Remotion captura o frame. Quando pedir ao Claude, especifique: "Use D3 apenas para scales e path generators, não para animação direta".
📋 Resumo do módulo
O que aprendemos
- ✓D3 vincula dados a elementos visuais — não é chart library
- ✓Bar race = interpolação entre snapshots de dados no tempo
- ✓stroke-dashoffset anima o "desenho" de linhas SVG
- ✓Dado limpo + descrição visual = Claude gera tudo
- ✓D3 como calculadora matemática, não como animador direto
- ✓Evitar d3.transition() — usar interpolate() do Remotion
Próximo módulo
Cenas 3D renderizadas frame-a-frame. Materiais, câmeras e geometria procedural para motion graphics 3D com WebGL.