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

> D3 is the grandparent of data visualization on the web — a low-level toolkit for binding data to DOM, applying data-driven transformations, and building any chart imaginable. Powers the New York Times, Observable, and thousands of dashboards.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

## Quick Use

```bash
npm i d3
```

```ts
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");
```

## Intro

D3 (Data-Driven Documents) is a JavaScript library for visualizing data with SVG, Canvas, and HTML. Created by Mike Bostock in 2011, D3 is the foundation of most famous data journalism visualizations (NYT, FT, The Guardian, Pudding).

- **Repo**: https://github.com/d3/d3
- **Stars**: 112K+
- **License**: ISC

## 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

| Tool | Level | Learning Curve | Customization |
|---|---|---|---|
| D3 | Low-level primitives | Steep | Unlimited |
| Chart.js | High-level charts | Easy | Limited |
| ECharts | High-level charts | Easy | Themes |
| Observable Plot | D3-based higher level | Easy | Good |
| Visx | D3 + React | Medium | Unlimited |

## 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

---
Source: https://tokrepo.com/en/workflows/d3-js-bring-data-life-svg-canvas-html-ee953940
Author: Script Depot