Composition
Treemap
Nested rectangles sized by value, showing hierarchical part-to-whole for many categories.
Monthly Budget
12 categories of household spending
View data (12 rows)
| Amount | Category |
|---|---|
| 2400 | Rent |
| 650 | Groceries |
| 380 | Dining |
| 420 | Transport |
| 250 | Utilities |
| 145 | Internet & Phone |
| 220 | Healthcare |
| 280 | Entertainment |
| 95 | Subscriptions |
| 120 | Gifts |
| 600 | Savings |
| 165 | Misc |
Use a treemap when…
- Many categories (10+)
- Hierarchical data
- File sizes, budgets, market cap
Avoid when…
- Precise comparison (rectangles are hard to compare)
- Few categories (use donut)
Data it needs
| Property | Value |
|---|---|
| Min Rows | 3 |
| Min Columns | 2 |
| Column Types | stringnumber |
Visual anatomy
Marks
rectangle
Channels
areacolor-hue
Axes
-
Guiding principles
Consider instead
Common mistakes
Too many tiny rectangles
No labels on small segments
History
Invented by Ben Shneiderman at UMD in 1990 for visualizing disk space usage; the squarified layout used in modern dashboards is from Bruls, Huizing & van Wijk (2000).
Accessibility notes
Provide data table alternative. Label rectangles directly and ensure label text meets WCAG AA contrast against each tile color (mid-saturation fills are easy to underestimate).
Related reading
Got data? Let's see what works.
Drop your CSV. You'll get a Treemap plus four alternatives - ranked by which one actually fits your data best.