Reimagining Data Flow Visualization: A Card‑Based Alternative to Sankey Diagrams

In many visualization scenarios, describing the transition of a group of entities from one state to another (data flow) is common. The industry typically uses Sankey diagrams for this purpose.

Sankey diagrams depict flows between groups, with branch widths representing flow magnitude. Their characteristics include: 1) line direction reflects data flow, enabling analysis; 2) line width changes correspond to data changes; 3) node comparisons reveal related flows.

However, Sankey diagrams have drawbacks: they present all links in a single view, which becomes unintuitive for complex links, hampers detailed exploration, and is unfriendly to color‑insensitive users. Large disparities in flow magnitudes degrade readability, causing small but important flows to be overlooked.

Additionally, Sankey diagrams assume total inflow equals total outflow; when this balance is broken (e.g., due to encryption or technical constraints), they cannot be used. Their visual style is also monotonous, limiting user‑centric design.

Design goals for a new visualization: 1) provide an easy way to explore data flows, handling large magnitude differences and supporting color‑insensitive users; 2) allow custom start and end flow volumes; 3) deliver a more user‑friendly visual experience.

The proposed solution consists of three parts: start card group, flow lines, and end card group. Cards represent entities and can be in Default, Hover, Selected, or Disabled states. Flow lines indicate direction with a dot start and triangular arrow end, supporting Default, Disabled, Highlight states. Flow annotations display numeric values and can be hidden.

Two layout modes are supported: vertical (top‑bottom) and horizontal (left‑right), following natural eye movement. Card spacing follows proximity principles: card‑to‑line spacing a, card‑to‑card spacing 4a, content‑to‑card spacing 2a, etc.

Colors use a clean blue palette: light blue background, white cards with blue highlights, gray default lines turning blue on selection. Text defaults to black, turning blue when highlighted; cards use white background, blue for active state, with subtle blue shadows.

Cards improve content grouping, guide visual hierarchy, and increase clickability. Flow lines use distinct start/end symbols, making direction explicit, unlike Sankey diagrams. Data values can be shown directly, hidden, or displayed within cards, with highlighting for emphasis.

Compared with Sankey diagrams, this design shows only selected links, allowing precise inspection, distinguishes empty versus non‑transferable states, supports custom start/end groups without strict conservation, and lets users embed images or text within cards.