D3.js — Bring Data to Life with SVG, Canvas & HTML

What D3 Does

• Selections — jQuery-like DOM manipulation
• Scales — map data to visual properties (linear, log, time, ordinal, band)
• Axes — auto-generate axis ticks and labels
• Shapes — pie, arc, area, line, stack, hierarchy generators
• Layouts — force, tree, pack, treemap, Sankey, chord
• Transitions — smooth animated updates
• Geo — projections, topojson, maps
• Data loading — CSV, TSV, JSON parsers

Architecture

D3 is modular — each package (d3-scale, d3-shape, d3-selection) is independently publishable. Core pattern: bind data → select DOM → enter/update/exit pattern → apply attributes. Unlike chart libraries, D3 gives you primitives to build any visualization.

Self-Hosting

Client library only. Ships in your frontend bundle.

Key Features

• Data-driven DOM manipulation
• 30+ scale types
• Comprehensive shape generators
• Force-directed graphs
• Geographic projections
• Smooth transitions
• Canvas + SVG + HTML targets
• Modular packages (install only what you need)

Comparison

FAQ

Q: D3 vs Chart.js？ A: Chart.js is a ready-made charting library (line, bar, pie) — you can get a chart in 5 minutes. D3 is a set of building blocks: it can draw any visualization but requires writing a lot of code.

Q: Does it conflict with React? A: D3's DOM manipulation fights with React's virtual DOM. The recommended pattern is to use D3 for layout/scales and React for rendering SVG. Visx follows this approach.

Q: Steep learning curve? A: Very steep. Learn the three core concepts first — selection, scale, axis — then pick up shape/layout/geo as needed. The observer pattern is key.

Sources & Credits

• Docs: https://d3js.org
• GitHub: https://github.com/d3/d3
• License: ISC