Creating a Sankey Graph with D3.js

A Sankey graph is a powerful data visualization that show how elements flow from one state to another in both state and quantity.

In this above graph, we can see how data flows from one state to another, with wider bands indicating a larger quantity.

As with most things, we start with a data set. In this case, we have a list of nodes and a list links. A node needs to, at least, have an index or id, or some property to uniquely identify the node. Links have three properties: a source, a target, and a value. The source and target are pointers to the appropriate nodes. The value is the number of items that traveled that path.

That’s the basics of how a Sankey graph works in D3. Any other features, including moving the nodes or applying colors, is beyond the scope of this blog post. The full code for the graph in this document is available here.