analytics

D3

Name: D3
Author: d3

Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:

113,574 stars22,672 forksShellUpdated 5/28/2026100% free · open source

What it does

d3 lets you create interactive, data‑driven visualizations in the browser using SVG, Canvas, or HTML.

Install / run

npm install d3

When to use it

•You need a custom chart (e.g., animated bar chart, map, or network) that isn’t covered by out‑of‑the‑box BI tools.
•Your product UI must visualize live or user‑generated data with fine‑grained control over layout and interactivity.
•You want to embed a responsive data graphic directly into a web app without heavy charting libraries.

Quick start

11️⃣ Create a project folder and run the install command above.
22️⃣ Add an `index.html` file:
3```html <!DOCTYPE html> <html> <head><meta charset="utf-8"><title>d3 demo</title></head> <body> <svg width="600" height="400"></svg> <script type="module" src="main.js"></script> </body> </html> ```
43️⃣ Create a `main.js` file and import d3:
5```js import * as d3 from "d3"; const data = [30, 86, 168, 281, 303, 365]; const svg = d3.select("svg"); svg.selectAll("rect") .data(data) .enter() .append("rect") .attr("x", (d, i) => i * 45) .attr("y", d => 400 - d) .attr("width", 40) .attr("height", d => d) .attr("fill", "steelblue"); ```
64️⃣ Start a local server (required because browsers block module imports from `file://`):

Ready-to-paste prompt

node -e "import('d3').then(d3=>{ console.log('d3 version', d3.version); })"

Heads up: d3 is an ES‑module; you must serve your files over HTTP (e.g., with `npx http-server`) or use a bundler, otherwise the browser will block the import with a CORS/“Unexpected token” error.

Saves to your device

Topics

chart

charts

data-visualization

svg

visualization

How D3 works

Codeflow

Free to inspect

D3 is mostly documents (119 doc files, 35 small scripts) — something you read, not something you run. There is nothing to install. Last commit 3 months ago, ISC license.

Size

Mostly documents

119 documents · 35 small scripts · ~4 h to skim

Setup

Nothing to install

A guide / curated list. Just read it and follow the links.

Runs on

Nowhere — you read it

A reading resource, not a program.

Shell 92%JavaScript 8%

Where to start reading