Graphs/Alluvial Diagram

Edit src/renderers/d3/flow/alluvial.ts and save to see changes across all configurations

Tests: 30Sections: 6

Filter:

Container SizesSame 3-stage career dataset, different container dimensions

Small400×300 · 43 rows

Medium550×400 · 43 rows

Large700×500 · 43 rows

Wide800×300 · 43 rows

Tall400×550 · 43 rows

Stage CountsDifferent numbers of categorical stages

2 stages550×400 · 9 rows

3 stages600×400 · 43 rows

4 stages700×450 · 141 rows

5 stages800×500 · 227 rows

Config VariationsDifferent display options for the same dataset

nodeWidth: 10600×400 · 43 rows

nodeWidth: 30600×400 · 43 rows

flowOpacity: 0.2600×400 · 43 rows

flowOpacity: 0.6600×400 · 43 rows

showLabels: false600×400 · 43 rows

showValues: true600×400 · 43 rows

colorBy: target600×400 · 43 rows

Color SystemNamed palettes, color schemes, and highlight mode

Default (Categorical)600×400 · 43 rows

Warm Palette600×400 · 43 rows

Highlight: Engineering600×400 · 43 rows

Multi-Highlight + Muted600×400 · 43 rows

Green Palette600×400 · 43 rows

Funnels & AttritionFlows where items drop out at each stage — the alluvial sweet spot

Hiring funnel700×450 · 11 rows

Customer churn700×400 · 12 rows

Course completion650×400 · 7 rows

Funnel highlight700×450 · 8 rows

Edge CasesUnusual data shapes and extremes

Single flow500×300 · 1 rows

Category disappears600×400 · 7 rows

All same category550×350 · 3 rows

Many categories (10+)700×500 · 30 rows

Extreme imbalance600×400 · 5 rows