2019-05-03 23:40:21 +02:00
# D3: Data-Driven Documents
2016-01-28 22:29:27 +01:00
2019-05-03 23:40:21 +02:00
< a href = "https://d3js.org" > < img src = "https://d3js.org/logo.svg" align = "left" hspace = "10" vspace = "6" > < / a >
2016-01-28 22:29:27 +01:00
2019-05-03 23:40:21 +02:00
**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.
2016-01-28 22:29:27 +01:00
2019-05-03 23:40:21 +02:00
## Resources
2016-01-28 22:29:27 +01:00
Update d3 from version 5.9.2 to 6.7.0
Summary:
Update the d3 library to its last 6.x version available on https://github.com/d3/d3/releases
This also requires updating the tooltip event handling of dots in `Chart.js` to avoid an `Uncaught TypeError: d3.event is undefined` per https://observablehq.com/@d3/d3v6-migration-guide#event-management linked from https://github.com/d3/d3/releases/tag/v6.0.0
Closes T15820
Test Plan:
* Enable the Facts application, go to the Reports of a Project with task changes over time, look at charts, hover over data points, read the tooltip - e.g. on http://phorge.localhost/project/reports/1/ or http://phorge.localhost/maniphest/report/burn/
* Check HTML source of above URIs for the `<script type="text/javascript">` loading `d3.min.js` and open the JS file to verify the d3 version number bump.
* Check Console of web browser's developer tools for no errors.
Reviewers: O1 Blessed Committers, speck
Reviewed By: O1 Blessed Committers, speck
Subscribers: speck, tobiaswiese, valerio.bozzolan, Matthew, Cigaryno
Maniphest Tasks: T15820
Differential Revision: https://we.phorge.it/D25631
2024-05-09 17:21:43 +02:00
* [Introduction ](https://observablehq.com/@d3/learn-d3 )
2019-05-03 23:40:21 +02:00
* [API Reference ](https://github.com/d3/d3/blob/master/API.md )
Update d3 from version 5.9.2 to 6.7.0
Summary:
Update the d3 library to its last 6.x version available on https://github.com/d3/d3/releases
This also requires updating the tooltip event handling of dots in `Chart.js` to avoid an `Uncaught TypeError: d3.event is undefined` per https://observablehq.com/@d3/d3v6-migration-guide#event-management linked from https://github.com/d3/d3/releases/tag/v6.0.0
Closes T15820
Test Plan:
* Enable the Facts application, go to the Reports of a Project with task changes over time, look at charts, hover over data points, read the tooltip - e.g. on http://phorge.localhost/project/reports/1/ or http://phorge.localhost/maniphest/report/burn/
* Check HTML source of above URIs for the `<script type="text/javascript">` loading `d3.min.js` and open the JS file to verify the d3 version number bump.
* Check Console of web browser's developer tools for no errors.
Reviewers: O1 Blessed Committers, speck
Reviewed By: O1 Blessed Committers, speck
Subscribers: speck, tobiaswiese, valerio.bozzolan, Matthew, Cigaryno
Maniphest Tasks: T15820
Differential Revision: https://we.phorge.it/D25631
2024-05-09 17:21:43 +02:00
* [Releases ](https://github.com/d3/d3/releases )
* [Examples ](https://observablehq.com/@d3/gallery )
2019-05-03 23:40:21 +02:00
* [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
Update d3 from version 5.9.2 to 6.7.0
Summary:
Update the d3 library to its last 6.x version available on https://github.com/d3/d3/releases
This also requires updating the tooltip event handling of dots in `Chart.js` to avoid an `Uncaught TypeError: d3.event is undefined` per https://observablehq.com/@d3/d3v6-migration-guide#event-management linked from https://github.com/d3/d3/releases/tag/v6.0.0
Closes T15820
Test Plan:
* Enable the Facts application, go to the Reports of a Project with task changes over time, look at charts, hover over data points, read the tooltip - e.g. on http://phorge.localhost/project/reports/1/ or http://phorge.localhost/maniphest/report/burn/
* Check HTML source of above URIs for the `<script type="text/javascript">` loading `d3.min.js` and open the JS file to verify the d3 version number bump.
* Check Console of web browser's developer tools for no errors.
Reviewers: O1 Blessed Committers, speck
Reviewed By: O1 Blessed Committers, speck
Subscribers: speck, tobiaswiese, valerio.bozzolan, Matthew, Cigaryno
Maniphest Tasks: T15820
Differential Revision: https://we.phorge.it/D25631
2024-05-09 17:21:43 +02:00
< script src = "https://d3js.org/d3.v6.js" > < / script >
2019-05-03 23:40:21 +02:00
```
For the minified version:
```html
Update d3 from version 5.9.2 to 6.7.0
Summary:
Update the d3 library to its last 6.x version available on https://github.com/d3/d3/releases
This also requires updating the tooltip event handling of dots in `Chart.js` to avoid an `Uncaught TypeError: d3.event is undefined` per https://observablehq.com/@d3/d3v6-migration-guide#event-management linked from https://github.com/d3/d3/releases/tag/v6.0.0
Closes T15820
Test Plan:
* Enable the Facts application, go to the Reports of a Project with task changes over time, look at charts, hover over data points, read the tooltip - e.g. on http://phorge.localhost/project/reports/1/ or http://phorge.localhost/maniphest/report/burn/
* Check HTML source of above URIs for the `<script type="text/javascript">` loading `d3.min.js` and open the JS file to verify the d3 version number bump.
* Check Console of web browser's developer tools for no errors.
Reviewers: O1 Blessed Committers, speck
Reviewed By: O1 Blessed Committers, speck
Subscribers: speck, tobiaswiese, valerio.bozzolan, Matthew, Cigaryno
Maniphest Tasks: T15820
Differential Revision: https://we.phorge.it/D25631
2024-05-09 17:21:43 +02:00
< script src = "https://d3js.org/d3.v6.min.js" > < / script >
2019-05-03 23:40:21 +02:00
```
You can also use the standalone D3 microlibraries. For example, [d3-selection ](https://github.com/d3/d3-selection ):
```html
Update d3 from version 5.9.2 to 6.7.0
Summary:
Update the d3 library to its last 6.x version available on https://github.com/d3/d3/releases
This also requires updating the tooltip event handling of dots in `Chart.js` to avoid an `Uncaught TypeError: d3.event is undefined` per https://observablehq.com/@d3/d3v6-migration-guide#event-management linked from https://github.com/d3/d3/releases/tag/v6.0.0
Closes T15820
Test Plan:
* Enable the Facts application, go to the Reports of a Project with task changes over time, look at charts, hover over data points, read the tooltip - e.g. on http://phorge.localhost/project/reports/1/ or http://phorge.localhost/maniphest/report/burn/
* Check HTML source of above URIs for the `<script type="text/javascript">` loading `d3.min.js` and open the JS file to verify the d3 version number bump.
* Check Console of web browser's developer tools for no errors.
Reviewers: O1 Blessed Committers, speck
Reviewed By: O1 Blessed Committers, speck
Subscribers: speck, tobiaswiese, valerio.bozzolan, Matthew, Cigaryno
Maniphest Tasks: T15820
Differential Revision: https://we.phorge.it/D25631
2024-05-09 17:21:43 +02:00
< script src = "https://d3js.org/d3-selection.v2.js" > < / script >
2019-05-03 23:40:21 +02:00
```
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
Update d3 from version 5.9.2 to 6.7.0
Summary:
Update the d3 library to its last 6.x version available on https://github.com/d3/d3/releases
This also requires updating the tooltip event handling of dots in `Chart.js` to avoid an `Uncaught TypeError: d3.event is undefined` per https://observablehq.com/@d3/d3v6-migration-guide#event-management linked from https://github.com/d3/d3/releases/tag/v6.0.0
Closes T15820
Test Plan:
* Enable the Facts application, go to the Reports of a Project with task changes over time, look at charts, hover over data points, read the tooltip - e.g. on http://phorge.localhost/project/reports/1/ or http://phorge.localhost/maniphest/report/burn/
* Check HTML source of above URIs for the `<script type="text/javascript">` loading `d3.min.js` and open the JS file to verify the d3 version number bump.
* Check Console of web browser's developer tools for no errors.
Reviewers: O1 Blessed Committers, speck
Reviewed By: O1 Blessed Committers, speck
Subscribers: speck, tobiaswiese, valerio.bozzolan, Matthew, Cigaryno
Maniphest Tasks: T15820
Differential Revision: https://we.phorge.it/D25631
2024-05-09 17:21:43 +02:00
const d3 = require("d3");
2019-05-03 23:40:21 +02:00
```
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
Update d3 from version 5.9.2 to 6.7.0
Summary:
Update the d3 library to its last 6.x version available on https://github.com/d3/d3/releases
This also requires updating the tooltip event handling of dots in `Chart.js` to avoid an `Uncaught TypeError: d3.event is undefined` per https://observablehq.com/@d3/d3v6-migration-guide#event-management linked from https://github.com/d3/d3/releases/tag/v6.0.0
Closes T15820
Test Plan:
* Enable the Facts application, go to the Reports of a Project with task changes over time, look at charts, hover over data points, read the tooltip - e.g. on http://phorge.localhost/project/reports/1/ or http://phorge.localhost/maniphest/report/burn/
* Check HTML source of above URIs for the `<script type="text/javascript">` loading `d3.min.js` and open the JS file to verify the d3 version number bump.
* Check Console of web browser's developer tools for no errors.
Reviewers: O1 Blessed Committers, speck
Reviewed By: O1 Blessed Committers, speck
Subscribers: speck, tobiaswiese, valerio.bozzolan, Matthew, Cigaryno
Maniphest Tasks: T15820
Differential Revision: https://we.phorge.it/D25631
2024-05-09 17:21:43 +02:00
const d3 = Object.assign({}, require("d3-format"), require("d3-geo"), require("d3-geo-projection"));
2019-05-03 23:40:21 +02:00
```