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

What it is

D3 (Data-Driven Documents) is a JavaScript library for creating data visualizations using SVG, Canvas, and HTML. Created by Mike Bostock in 2011, D3 provides the building blocks for bindng data to DOM elements and applying data-driven transformations. It powers visualizations at the New York Times, Financial Times, The Guardian, and Observable.

D3 is best suited for developers and data journalists who need full control over visual output. Unlike chart libraries that offer pre-built chart types, D3 gives you primitives -- selections, scales, axes, shapes, layouts, transitions, and geo projections -- to build any visualization imaginable.

How it saves time or tokens

D3 consolidates dozens of data visualization tasks into one consistent API. Instead of writing custom SVG manipulation code, you use D3 selections to bind data arrays to elements and let the enter/update/exit pattern handle DOM changes. The modular architecture means you only import the sub-packages you need, keeping bundle sizes small. For AI-assisted workflows, D3 code follows predictable patterns that LLMs can generate reliably.

How to use

1. Install D3 via npm: npm i d3 or load from CDN.
2. Select a container element and bind your data array.
3. Use scales to map data values to visual properties (position, color, size).
4. Append SVG elements and set attributes based on bound data.

Example

import * as d3 from 'd3';

const data = [10, 20, 30, 40, 50];

const svg = d3.select('body')
  .append('svg')
  .attr('width', 400)
  .attr('height', 200);

svg.selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
  .attr('x', (_, i) => i * 60)
  .attr('y', (d) => 200 - d * 3)
  .attr('width', 50)
  .attr('height', (d) => d * 3)
  .attr('fill', 'steelblue');

Related on TokRepo

• AI tools for coding -- explore developer tools and libraries curated on TokRepo.
• Prompt library -- find prompts for generating D3 visualizations with AI assistants.

Common pitfalls

• Confusing D3 v7 API with older v3/v4 tutorials. The module structure and import paths changed significantly. Always check the version in examples.
• The enter/update/exit pattern requires understanding data joins. Missing the .enter() call means new data points never render.
• D3 does not provide pre-built charts. If you want a bar chart in 5 lines, use a wrapper like Observable Plot or Chart.js instead.