TreeMap
Nested rectangles sized by value — each leaf's area is proportional to its `value`. Squarified by default for legibility.
Installation
pnpm dlx @hex-core/cli add tree-mapUsage
import { TreeMap } from "@/components/ui/tree-map"File-size treemap
Visualize the relative size of files in a folder.
<TreeMap root={{
id: "root", label: "src",
children: [
{ id: "a", label: "app", value: 240 },
{ id: "l", label: "lib", value: 90 },
{ id: "t", label: "tests", value: 120 },
],
}} />Heatmap-style coloring by value
Use the value-interpolated palette to highlight outliers.
<TreeMap colorBy="value" root={budgetTree} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
rootrequired | object | — | Hierarchy root: { id, label, value?, children? }. Leaves require a positive `value`; internal nodes are summed. |
width | number | 600 | SVG pixel width. |
height | number | 400 | SVG pixel height. |
padding | number | 2 | Inner padding between sibling rectangles, in pixels. |
tile | "squarify" | "binary" | "slice-dice" | squarify | Tiling algorithm — "squarify" keeps rectangles close to square; "binary" is faster; "slice-dice" alternates direction by depth. |
colorBy | "depth" | "value" | depth | Fill strategy — "depth" cycles palette tokens, "value" interpolates the primary token by value, or pass a (node, depth) => string. |
onLeafClick | function | — | Called with the clicked TreeMapNode when a user clicks any leaf. |
className | string | — | Additional CSS classes on the SVG element. |
AI Guidance
When to use
Compare relative sizes inside a hierarchy — file sizes, budgets, market caps, allocations. Use when the user cares about "which slice of the whole is biggest" and the hierarchy is at most 2–3 levels deep.
When not to use
Don't use to show edges/relationships (use MindMap or Canvas). Don't use for time series (use a chart). Don't use when leaves all have similar values — area differences become invisible.
Common mistakes
- Leaf values that don't sum to the parent — d3-hierarchy aggregates leaves; internal-node `value` props are ignored when children exist
- Negative or zero leaf values — produce zero-area rectangles or NaN positions. Filter or clamp upstream
- Passing the same root reference but mutating its children in place — React skips the re-layout. Provide a new root object on data change
Accessibility
The SVG carries role="img" with a <title> and <desc> summarizing the leaf count and root label. For large or interactive treemaps, also expose a parallel <table> of label/value pairs for screen readers.
Related components
Token budget: 320
Verified against @hex-core/components@1.12.0