Treemap

A squarified treemap of a hierarchy: click a tile to drill in and the children grow to fill the view, with a breadcrumb back and an optional shading measure.

When to use

• Part-to-whole across a hierarchy with many leaves, when sizes matter more than exact comparisons: revenue by region and country, storage by workspace and folder, spend by team and service.
• Adding a second magnitude (growth, margin) as shading with colorLabel; each top-level branch keeps its own hue.
• Not for a flat list of a few parts; use DonutChart or WaffleChart. Not for precise comparisons; use BarChart.

Usage

import { Treemap } from "@/components/iris/treemap/treemap";

const data = {
  id: "gr",
  label: "Greece",
  children: [
    {
      id: "attica",
      label: "Attica",
      children: [
        { id: "kypseli", label: "Kypseli", value: 241, color: 390 },
        { id: "pangrati", label: "Pangrati", value: 212, color: 420 },
      ],
    },
    { id: "crete", label: "Crete", children: [{ id: "heraklion", label: "Heraklion", value: 164, color: 360 }] },
  ],
};

h(Treemap, {
  data,
  label: "MyRoomie listings by area",
  colorLabel: "Median rent",
  formatColor: (v) => "€" + v + "/month",
});

Props

Prop	Type	Default	Description
data	TreemapNode ({ id; label; value?; color?; children? })	required	The root; its label is the first breadcrumb. A branch's size is the sum of its children.
label	string	required	Names the whole for assistive technology.
formatValue	(value: number) => string	—	Sizes on tiles, the total and the tooltip.
colorLabel	string	—	Names the shading measure. Leave it out to draw every tile at one depth.
formatColor	(value: number) => string	—	Formats the shading measure.
colorDomain	[number, number]	range of the leaves	Range of the shading measure.
focus / defaultFocus / onFocusChange	string / callback	root	Id of the node that fills the view.
height	number	420	Tile area height in px.
emptyLabel	string	"No data yet"	Shown when every value is zero.
className	string	—	Class on the root figure.
ref	Ref<HTMLElement>	—	Forwarded to the root figure.

Notes

• Keyboard: arrow keys move to the nearest tile in that direction, Home/End go to the first or last tile, Enter/Space zooms in, Escape/Backspace zooms out one level.
• Accessibility: tiles form a focusable group; the breadcrumb is a nav marking the current level; a polite live region announces path, value, share of parent and shading; a hidden table lists every node.
• Small tiles hide their labels; they are still reachable by hover, keyboard and the hidden table.
• Use stable ids so a new size measure morphs tiles instead of rebuilding them. Colours come from --series-1…4. Comfortable up to a few hundred nodes.