Arcs vs Beziers. Sankey vs Tubemap.

My favourite Sankey of all times is from the 1970’s, the wonderfully hand-drawn British Textile Industry 1968-70: 

Detailed hand-drawn Sankey diagram of the supply chain for the UK Textile Industry 50 years ago. (Thanks DuaneKing for posting a high quality scan). Click for bigger version.

You can now make a Sankey fairly easily with D3. You can find them published all over. Here’s a nice one of the copper industry:

Sankey of the copper industry from 2021 report by Wang, Berrill, Zimmerman and Hertwich. Boxes are connected with Bezier curves indicating the flow from one manutacturer to another.

But! There’s so much more in the hand-drawn example: such as labels that fit boxes, labels indicating the volumes on edges, more variation on colours on the flow lines, and so on. One of the most striking differences is the use of straight lines and tight circular arcs for the flow lines, rather than the Bézier curves that you see in almost all computationally created Sankeys. I think there’s a visual benefit to straight lines + arcs vs. Béziers. 

First, consider the Béziers curves: by width at either end they do indicate the aggregate flow departing and arriving at each node in the flow. But in between, it’s just a smooth interpolation with lots of criss-crossing curves. The line thickness of the Sankey curves visually appear to be thinner in areas of steep slope. Many of the curves heading along the similar angles are difficult to disambiguate — how much flow is there from NonElectricalIndustrial to Automotive? It’s difficult to estimate: flow lines overlap. They travel long distances nearly parallel, making it difficult to visually trace the path from one node to the next with any confidence. 

Instead, the 1970s Sankey, as well as transit diagrams ever since Beck’s map of the London Underground, use  color-coded straight lines with circular arcs. These lines can be stacked, which is nearly impossible with the curved portion of Béziers. Here’s a closeup of a portion of the current Tubemap:

Stacked subway lines (e.g. pink, yellow and burgundy). Clearly distinguished around bends, splits and backflows.

Also, tight radii facilitate visually tracking lines as they change in direction.

In the Sankey version, in the first image, an array of n lines in one direction can branch to an array of m lines in an orthogonal direction, with a matrix of n X m intersections providing for n x m uniquely distinct and clear transitions. Here’s a sketch:

Lines with tight arcs have defined locations for all the branching permutations.

Furthermore, to see where all the branches head out from one node, simply visually scan in a straight line to see all the branches. Since all those branches are aligned to their targets, you can have reasonably high confidence guessing where those lines go, without even needing to visually trace them to their targets. Similarly, to see where all the inputs come from, simply follow the entering straight line and look for all the merges along that input. 

The straight lines and arcs on Tubemaps result from the tools of the time – arcs are easy to draw with a compass.  Beziers (and other splines) are not easy to draw. But even if Beziers were easy to draw, one can imagine that Beck and others still would have used arcs, in order to stack lines perfectly around turns, etc. 

Now, with computation, Beziers are easy, while arcs require more effort, particularly if there are angles, incomplete curves, S curves, backflows and so forth: and all while maintaining stacking. It’s a lot more code and many edge cases to do arcs. But it seems worth considering, if the goal is to create more effective representations.