Sankey Diagram Code

Let’s take a look at how Sankey diagrams are created in D3.

The code

The code for the Sankey diagram is significantly different from that for a line graph, although it shares the same core language and programming methodology.

We will begin with a version that uses data that is formatted to be used directly with no manipulation. Then in subsequent sections, we will work on different techniques for getting data from different formats (and with different structures) to work.

I found that getting data in the correct format was the biggest hurdle for getting a Sankey diagram to work. We will design our diagram to work with three possible cases:

• First case: the data is perfectly formatted
• Second case:

...