Graphs/Chord Diagram

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

Tests: 25Sections: 5

Filter:

Container SizesSame 5-country trade dataset, different container dimensions

Small400×300 · 13 rows

Medium550×400 · 13 rows

Large700×500 · 13 rows

Wide750×350 · 13 rows

Tall400×550 · 13 rows

Group CountsVarying number of entities in the chord diagram

3 groups500×400 · 4 rows

5 groups550×450 · 12 rows

8 groups600×500 · 32 rows

12 groups700×550 · 58 rows

Config VariationsDifferent display options for the same dataset

padAngle: 0.01550×450 · 13 rows

padAngle: 0.05550×450 · 13 rows

ribbonOpacity: 0.4550×450 · 13 rows

ribbonOpacity: 0.8550×450 · 13 rows

showLabels: false550×450 · 13 rows

showValues: true550×450 · 13 rows

Color SystemNamed palettes, highlight mode for chord groups

Default (Categorical)550×450 · 13 rows

Warm Palette550×450 · 13 rows

Highlight: USA550×450 · 13 rows

Multi-Highlight + Muted550×450 · 13 rows

Purple Palette550×450 · 13 rows

Edge CasesUnusual data shapes and extremes

Self-referencing (A->A)500×400 · 5 rows

Single connection450×350 · 1 rows

Very unequal groups550×450 · 8 rows

Fully connected (5)550×450 · 20 rows

One-directional only500×400 · 4 rows