Sankey Diagrams

Sankey diagrams are data visualizations which are used to display flow through a series of processes. The example above is simple; however, they can also be used for much more complex processes, such as industrial processes including many steps. D3.js is especially well suited to creating Sankey diagrams, and allows a great deal of customization.

One area which works particularly well is energy flow: for example, Sankey data visualizations have been used to illustrate the production of oil, starting from its country of origin, how it's transported, where it's refined, and where it's eventually consumed.

Sankey diagrams can also be used to demonstrate how materials are created and recycled. However, an important principle which sometimes complicates their use in these types of data visualizations is that is that D3.js requires the flow into each part of the process to equal the flow out of that process. The height of each node also has to be equal to the sum of the thicknesses of the flows (in other words, the lines) flowing into and out of it. It's possible to get around these limitations and create Sankey diagrams with feedback loops, but this requires custom programing or forks of the standard D3.js Sankey library.

Another popular use of a Sankey diagram is to show cash flow through a company. In this case, the colours and positions of the nodes and lines have to be moved so that similar flows (for example, those which have a positive impact on the bottom line) are in the same colour (e.g., green), while those which represent flows with a negative impact are in another colour, typically red. The nodes and lines also need to be positioned together so that the dagram is well-organized. Sankey data visualizations like this can be created using D3.js, but these positions have to be custom coded. It’s important to bear in mind the proviso mentioned above: flow into each node has to equal flow out of that node. This requires some understanding of the financial data so that the Sankey diagram makes sense.

The cost of a Sankey data visualization created using D3.js depends greatly on the extent to which it needs to be custom coded. Add-ons such as tool-tips, custom animations and so on will add a bit to the cost but greatly enhance the user experience. The Prices page will give you a general idea. However, please contact us for a free discussion with a developer to work out what’s best for you.