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: we have link data, but do not have names
• Third case: we have names, but do not have node values

We won’t try to go over every inch of the code as we did with the simple graph example (I’ll skip things like the HTML header). We will focus on the style sheet (CSS) portion and the JavaScript.