d3-sankey-diagram

Sankey diagrams show flows between processes or relationships between sets. This library, is a reusable d3 diagram featuring:

• automatic layout
• multiple types of flow
• loops / reversed flows
• flow routing across layers

See the demo for examples of these.

Installation

Install using npm if you are using browserify or the like:

npm install d3-sankey-diagram

Or download the standalone bundle and include in your page as

<script src="d3-sankey-diagram.js" charset="utf-8"></script>

Usage

var diagram = sankeyDiagram()
  .width(1000)
  .height(600)
  .margins({ left: 100, right: 160, top: 10, bottom: 10 })
  .nodeTitle(function(d) { return d.data.title !== undefined ? d.data.title : d.id; })
  .linkTypeTitle(function(d) { return d.data.title; })
  .linkColor(function(d) { return d.data.color; });

d3.json('uk_energy.json', function(energy) {
  d3.select('#sankey')
      .datum(energy)
      .call(diagram);
});

Try more live examples.

If you use the Jupyter notebook, try ipysankeywidget.

d3-sankey-diagram works both in node (using jsdom) and in the browser. To use jsdom, transitions must be disabled using

diagram.duration(null);

Documentation

API docs are on the wiki.

Tests

Run the tests:

npm test

Licence

MIT licence.

Contributions

Contributions are welcome. Open an issue or a pull request!