D3

D3

Bring data to life with SVG, Canvas and HTML.
GitHub
106k
Created 13 years ago, last commit a month ago
126 contributors
4.47k commits
Stars added on GitHub, month by month
9
10
11
12
1
2
3
4
5
6
7
8
2022
2023
Stars added on GitHub, per day, on average
Yesterday
=
Last week
+5.9 /day
Last month
+6.1 /day
Last 12 months
+9.3 /day
Package on NPM
d3
7.8.5
Monthly downloads on NPM
9
10
11
12
1
2
3
4
5
6
7
8
2022
2023
README

D3: Data-Driven Documents

D3 (or D3.js) is a free, open-source JavaScript library for visualizing data. Its low-level approach built on web standards offers unparalleled flexibility in authoring dynamic, data-driven graphics. For more than a decade D3 has powered groundbreaking and award-winning visualizations, become a foundational building block of higher-level chart libraries, and fostered a vibrant community of data practitioners around the world.

Resources

Installing

If you use npm, npm install d3. You can also download the latest release on GitHub. For vanilla HTML in modern browsers, import D3 from jsDelivr:

<script type="module">

import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";

const div = d3.selectAll("div");

</script>

For legacy environments, you can load D3’s UMD bundle from an npm-based CDN such as jsDelivr; a d3 global is exported:

<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script>

const div = d3.selectAll("div");

</script>

You can also use D3 modules individually. For example, d3-selection:

<script type="module">

import {selectAll} from "https://cdn.jsdelivr.net/npm/d3-selection@3/+esm";

const div = selectAll("div");

</script>

D3 is written using ES modules. Create a custom bundle using Rollup, Webpack, or your preferred bundler. To import D3 into an ES2015 application, either import specific symbols from specific D3 modules:

import {scaleLinear} from "d3-scale";

Or import everything into a namespace (here, d3):

import * as d3 from "d3";

Or using dynamic import:

const d3 = await import("d3");

You can also import individual modules and combine them into a d3 object using Object.assign:

const d3 = await Promise.all([
  import("d3-format"),
  import("d3-geo"),
  import("d3-geo-projection")
]).then((d3) => Object.assign({}, ...d3));