Components / Data display / Treemap
D4 · Data display New
Treemap
Rectangle area is weight. Tint is the signed change. Rectangles are grouped.
<svg class="c-map" viewBox="0 0 320 180" role="img" aria-label="Example treemap">
<rect x="0" y="0" width="200" height="180" fill="var(--canvas)" stroke="var(--line)"></rect>
<text x="8" y="16" font-size="11" font-family="Inter, sans-serif">DOC-1048</text>
</svg>
The single-file button copies a document with the stylesheet and script inlined.
When to use
- One total breaks into groups and records.
- Area is a better read than a long bar list.
When not to use
- People need exact values first. Lead with a table.
- There is a single number.
Usage
<svg class="c-map" viewBox="0 0 320 180" role="img" aria-label="Example treemap">
<rect x="0" y="0" width="200" height="180" fill="var(--canvas)" stroke="var(--line)"></rect>
<text x="8" y="16" font-size="11" font-family="Inter, sans-serif">DOC-1048</text>
</svg>
Variants
The preview shows the form used in the gallery.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| weight | number | — | Area of the rectangle. |
| delta | signed number | — | Tint. The sign is also in the title tooltip. |
| group | name | — | Policy, Register, Schedule, or Wallet in this example. |
Keyboard
| Key | Action |
|---|---|
| Tab | Reaches the Values disclosure. |
| Enter | Opens Values. |
Accessibility
- The svg has an aria-label.
- Each rectangle has a title.
- A Values table lists the same weights.
Motion
- No motion.
Pattern origin
Pattern type: a grouped treemap.