D3.js

D3.js (Data-Driven Documents) is a free, open-source JavaScript library for visualizing data using web standards — SVG, Canvas, and HTML — rather than a proprietary charting API. Instead of shipping a fixed set of chart types, D3 gives you low-level primitives for binding data to the DOM, computing scales and shapes, and driving smooth transitions, so you can build exactly the visualization your data calls for.

Maintained since 2010 by Mike Bostock and a community of over 150 contributors, D3 has become the foundational layer beneath countless higher-level charting libraries (Observable Plot, Recharts internals, Vega-Lite) and has powered award-winning data journalism at outlets like The New York Times. The d3 package itself is a meta-package that re-exports roughly 30 focused d3-* modules (d3-scale, d3-shape, d3-selection, d3-force, d3-geo, and more), so teams can depend on the whole toolkit or cherry-pick just the modules they need.

What You Get

• A DOM selection and data-join API (d3-selection) for binding arrays of data to elements and keeping them in sync as data changes
• Scale functions (d3-scale) that map abstract data domains — linear, time, ordinal, quantize — onto visual ranges like pixel positions or colors
• Shape generators (d3-shape) for arcs, lines, areas, pies, and curves used to render paths from data
• A force-directed graph simulation engine (d3-force) for network and particle-style layouts
• Cartographic projections and geometric operations (d3-geo) for rendering maps and spatial data
• A transition and interpolation system (d3-transition, d3-interpolate, d3-ease) for smoothly animating attributes over time
• Utilities for hierarchies, chords, contours, quadtrees, color spaces, formatting, and parsing CSV/TSV data

Common Use Cases

• Building fully custom, interactive charts (bar, line, scatter, area) that off-the-shelf charting libraries can’t express
• Rendering network/relationship graphs with force-directed layouts
• Building choropleth maps and other geo-spatial visualizations from GeoJSON or TopoJSON
• Powering data-journalism graphics and scrollytelling pieces that need pixel-level custom design
• Serving as the rendering engine underneath a higher-level charting or dashboard library

Under The Hood

Architecture — d3 itself is a thin meta-package: src/index.js is a 30-line file that re-exports every symbol from roughly 30 independently versioned d3-* packages (d3-selection, d3-scale, d3-shape, d3-force, d3-geo, d3-transition, and so on), each of which lives in its own repository and npm package under the d3 GitHub organization. There is no shared runtime state between modules beyond a few narrow integration points (for example d3-transition extends d3-selection’s prototype, and d3-brush/d3-drag/d3-zoom all consume d3-selection and d3-dispatch). Consumers can import the full d3 bundle for convenience or depend on individual sub-packages (e.g. d3-scale alone) to minimize bundle size — a deliberate micro-package architecture that trades a more complex dependency graph for granular tree-shaking. Tech Stack — Pure, dependency-light JavaScript (ES modules, "type": "module" in package.json) with zero runtime dependencies outside the d3-* family itself. The build pipeline uses Rollup (rollup.config.js) to produce UMD and ESM bundles (dist/d3.js, dist/d3.min.js, dist/d3.mjs) via @rollup/plugin-node-resolve, @rollup/plugin-json, and @rollup/plugin-terser for minification; the documentation site is built with VitePress. Targets node >=12 and browsers supporting ES modules. Code Quality — Tests run via Mocha (test/**/*-test.js) plus ESLint over src and test; the top-level d3 package’s own test suite (test/d3-test.js) is notably a contract test — it asserts every export of each d3-* dependency is re-exported by the aggregate d3 object, rather than testing behavior directly, since behavioral coverage lives in each sub-package’s own repository. This split-repo test strategy means quality signals for any given feature (e.g. d3-scale’s edge cases) live outside this repo. API Design — D3’s API is intentionally low-level and composable rather than declarative: you construct scales, shapes, and selections as reusable functions and wire them together yourself, which gives complete visual control but has a steeper learning curve than a typical “pass data, get a chart” library. The chained, functional style (d3.scaleLinear().domain(...).range(...)) is consistent across nearly all modules, and the getting-started docs walk through building a full axis-labeled chart from scratch to illustrate the primitives-first philosophy.