UNPKG

2.46 kBMarkdownView Raw
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
17If 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 Skypack:
18
19```html
20<script type="module">
21
22import * as d3 from "https://cdn.skypack.dev/d3@7";
23
24const div = d3.selectAll("div");
25
26</script>
27```
28
29For 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
35const div = d3.selectAll("div");
36
37</script>
38```
39
40You 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
45import {selectAll} from "https://cdn.skypack.dev/d3-selection@3";
46
47const div = selectAll("div");
48
49</script>
50```
51
52D3 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
55import {scaleLinear} from "d3-scale";
56```
57
58Or import everything into a namespace (here, `d3`):
59
60```js
61import * as d3 from "d3";
62```
63
64Or using dynamic import:
65
66```js
67const d3 = await import("d3");
68```
69
70You 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
73const d3 = await Promise.all([
74 import("d3-format"),
75 import("d3-geo"),
76 import("d3-geo-projection")
77]).then(d3 => Object.assign({}, ...d3));
78```