1 | # D3: Data-Driven Documents
|
2 |
|
3 | <a href="https://d3js.org"><img src="https://d3js.org/logo.svg" align="left" hspace="10" vspace="6"></a>
|
4 |
|
5 | **D3** (or **D3.js**) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas and HTML. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers and the freedom to design the right visual interface for your data.
|
6 |
|
7 | ## Resources
|
8 |
|
9 | * [Introduction](https://observablehq.com/@d3/learn-d3)
|
10 | * [API Reference](https://github.com/d3/d3/blob/main/API.md)
|
11 | * [Releases](https://github.com/d3/d3/releases)
|
12 | * [Examples](https://observablehq.com/@d3/gallery)
|
13 | * [Wiki](https://github.com/d3/d3/wiki)
|
14 |
|
15 | ## Installing
|
16 |
|
17 | If you use npm, `npm install d3`. You can also download the [latest release on GitHub](https://github.com/d3/d3/releases/latest). For vanilla HTML in modern browsers, import D3 from jsDelivr:
|
18 |
|
19 | ```html
|
20 | <script type="module">
|
21 |
|
22 | import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
|
23 |
|
24 | const div = d3.selectAll("div");
|
25 |
|
26 | </script>
|
27 | ```
|
28 |
|
29 | For legacy environments, you can load D3’s UMD bundle from an npm-based CDN such as jsDelivr; a `d3` global is exported:
|
30 |
|
31 | ```html
|
32 | <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
|
33 | <script>
|
34 |
|
35 | const div = d3.selectAll("div");
|
36 |
|
37 | </script>
|
38 | ```
|
39 |
|
40 | You can also use the standalone D3 microlibraries. For example, [d3-selection](https://github.com/d3/d3-selection):
|
41 |
|
42 | ```html
|
43 | <script type="module">
|
44 |
|
45 | import {selectAll} from "https://cdn.jsdelivr.net/npm/d3-selection@3/+esm";
|
46 |
|
47 | const div = selectAll("div");
|
48 |
|
49 | </script>
|
50 | ```
|
51 |
|
52 | D3 is written using [ES2015 modules](http://www.2ality.com/2014/09/es6-modules-final.html). 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:
|
53 |
|
54 | ```js
|
55 | import {scaleLinear} from "d3-scale";
|
56 | ```
|
57 |
|
58 | Or import everything into a namespace (here, `d3`):
|
59 |
|
60 | ```js
|
61 | import * as d3 from "d3";
|
62 | ```
|
63 |
|
64 | Or using dynamic import:
|
65 |
|
66 | ```js
|
67 | const d3 = await import("d3");
|
68 | ```
|
69 |
|
70 | You can also import individual modules and combine them into a `d3` object using [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign):
|
71 |
|
72 | ```js
|
73 | const d3 = await Promise.all([
|
74 | import("d3-format"),
|
75 | import("d3-geo"),
|
76 | import("d3-geo-projection")
|
77 | ]).then(d3 => Object.assign({}, ...d3));
|
78 | ```
|