README.md 1.89 KB
Newer Older
Mike Bostock's avatar
Mike Bostock committed
1
# D3: Data-Driven Documents
Mike Bostock's avatar
Mike Bostock committed
2

Mike Bostock's avatar
Mike Bostock committed
3
<a href="https://d3js.org"><img src="https://d3js.org/logo.svg" align="left" hspace="10" vspace="6"></a>
Mike Bostock's avatar
Mike Bostock committed
4

Mike Bostock's avatar
Mike Bostock committed
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.
Michael Bostock's avatar
Michael Bostock committed
6

Mike Bostock's avatar
Mike Bostock committed
7
## Resources
8 9

* [API Reference](https://github.com/d3/d3/blob/master/API.md)
Mike Bostock's avatar
Mike Bostock committed
10
* [Release Notes](https://github.com/d3/d3/releases)
Mike Bostock's avatar
Mike Bostock committed
11 12 13
* [Gallery](https://github.com/d3/d3/wiki/Gallery)
* [Examples](http://bl.ocks.org/mbostock)
* [Wiki](https://github.com/d3/d3/wiki)
14

Mike Bostock's avatar
Mike Bostock committed
15
## Installing
Mike Bostock's avatar
Mike Bostock committed
16

Mike Bostock's avatar
Mike Bostock committed
17
If you use npm, `npm install d3`. Otherwise, download the [latest release](https://github.com/d3/d3/releases/latest). The released bundle supports anonymous AMD, CommonJS, and vanilla environments. You can load directly from [d3js.org](https://d3js.org), [CDNJS](https://cdnjs.com/libraries/d3), or [unpkg](https://unpkg.com/d3/). For example:
Mike Bostock's avatar
Mike Bostock committed
18

Mike Bostock's avatar
Mike Bostock committed
19
```html
Mike Bostock's avatar
Mike Bostock committed
20
<script src="https://d3js.org/d3.v4.js"></script>
Mike Bostock's avatar
Mike Bostock committed
21 22 23 24
```

For the minified version:

Mike Bostock's avatar
Mike Bostock committed
25
```html
Mike Bostock's avatar
Mike Bostock committed
26
<script src="https://d3js.org/d3.v4.min.js"></script>
Mike Bostock's avatar
Mike Bostock committed
27 28
```

Mike Bostock's avatar
Mike Bostock committed
29
You can also use the standalone D3 microlibraries. For example, [d3-selection](https://github.com/d3/d3-selection):
Mike Bostock's avatar
Mike Bostock committed
30 31

```html
Mike Bostock's avatar
Mike Bostock committed
32
<script src="https://d3js.org/d3-selection.v1.js"></script>
Mike Bostock's avatar
Mike Bostock committed
33 34
```

Mike Bostock's avatar
Mike Bostock committed
35
D3 is written using [ES2015 modules](http://www.2ality.com/2014/09/es6-modules-final.html). Create a [custom bundle using Rollup](http://bl.ocks.org/mbostock/bb09af4c39c79cffcde4), Webpack, or your preferred bundler. To import D3 into an ES2015 application, either import specific symbols from specific D3 modules:
Mike Bostock's avatar
Mike Bostock committed
36 37

```js
Mike Bostock's avatar
Mike Bostock committed
38
import {scaleLinear} from "d3-scale";
Mike Bostock's avatar
Mike Bostock committed
39 40
```

Mike Bostock's avatar
Mike Bostock committed
41
Or import everything into a namespace (here, `d3`):
Mike Bostock's avatar
Mike Bostock committed
42 43 44 45

```js
import * as d3 from "d3";
```