Generate treemaps for visualizing hierarchical data with relative sizes. Part of the DevTools Surf developer suite. Browse more tools in the Data / SQL collection.
Use Cases
Visualize disk space usage by directory and file type to identify space consumers.
Show budget allocation by department and cost center with nested hierarchy.
Represent market share across companies within an industry sector.
Display portfolio allocation by asset class and individual holding size.
Tips
Use area encoding for the primary quantitative dimension — treemaps are optimized for showing relative proportions through area, not for comparing exact values.
Avoid more than 50–60 leaf nodes in a flat treemap — beyond this density, labels become illegible and individual cells too small to interact with.
Use the squarified layout algorithm (default in most tools) over simple row-based layouts — it minimizes aspect ratio distortion, making relative sizes easier to compare visually.
Fun Facts
The treemap visualization was invented by Ben Shneiderman at the University of Maryland Human-Computer Interaction Lab in 1991, specifically to visualize disk space usage on large file systems.
Shneiderman's original motivation was to understand why his university's server was running out of disk space. The treemap algorithm was developed over a weekend and immediately proved useful — a rare case of a visualization tool with a precisely known origin story.
The squarified treemap algorithm, which minimizes cell aspect ratios for better readability, was developed by Mark Bruls, Kees Huizing, and Jarke van Wijk at Eindhoven University and published in 2000.
FAQ
What's the difference between a treemap and a sunburst chart?
They visualize the same hierarchical data in different layouts. Treemaps use nested rectangles in a rectangular canvas — maximizing space efficiency. Sunbursts use a radial layout — more visually appealing but less space-efficient. Treemaps are better for large datasets.
Can I add a second data dimension to a treemap?
Yes — size encodes one dimension, color encodes a second. A common pattern: size = revenue, color = profit margin. Color diverging scales (green = high margin, red = low/negative) make the second dimension immediately legible.
