D3.js

D3 v7 · Low-level toolbox · 30+ composable modules · Web standards (SVG/Canvas/DOM)

Installation

ESM: import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm"
UMD: \x3Cscript src="https://cdn.jsdelivr.net/npm/d3@7">\x3C/script>
npm: npm install d3 → import * as d3 from "d3"
Submodules: import {mean} from "d3-array"

1-Minute Bar Chart

import * as d3 from "d3";
const data = [10, 20, 30, 40, 50];
const svg = d3.create("svg").attr("width", 400).attr("height", 200);
const x = d3.scaleBand().domain(data.map((d,i)=>i)).range([0,350]).padding(.2);
const y = d3.scaleLinear().domain([0, d3.max(data)]).range([150, 0]);
svg.selectAll("rect").data(data).join("rect")
  .attr("x", (d,i)=>x(i)).attr("y", d=>y(d))
  .attr("width", x.bandwidth()).attr("height", d=>150-y(d))
  .attr("fill", "steelblue");
document.getElementById("chart").append(svg.node());

Module Index

Progressive Loading

Usage principle: D3 has no "chart" abstraction. Visualizations are built by composing selections + scales + shapes + axes. No automatic chart generation — only component-level precise control. Use Canvas for 5000+ data points.