Graphs/Treemap

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

Tests: 33Sections: 7

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 treemap

5 items500×350 · 5 rows

10 items500×350 · 10 rows

20 items600×400 · 20 rows

50 items700×500 · 50 rows

HierarchyFlat vs hierarchical treemaps 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, padding, and border width

showLabels500×350 · 10 rows

showValues500×350 · 10 rows

padding: 1500×350 · 10 rows

padding: 4500×350 · 10 rows

borderWidth: 0500×350 · 10 rows

borderWidth: 3500×350 · 10 rows

Color SystemNamed palettes, highlights, and color schemes

Default (Categorical)500×350 · 8 rows

Green Palette500×350 · 8 rows

Highlight: Alpha500×350 · 8 rows

Multi-Highlight500×350 · 8 rows

Hierarchical + Palette600×400 · 12 rows

Diverging Color (Stock Market Style)Quantitative color encoding with diverging palettes — red for negative, green for positive

redGreen palette700×500 · 10 rows

All positive600×400 · 6 rows

All negative600×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 · 36 rows

Single item500×350 · 1 rows

Wide value range600×400 · 6 rows