🌐 What D3 is and why it’s the standard
Data-Driven Documents — D3 binds data directly to DOM/SVG elements. It's not a library of "ready-made charts"; it's a mechanism for transforming data into visual shapes. That gives you flexibility that's impossible with Chart.js or others.
🧠 The core paradigm
In D3, you don’t say “draw a 42px bar.” You say "bind this array to the set of rectangles" — and D3 automatically maps each value to an SVG attribute via scales. Change the data, and the visual changes with it.
🏁 Bar race — ranking in motion
O bar race (bar race) is the most impactful chart for time-based comparisons. Each category gets screen time proportional to its value—and when the ranking changes, the bars reorder smoothly.
↑ Bars grow and shrink over time — in D3+Remotion, each frame = interpolation between two data states
// 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]));🏗️ Animated architecture diagram
Nodes appear in sequence, and lines draw in to connect the topology. The stroke-dashoffset is the technique: you define the total length of the line and animate the offset from 100% → 0% — a "progressive drawing" effect.
↑ Nodes appear one by one; lines are drawn via animated stroke-dashoffset
💡 The stroke-dashoffset technique
Define stroke-dasharray: PATH_LENGTH and animate stroke-dashoffset of PATH_LENGTH up to 0. The line looks like it’s being drawn in real time. In Remotion, use interpolate(frame, [0, totalFrames], [pathLen, 0]).
🤖 Clean data + a clear description = Claude does the rest
You don’t need to know D3 to use D3. You need to know what you want to show. The workflow is: clean the data → describe the visual → Claude generates the complete Remotion component with D3.
✗ Prompt without data context
"Create an animated sales chart"
Claude will invent fictional data, randomly choose a chart type, and probably use the wrong library.
✓ Prompt with real data
"Remotion + D3. Data: [{mes:'Jan',valor:42},{mes:'Fev',valor:78}...]. Vertical bar race. Bar grows from frame 0 to 60. Color: #3b82f6."
Exact, measurable, editable result.
Clean the data
CSV → JSON, remove nulls, normalize column names. Claude can do this too if you paste in the spreadsheet.
Describe the visuals
Chart type, color palette, duration, transitions. The more specific you are, the more precise the result.
Claude generates the component
Remotion + D3 + scales + animation + synchronized seeking. Ready to run with npx remotion dev.
Iterate in the conversation
"Increase the label font size", "change the Brazil bar color to blue", "add an average line". Each request refines the component.
🗃️ Data-Driven Use Cases
D3 isn’t just bars. The library covers every kind of visualization — from geographic maps to hierarchical trees. The key is identifying which data type you have and what visual form communicates it best.
Bar race / charts
Temporal comparisons, rankings, business metrics. Data: categorical time series.
Architecture diagrams
Nodes and edges. Force layout or manual positioning. Data: system graph/topology.
Geographic maps
Routes, choropleth (heat map), points of interest. Data: GeoJSON + topojson.
Hierarchies / treemaps
Parent-child structures, budgets, taxonomies. Data: JSON tree with parent/children.
Trend lines
Growth over time, curve comparisons. Data: continuous series.
Network graphs
Connections between entities, data flows, social networks. Data: nodes + edges.
⚠️ Common pitfalls with D3 + Remotion
D3 was created for the browser — it manipulates the DOM directly. Remotion renders on the server side (headless). This combination has specific gotchas that you need to know.
✗ Common mistakes
- ✗Use
d3.transition()— causes clock-based animation, not frame-based animation. - ✗Select DOM in the render function — D3 manipulates the DOM, React manages the DOM. Conflict.
- ✗Calculate scales inside the render — recalculates every frame and hurts performance.
✓ The right approach
- ✓Use D3 only for calculations (scales, paths, layouts)—let React render.
- ✓Manual interpolation via
interpolate(frame, ...)Remotion's. - ✓Scales in
useMemo— calculates once per composition.
💡 D3+Remotion rule
Use D3 as math calculator, not as an animator. D3 calculates where things should be; React renders; Remotion captures the frame. When you ask Claude, specify: "Use D3 only for scales and path generators, not for direct animation".
📋 Module Summary
What we learned
- ✓D3 binds data to visual elements — it’s not a chart library
- ✓Bar race = interpolation between data snapshots over time
- ✓stroke-dashoffset animates the "drawing" of SVG lines
- ✓Clean data + visual description = Claude generates everything
- ✓D3 as a math calculator, not a direct animator
- ✓Avoid d3.transition() — use Remotion’s interpolate()
Next module
3D scenes rendered frame by frame. Materials, cameras, and procedural geometry for 3D motion graphics with WebGL.