Tag: loop

Loopbacks in Sankey Diagrams

My previous post on circular links got a number of responses. Indeed it seems as if drawing loopbacks (as I prefer to call them) is one of the tougher challenges in Sankey diagrams.

  • Loops back to the same node are typically not required in relationship diagrams (bands depicting relationship between categories, see here), but they may be necessary if you want depict actual physical flows (e.g. recycling of material)
  • Direct loops back, where the output of a process leads directly back to the same node, are not very common (one example can be seen here, called “functional recycling”). There could be in reality a node along the way back (e.g. a pump that pumps cooling water cycling the process). If you have a node in the loopback, then the input and output side are flipped.
  • Loops can “go back via several nodes, they may even branch on the way back” like in the example below


If you take a left-to-right column oriented approach when setting up the diagram working with tabulated data as the source (sth like “source”: “process3”, “target”: “process8”, “value”: 20) then you have to consider the column depth to identify whether you have a back loop. All sorts of routing issues for the arrow come up and you need to create room to not produce overlaps. Drawing the Sankey diagram manually (like I did i the figure above) rather than programmatically gives more freedom in that respect.

Sankeys with circular links

Guus, a reader of this blog, DMed me to ask whether I “knew of any (open source) JavaScript libraries that can generate circular Sankey diagrams”?

Many of the Sankey diagrams I see on the web are created using d3.js by Mike Bostock. Typically these diagrams are left-to right oriented and have a column structure. What is less common are feedback loops or circular Sankey arrows, like the pink ones in the figure below.

The place to look for is Tom Shanley’s Block.

Here you can find many samples for:

Guus, I hope you can find what you are after there. Enjoy!