Sankey diagrams
visualize the magnitude of flow between nodes in a network. This
intricate diagram shows a possible scenario for UK energy production and
consumption in 2050: energy supplies are on the left, and demands
are on the right. Intermediate nodes group related forms of production
and show how energy is converted and transmitted before it is consumed
(or lost!). The thickness of each link encodes the amount of flow from
source to target.
This example is built with D3’s Sankey plugin. The plugin takes as input the nodes and weighted links, computing positions via iterative relaxation.
After fixing the horizontal position of each node, the algorithm starts
from the sources on the left, positioning downstream nodes so as to
minimize link distance. A reverse pass is then made from right-to-left,
and then the entire process is repeated several times. Overlapping nodes
are shifted to avoid collision.
The fully automatic layout is convenient for rapid
visualization—positioning nodes manually is tedious! However, the
algorithm is not perfect; links are drawn with partial transparency to
highlight crossings. To improve readability and further disambiguate
links, this example also lets you reposition nodes interactively. The
algorithm could be improved in the future, say to minimize link crossing
or to support loopback in cyclical networks.
Many thanks to Tom Counsell, whose Sankey library provided inspiration for this example.