Treemap Tool

Note: What Is a Treemap?

The Basics

A treemap displays hierarchical data as a set of nested rectangles. The entire chart area is divided into rectangles whose size is proportional to the value of each category, and each rectangle can be subdivided again to show subcategories inside it. This nesting gives the treemap its name: it resembles a tree of data viewed from above, where branches become rectangles and leaves become the smallest boxes. Because it packs the whole chart area edge to edge, a treemap can show thousands of items in one compact view without scrolling.

Common Use Cases

• Disk usage: seeing which folders and files consume the most storage space on a drive.
• Portfolio allocation: showing holdings grouped by asset class, sector, and individual security.
• Organizational structure: visualizing departments, teams, and headcount as nested blocks.
• Budget and cost analysis: breaking company spend into units, categories, and line items.
• Sales and revenue: comparing product lines and regional performance in a single glancable grid.
• Website analytics: classifying pages or traffic sources by volume within sections of a site.

When to Use It vs Alternatives

Use a treemap when you have hierarchical data, when the size of each item matters, and when you have so many items that a bar chart would become unreadable. It excels at answering "what takes up the most space or value here?" across many categories at once.

Choose a different chart when hierarchy is not the point: for a flat list of categories, a simple bar chart is easier to read precisely. When only a few top-level categories matter, a pie or stacked bar may feel clearer. If your goal is to compare exact values between two or three items, bars beat rectangles, because humans judge length more accurately than area. And for deep hierarchies with clear parent-child paths, an interactive tree or drill-down list can be more navigable than a dense treemap.

How to Read and Build It Well

• Read the box area, not side lengths alone, because size encodes value; larger boxes mean larger values.
• Groups are shown by relative position and color: sub-rectangles nested inside a parent all belong to that parent.
• Start with a clear hierarchy of no more than a few levels to avoid an overwhelming mosaic of tiny boxes.
• Color-code the top-level categories and keep shades consistent inside each branch.
• Animate or highlight boxes on hover to reveal tooltips with exact names and values.
• Exclude or group microscopic items into an "Other" box, since tiny rectangles add noise without insight.

Fun Facts

• The treemap was invented in 1991 by Ben Shneiderman, a computer science professor at the University of Maryland, to solve the problem of visualizing disk space.
• Shneiderman designed the layout so that the whole available space is used, unlike tree diagrams that leave large gaps between branches.
• The original motivation was seeing which files filled up a hard drive, an everyday problem that still motivates treemap tools today.
• The best-known treemap layouts are slice-and-dice and squarified, the latter producing the near-square boxes most people recognize.
• A variant called the Voronoi treemap replaces rectangles with polygons, letting each cell represent accurate proportions of more complicated shapes.
• Because treemaps rely on area perception, they hide small differences: two boxes that both look "small" can still differ by a factor of ten.
• Financial sites popularized animated treemaps for stock markets, where each company is a box that changes size and color with its value.