Jacques Bertin's framework for visual encoding includes width , or thickness , as a magnitude channel. A line of uniform width carries no quantitative information. A line whose width varies encodes magnitude at each point. Sankey diagrams are built entirely on this principle: the flow band's width at any cross-section is proportional to the quantity flowing there. If the band narrows, less is flowing; if it widens, more is flowing. The reader's eye tracks the width and reads it as quantity.

Three chart families use width as a magnitude channel. Sankey diagrams show flows from a source set through optional intermediate stages to a destination set. The canonical use is the energy flow diagram that gave the form its name , Captain Sankey used it in 1898 to visualize where steam energy was being lost in industrial processes. The original problem clarifies what the form is for: substances or quantities moving from sources through transformations to destinations, with the magnitude of each path visible.

A different set of questions produces a different set of forms. When the question is does A connect to B rather than how much flows from A to B, the magnitude channel is no longer needed. The line's presence encodes the connection; its width is irrelevant or decorative. Non-ribbon chord diagrams use the same circular layout as ribbon chord diagrams, but draw lines rather than ribbons. The line's width is uniform; only its presence encodes the connection.

Dense networks produce hairballs. When every node connects to many others, the edges fill the interior of the visualization and no structure is visible. The nodes float in a tangle of crossing lines. The chart proves that a network exists; it reveals nothing about its structure. The hairball is not a design failure , it is a structural failure. The chart is trying to show something it cannot show, because the data is too dense for any single-level visualization to reveal.

The channel-theory question comes first: is the magnitude of the flow part of the message, or only the existence of the connection? If magnitude matters goes to Sankey (directional, multi-level), alluvial (longitudinal categorical), or ribbon chord (circular, symmetric).

Return to sankey-diagram.html. The chart works because specific decisions were made before the code was written. Proportional flow widths. The bands are sized proportionally to the quantities they represent. This is not the default behavior of all Sankey layout libraries , some normalize flows in ways that distort the proportionality. The chart must be checked: the largest flow should be visually the widest, and the ratio of widths should match the ratio of values.

You can identify the primary question in any flow or network dataset , flow magnitude or connection existence , and choose the right form family based on that distinction alone. You can build Sankey diagrams with proportional flow widths, correct node ordering, and the color-follows-source or color-follows-destination decision made deliberately. You can verify the proportionality by checking the width ratio against the value ratio.

Exercise 13.1 , Form selection: magnitude vs. existence. (Tests: the primary distinction) For each dataset below, identify whether the primary question is flow magnitude or connection existence, and name the right form: Aid flows from 5 donor countries through 3 implementing organizations to 8 recipient countries, with USD amounts for each flow. Voter shifts between 4 political parties across 3 consecutive elections, tracked as proportions of each prior-election cohort. Co-authorship connections between 200 academic researchers, with no associated magnitude.

Flow and network charts are where the model is most likely to produce a hairball , a graph so dense that nothing is visible. Where the model genuinely helps: producing the same graph with three layouts (force-directed, hierarchical, circular) so the layout's effect on readability is visible.

The ideas in this chapter didn't appear from nowhere. Charles Joseph Minard drew the 1869 flow map of Napoleon's Russian campaign , combining six variables (army size, location, direction, temperature, distance, time) in a single image. Tufte called it possibly "the best statistical graphic ever drawn." Charles Joseph Minard, circa 1860. AI-generated portrait based on a public domain engraving (Wikimedia Commons).

The ideas in this chapter didn't appear from nowhere. Charles Joseph Minard drew the 1869 flow map of Napoleon's Russian campaign , combining six variables (army size, location, direction, temperature, distance, time) in a single image. Tufte called it possibly "the best statistical graphic ever drawn." Charles Joseph Minard, circa 1860. AI-generated portrait based on a public domain engraving (Wikimedia Commons).