D3.js (Data-Driven Documents) is a free, open-source JavaScript library for building charts and other data graphics in the browser. It is not a charting tool in the usual sense: there is no "make a bar chart" function. Instead, D3 gives you building blocks (scales, axes, shapes, layouts, transitions, map projections, a force simulation) and a way to bind data to elements on a web page. You assemble the chart yourself, usually as SVG.
That makes it slower to start with than any other tool on this site, and more flexible than all of them. If you can sketch it, you can probably build it in D3.
Who it suits
D3 suits developers and designers who build custom graphics for the web: graphics desks at news organizations, product teams adding charts to an app, data artists, and people building interactive explainers. It suits people who already write JavaScript, or are ready to learn it.
It doesn't suit someone who needs a standard chart today. A sorted bar chart takes minutes in Datawrapper and an afternoon in D3 the first time.
What it does well
Control is the point. With D3 you decide every mark, label position, color, interaction and animation. That matters for graphics that don't fit a template: a custom timeline, a chart that morphs from one form into another as the reader scrolls, a map with an unusual projection.
The parts most people use:
- Scales, which turn data values into positions, sizes and colors, including time, log and color scales.
- Axes, generated from a scale, with control over ticks and formatting.
- Shapes and layouts for lines, areas, arcs, stacks, treemaps, pack layouts, trees and chords.
- Force simulation for network graphs and beeswarm-style layouts. The network graphs guide explains when that kind of chart is worth it.
- Geographic projections for maps from GeoJSON or TopoJSON.
- Transitions for smooth animated changes between states.
D3 is modular, so you can use just the parts you need, such as its scales and shapes inside a React or Svelte app that handles the page itself.
Where it gets in the way
The learning curve is steep. You need JavaScript, SVG, the way D3 joins data to elements, and the browser's layout model. Early on, small things like axis label positions, margins and responsive resizing take far longer than in any tool.
Every chart is a project. There are no defaults to fall back on, so details a tool handles for you (tooltips, mobile layouts, accessible text alternatives) are your job. Plan time for testing on phones, and for accessibility, which a custom SVG doesn't get for free.
Examples online span many versions of the library. Older code often uses patterns that have since changed, so check which version an example targets before copying it.
Free options
D3 is free and open source under a permissive license. You can load it from a package manager or a CDN and use it in any project, commercial or not. Observable, the company founded by D3's creator, runs an online notebook platform where many D3 examples live, and the same team makes Observable Plot, a higher-level library built on D3 for quick exploratory charts.
How it compares
Against Flourish: Flourish offers ready-made interactive templates without code. If a template fits, Flourish is many times faster. D3 is for when no template fits, or when the graphic has to live inside your own site or app with your own design system.
Against Datawrapper: Datawrapper produces clean standard charts quickly, with good mobile and accessibility defaults. D3 can match that output, but only if you build those defaults yourself.
| D3.js | Flourish | Datawrapper | |
|---|---|---|---|
| You write | JavaScript | Nothing, settings only | Nothing, settings only |
| Chart types | Anything | Large template library | Fixed list of common types |
| Time to a first chart | Hours to days | Under an hour | Minutes |
A good first project
Build a scatter plot from a small CSV, for example daily high temperature against ice cream sales or a city's monthly rainfall against umbrella sales. Load the file, create x and y scales, draw the axes, add one circle per row, and label the axes.
Then add one thing at a time: a tooltip on hover, a color for one highlighted point, and a transition when you switch the y variable. Each step teaches a core part of D3, and by the end you will understand how most D3 charts are put together.
Questions
Do I need to know JavaScript to use D3?
Yes. D3 is a JavaScript library, so you write code to load data, create SVG or canvas elements and attach behavior. Comfort with HTML, CSS and SVG helps as much as JavaScript itself.
Is D3 still worth learning?
For custom, interactive graphics on the web, yes, and many higher-level chart libraries are built on its parts. If you only need standard charts, a higher-level library or a tool like Datawrapper will get you there much faster.