To make the Sankey diagram I used in my Attrition in the Justice System infographic, I made use of this D3 Sankey plugin.
You’ll notice if you follow the link and poke around, that the plugin is somewhat lean on the ol’ documentation. So, I resorted to googling in order to find the support I needed. Luckily I found this wonderful blog called d3noob, which I suspect is going to be my new best friend.
What I love about this resource is that the author is writing as they learn, and as a result, it’s pitched at exactly the right level for someone making their own way as a beginner. All the posts are collated into a free ebook, which you can download here.
The section on Sankey diagrams took me through exactly what I needed to do to get my data formatted properly and provided clear code examples to follow. So a massive shoutout to d3noob, I really appreciate your work and sharing.
The d3 plugin needs to receive data contained in a specific structure: an object containing two arrays of objects, like this:

var data = {
nodes: [
{node: 0, name: “first node”},
{node: 1, name: “second node”},
{node: 2, name: “third node”},
{node: 3, name: “fourth node”}
],
links: [
{source: 0, target: 1, value: 100},
{source: 1, target: 2, value: 50},
{source: 1, target: 2, value: 50}
}

Links need to have their source and destination nodes specified by their index in the nodes array, as well as their value so that their width can be set.
Each node needs a name, which if I were to publish this diagram in the browser I would use later for labelling purposes, although I didn’t end up doing so on this occasion.
Once the data was formatted and ready to go, I downloaded the plugin code and got to work.
The d3 Sankey plugin is a bit fiddly to work with. The node and link methods need to have the requisite arrays of objects passed in in the first instance. Then more specific data binding is required in the second round of method chaining.
With a lot of support from d3noob, I produced a very simplistic Sankey diagram in the browser.

As you’ll notice, I applied no styling except for setting the fill and stroke of the link paths with css so that they would be visible. Instead, I exported it from the browser as an svg, which I then styled in Adobe Illustrator for use in my infographic.
What I learned from this exercise is that using a plugin without sufficient documentation is sometimes more complicated than just writing the code yourself. I had to tweak the plugin to get the nodes to arrange themselves appropriately for my purpose, and I wasted a lot of time with my head under the bonnet trawling through code trying to figure out how the thing worked.
I might have been better served by simply following along with d3noob and making my Sankey diagram from scratch. Next time I produce one, that’s what I intend to do.
Data is beautiful – Sarah
Sarah blogs about how data can be made aesthetic at as well as informative.