Sankey and Alluvial Chart

Specific types of flow diagrams in which the width of the links is shown proportionally to the flow quantity. They put a visual emphasis on the major transfers or flows within a system. They are helpful in locating dominant contributions to an overall flow.

Status

The status of the component

Ready for use!

Figma component

A link to the Figma library where the component lives.

Open in Figma

Repository

A link to the repo where the component lives.

Best Practices

The thickness of a link should correlate to the number it represents in relation to the data set.

Correctly position nodes as to minimize the number of crossings between links.

Do not over-clutter the diagram. This makes it hard to read. It may be applicable to dismiss weak connections in a case of a cluttered diagram.

Usage Guidelines

Hover

On hover of a link, the corresponding link with connecting nodes remain in their default color state. All other links go to 10% opacity and all other nodes go to 25% opacity. A tooltip follows the hovering mouse.

On hover of a node, the node with connecting links and ending nodes remain in their default color state. All other links go to 10% opacity and all other nodes go to 25% opacity. There is no tooltip when hovering a node.

Focus

On focus of a link, a focus ring encompasses the link with a corresponding tooltip.

On focus of a node, a focus ring encompasses the node. There is no tooltip when focusing a node.

Default vs. Subtle

By default, the data visualizations palette will be used for nodes and links. The user may choose to turn on “subtle” mode, which will turn all the links to cornflower/300. This may be helpful in cases where there are many connections and the abundance of colour is overwhelming/unnecessary.

Responsiveness

Links and nodes should resize proportionally as the chart grows or shrinks.

Something looks broken on this site?

Report it to the Design System team here!