mirror of
https://we.phorge.it/source/phorge.git
synced 2024-12-23 22:10:55 +01:00
0776b5ca2c
Summary: Ref T13279. Old D3 seems perfectly fine, but most of the good references seem to have been written by people who update D3 more than once every 10 years (???). This requires some minor API changes, see next diff. Test Plan: See next diff. Reviewers: amckinley Reviewed By: amckinley Maniphest Tasks: T13279 Differential Revision: https://secure.phabricator.com/D20497
57 lines
2.2 KiB
Markdown
57 lines
2.2 KiB
Markdown
# D3: Data-Driven Documents
|
|
|
|
<a href="https://d3js.org"><img src="https://d3js.org/logo.svg" align="left" hspace="10" vspace="6"></a>
|
|
|
|
**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.
|
|
|
|
## Resources
|
|
|
|
* [API Reference](https://github.com/d3/d3/blob/master/API.md)
|
|
* [Release Notes](https://github.com/d3/d3/releases)
|
|
* [Gallery](https://github.com/d3/d3/wiki/Gallery)
|
|
* [Examples](https://bl.ocks.org/mbostock)
|
|
* [Wiki](https://github.com/d3/d3/wiki)
|
|
|
|
## Installing
|
|
|
|
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:
|
|
|
|
```html
|
|
<script src="https://d3js.org/d3.v5.js"></script>
|
|
```
|
|
|
|
For the minified version:
|
|
|
|
```html
|
|
<script src="https://d3js.org/d3.v5.min.js"></script>
|
|
```
|
|
|
|
You can also use the standalone D3 microlibraries. For example, [d3-selection](https://github.com/d3/d3-selection):
|
|
|
|
```html
|
|
<script src="https://d3js.org/d3-selection.v1.js"></script>
|
|
```
|
|
|
|
D3 is written using [ES2015 modules](http://www.2ality.com/2014/09/es6-modules-final.html). Create a [custom bundle using Rollup](https://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:
|
|
|
|
```js
|
|
import {scaleLinear} from "d3-scale";
|
|
```
|
|
|
|
Or import everything into a namespace (here, `d3`):
|
|
|
|
```js
|
|
import * as d3 from "d3";
|
|
```
|
|
|
|
In Node:
|
|
|
|
```js
|
|
var d3 = require("d3");
|
|
```
|
|
|
|
You can also require 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):
|
|
|
|
```js
|
|
var d3 = Object.assign({}, require("d3-format"), require("d3-geo"), require("d3-geo-projection"));
|
|
```
|