D3.js#

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

Installation#

text

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

1-Minute Bar Chart#

js

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#

ModulePurposeLocationselection/scale/shape/axis/transition/path/easeSelections·Scales·Shapes·Axes·Transitions·Path·Easingessentialsarray/format/interpolate/color/random/dispatch/timerArray stats·Number format·Interpolation·Color·Random·Events·Timeradvancedpolygon/quadtree/delaunay/chord/contourPolygons·Quadtree·Delaunay·Chord·Contouradvancedforce/hierarchy/geo/zoom/brush/dragForce·Hierarchy·Geo·Zoom·Brush·Dragadvanceddsv/fetch/time/time-formatCSV·Fetch·Time intervals·Time formatdatascale-chromaticColor schemes (schemeCategory10/interpolateViridis)essentials

Progressive Loading#

FileContentessentials.mdSelections·Data join·Scales·Axes·Shapes·Transitions·Easing·Path·5 chart templates·React/Svelte·Margindata.mdCSV/JSON/TSV loading·Parsing·Formatting·Time intervals·Time formattingadvanced.mdArray stats·Interpolation·Color·Random·Events·Timer·Polygons·Quadtree·Chord·Contour·Delaunay·Force·Hierarchy·Geo·Zoom·Brush·Drag

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.