Graphs/Circle Pack

Edit src/renderers/d3/composition/circle-pack.ts and save to see changes across all configurations

Tests: 26Sections: 6

Filter:

Container SizesSame 8-item flat dataset, different container dimensions

Tiny300×200 · 8 rows

Small350×250 · 8 rows

Medium500×350 · 8 rows

Large700×500 · 8 rows

Wide800×300 · 8 rows

Item CountVarying number of items in a flat circle pack

5 items500×350 · 5 rows

10 items500×350 · 10 rows

20 items600×400 · 20 rows

40 items700×500 · 40 rows

HierarchyFlat vs hierarchical circle packs with parentField

Flat (no parent)500×350 · 8 rows

3 parents x 3 children500×350 · 9 rows

4 parents x 4 children600×400 · 16 rows

5 parents x 5 children700×500 · 25 rows

Config VariationsLabels, values, and padding

showLabels only500×350 · 10 rows

showValues500×350 · 10 rows

no labels500×350 · 10 rows

padding: 1500×350 · 10 rows

padding: 8500×350 · 10 rows

Diverging Color (Stock Market Style)Quantitative color encoding with diverging palettes

redGreen palette700×500 · 10 rows

All positive600×400 · 6 rows

blueRed palette600×400 · 7 rows

Edge CasesStress tests — unusual data shapes and values

One dominant (>80%)500×350 · 4 rows

All equal500×350 · 6 rows

Deep hierarchy600×450 · 25 rows

Single item500×350 · 1 rows

Wide value range600×400 · 6 rows