D3.js

Overview

D3.js (Data-Driven Documents) is the most influential visualization library ever created for the web. Written by Mike Bostock during his PhD at Stanford, D3 provides a low-level toolkit for bindng data to DOM elements and applying data-driven transformations. Unlike high-level charting libraries that offer pre-built chart types, D3 gives you primitives — scales, axes, shapes, layouts, projections, forces, hierarchies — that you compose to build any visualization imaginable.

D3 is not a charting library in the traditional sense. It does not have a “bar chart” function. Instead, it gives you the tools to select DOM elements, bindthem to data, compute positions from scales, draw rectangles, add axes, and animate transitions. This low-level approach means D3 has no ceiling: if you can imagine a visualization, D3 can build it. This is why D3 powers the interactive graphics at The New York Times, The Washington Post, The Pudding, and countless other data-driven publications.

D3 v7 (the current major version) is fully modular — you can import only the pieces you need. The ecosystem includes d3-scale, d3-shape, d3-geo, d3-hierarchy, d3-force, d3-transition, and many more sub-modules. D3 is also the rendering engine behind many higher-level tools: Observable Plot, Vega, Flourish, and Datawrapper all build on D3 internally.

Strengths

• No ceiling on what you can create — any visualization is possible
• Fine-grained control over every pixel, element, and interaction
• Powerful transition and animation system for smooth data updates
• Comprehensive geographic projection library (d3-geo) for any map projection
• Force-directed layouts for network diagrams and simulations
• Hierarchical layouts: treemaps, sunbursts, circle packing, dendrograms
• Modular architecture — import only what you need
• Massive ecosystem: thousands of examples on Observable and bl.ocks.org
• Industry standard for data journalism and bespoke interactive visualizations
• Works with SVG, Canvas, or even WebGL

Limitations

• Steep learning curve — requires strong JavaScript fundamentals
• Verbose: a simple bar chart can be 50+ lines of code
• No built-in chart types — everything is assembled from primitives
• Data manipulation must be handled separately (or via d3-array)
• Responsive design is manual — you must handle resize events yourself
• Integration with React/Vue/Svelte requires careful handling of DOM ownership
• Accessibility (screen readers, keyboard navigation) must be manually implemented
• Debugging complex selections and data joins can be frustrating
• No built-in legends, tooltips, or annotation helpers

Best For

D3 is the right tool when no existing library can produce the visualization you need. It excels at custom, bespoke visualizations for data journalism, unique interactive experiences, novel chart types that do not exist in any library, and situations where you need pixel-perfect control over every visual element. If you are building a visualization that will be seen by millions and needs to be unlike anything created before, D3 is the tool. For standard charts, consider Observable Plot (which is built on D3) instead.

Getting Started

Install via npm:

npm install d3

Or use from a CDN:

<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>

Create a bar chart:

import * as d3 from "d3";

const data = [
  { name: "A", value: 30 },
  { name: "B", value: 80 },
  { name: "C", value: 45 },
  { name: "D", value: 60 }
];

const width = 600, height = 400, margin = { top: 20, right: 20, bottom: 30, left: 40 };

const svg = d3.select("#chart")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

const x = d3.scaleBand()
  .domain(data.map(d => d.name))
  .range([margin.left, width - margin.right])
  .padding(0.2);

const y = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.value)])
  .nice()
  .range([height - margin.bottom, margin.top]);

svg.selectAll("rect")
  .data(data)
  .join("rect")
  .attr("x", d => x(d.name))
  .attr("y", d => y(d.value))
  .attr("width", x.bandwidth())
  .attr("height", d => y(0) - y(d.value))
  .attr("fill", "steelblue");

svg.append("g").attr("transform", `translate(0,${height - margin.bottom})`).call(d3.axisBottom(x));
svg.append("g").attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y));

Supported Chart Types

D3 can create literally any 2D visualization. Its built-in layouts and shape generators directly support: bar charts, stacked bar charts, line graphs, area graphs, pie charts, donut charts, scatterplots, bubble charts, histograms, heatmaps, treemaps, sunburst diagrams, circle packing, dendrograms, Sankey diagrams (via d3-sankey), chord diagrams, network diagrams (force-directed), choropleth maps (with any projection), hexbin maps, contour plots, violin plots, box plots, parallel coordinates, word clouds (via d3-cloud), and radar charts. If a chart type exists, D3 can build it. If a chart type does not exist yet, D3 is how you would invent it.