Sankey diagrams visualize the magnitude of flow between nodes in a network. This diagram shows Mills budget from 2011 with revenues on the left, and expenses on the right. Intermediate nodes group related categories and show how budget categories aggregate and split. The thickness of each link encodes the dollar amount of the 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.