Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/q-m/d3.chart.sankey
Reusable D3 Sankey diagram using d3.Chart
https://github.com/q-m/d3.chart.sankey
chart d3 javascript sankey
Last synced: about 2 months ago
JSON representation
Reusable D3 Sankey diagram using d3.Chart
- Host: GitHub
- URL: https://github.com/q-m/d3.chart.sankey
- Owner: q-m
- License: mit
- Archived: true
- Created: 2015-09-10T15:05:16.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2018-03-22T18:56:55.000Z (over 6 years ago)
- Last Synced: 2024-03-26T11:37:12.741Z (6 months ago)
- Topics: chart, d3, javascript, sankey
- Language: JavaScript
- Homepage: http://bl.ocks.org/cab9b01816490edb7083
- Size: 342 KB
- Stars: 107
- Watchers: 7
- Forks: 38
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-d3 - d3.chart.sankey - Reusable D3 Sankey diagram (Charts)
- awesome-d3 - d3.chart.sankey - Reusable D3 Sankey diagram (Charts)
- awesome-starred - q-m/d3.chart.sankey - Reusable D3 Sankey diagram using d3.Chart (javascript)
README
d3.chart.sankey
===============
[](https://badge.fury.io/js/d3.chart.sankey)
[](https://gemnasium.com/github.com/q-m/d3.chart.sankey)
Reusable [D3](http://d3js.org/) Sankey [diagram](https://www.npmjs.com/package/d3-plugins-sankey)
using [d3.Chart](http://misoproject.com/d3-chart/).
Demos:
[energy](http://bl.ocks.org/7317daa451384dbcefe6)
| [product](http://bl.ocks.org/cab9b01816490edb7083)
| [interactive](http://bl.ocks.org/2a71af9df0a0655a470d)
## Usage
Include `d3`, `sankey` and `d3.chart` before `d3.chart.sankey`:
```html
```
Then build the chart:
```js
var chart = d3.select("#chart").append("svg").chart("Sankey");
chart.draw({nodes: [/*...*/], links: [/*...*/]});
```
The chart object supports various ways to customize the diagram:
```js
chart
.nodeWidth(24) // width of node
.nodePadding(8) // vertical space between nodes
.iterations(32) // number of layout iterations
.spread(false) // whether to spread nodes vertically after layout
.name(function(n) { return n.name; }) // node label
.colorNodes('red') // color for nodes
.colorNodes(d3.chart.category20c()) // ... or a color scale
.colorNodes(function(name, node) { return 'red'; }) // ... or a function
.colorLinks('yellow') // color for labels
.colorLinks(function(link) { /* ... */ }) // ... or a function
.alignLabel('start') // align node labels: start, end, auto
.alignLabel((n) => n.x > 100 ? 'end' : 'start'); // ... or a function
```
The _spread_ option does not exist in D3's Sankey plugin and can make some
diagrams clearer. When enabled, nodes are distributed over the full height.
This may work best when the number of iterations is set to zero.
The following events are emitted on the chart:
`node:mouseover`, `node:mouseout`, `node:click`, `node:dblclick`,
`link:mouseover`, `link:mouseout`, `link:click`, `link:dblclick`.
For example:
```js
chart.on('node:click', function(node) {
alert('Clicked on ' + node.name);
});
```
### AMD, CommonJS, ...
This chart can also be loaded as a module:
```js
var d3 = require('d3');
var Sankey = require('d3.chart.sankey');
var svg = d3.select('svg');
var chart = new Sankey(svg);
```
### Chart types
There are three chart types: `Sankey`, `Sankey.Selection` and `Sankey.Path`.
The last two charts add the notion of a selection, which is set on mouseover
when hovering a node or path, or when the `selection` method is called on the
chart (which accepts an array of nodes and links). `Sankey.Path` expands the
selection to connected nodes and links.
When loading as a module, you can also access these charts as properties, so
instead of `new Sankey(g)` you'd use `new Sankey.Selection(g)`;
### Special theming
If you add a property to a node object named "id", d3.chart.sankey will add an
HTML attribute named "data-node-id" with the value of the "id" property to the
node's `` tag.
This allows CSS and non-D3 JavaScript code to target the node with a selector.
For example, in CSS:
```css
[data-node-id="some-id"] rect {
fill: red;
}
```
... or in JavaScript...
```js
document.querySelectorAll('[data-node-id="some-id"]');
```
## Building
You'll need [Node.js](http://nodejs.org/), [Grunt](http://gruntjs.com/) and [Bower](http://bower.io/). To fetch required dependencies, run the following commands from the root of this repository:
```sh
$ npm install
$ bower install
```
After this, the project can be built by invoking Grunt from within this repository:
```sh
$ grunt
```
To build the project along with a minified version of the library, run `grunt release`.