Treemap

Description

A treemap fills a rectangular space with smaller rectangles, each representing a node in a hierarchical dataset. The area of each rectangle is proportional to a quantitative value (revenue, file size, population), and nesting conveys the parent-child relationships in the hierarchy. Color can encode an additional variable, such as growth rate or category membership.

Invented by Ben Shneiderman in 1991, the treemap was originally designed to visualize disk space usage on a hard drive. It solved the problem of displaying tree structures in a space-efficient way: unlike node-link tree diagrams, treemaps use 100% of the available display area to encode data, making them extremely space-efficient for showing both structure and magnitude simultaneously.

Treemaps work best when the quantitative variable (area) is the primary focus and the hierarchy provides context. They are particularly effective for showing how a total is subdivided across many categories at multiple levels, such as a company budget broken down by department and project, or global GDP broken down by region and country.

Treemap — interactive example

When to Use

Showing how a total quantity is distributed across a hierarchy (budgets, disk usage, market capitalization)
Comparing the relative sizes of many items within a tree structure
Providing an overview of a large hierarchical dataset in limited screen space
When space efficiency is critical and a tree diagram would waste too much area

When NOT to Use

When the hierarchy itself (parent-child links, depth) is more important than the quantities — use a network diagram or node-link tree
When precise comparison between rectangles is needed — area perception is less accurate than length; use a bar chart
For data without hierarchical structure — use a bar chart or stacked bar chart
When there are very few leaf nodes (fewer than 10) — the overhead of nested layout adds complexity without benefit

Anatomy

Rectangles (tiles): Each leaf node is a rectangle whose area is proportional to its value.
Nesting: Parent nodes are represented by the bounding rectangle containing their children, creating a visual hierarchy.
Color: Often encodes a second variable (category, change, performance) independent of area.
Labels: Text inside rectangles identifying the node. Only shown for tiles large enough to contain legible text.
Borders: Lines separating tiles; thicker borders for higher-level groupings help reveal the hierarchy.
Padding: Space between nested groups to make the hierarchical structure more visible.

Variations

Squarified treemap: Uses an algorithm that optimizes for rectangles with aspect ratios close to 1 (squares), improving readability. This is the most common variant.
Slice-and-dice treemap: Alternates horizontal and vertical slicing at each level, producing thin slivers but preserving stable ordering.
Voronoi treemap: Uses irregular polygonal cells instead of rectangles, creating organic shapes. Better aspect ratios but harder to compare areas.
Cascaded treemap: Offsets nested rectangles to create a 3D-like shadow effect showing depth.
Zoomable treemap: Allows clicking a group to zoom in and see its children at full resolution, then navigating back up.

Code Reference

// D3 - squarified treemap
const root = d3.treemap()
  .size([width, height])
  .padding(2)
  (d3.hierarchy(data).sum(d => d.value).sort((a, b) => b.value - a.value));

const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
svg.selectAll("rect")
  .data(root.leaves())
  .join("rect")
  .attr("x", d => d.x0).attr("y", d => d.y0)
  .attr("width", d => d.x1 - d.x0).attr("height", d => d.y1 - d.y0)
  .attr("fill", d => color(d.parent.data.name));