Make treemaps from text
Overview
Treemaps show a hierarchy’s proportions as nested rectangles — each leaf’s area is its value, and parents auto-sum their children. They’re the fastest way to read “what’s big and what’s small” across a whole tree at once: budgets, cloud bills, disk usage, portfolios, headcount, taxonomies. The layout is squarified, so cells keep readable aspect ratios instead of thin slivers.
Syntax
treemap Title with units, e.g. "Cloud Spend ($)"
Parent
Leaf 320 // a bare trailing number is the leaf's size
Leaf 180
Another Parent
Leaf 110The first line declares the chart type and an optional title. Put units in the title (Cloud Spend ($)) — there is no separate format or currency directive.
Hierarchy & Value
- Indentation sets the hierarchy (the mind-map / org model). Nest as deep as you like.
- A bare trailing number on a leaf is its size (
Platform 320). No thousands commas;1_000is fine. - Parents auto-sum their descendants — a number on a branch line is ignored (with a warning); the sum always wins.
- A leaf with no value is treated as 0 (and warns); a negative value is an error.
To keep a label that genuinely ends in a digit, quote it: "Region 5" → label Region 5, no value.
Nesting works to any depth — a cloud bill broken down by service and sub-service:
Tags — color by category
Declare a tag group before the content and apply it inline; children inherit a tagged ancestor’s value, so you tag the group once and the whole subtree picks up its color.
Heat — color by value
A per-node heat: metric is a second numeric channel (distinct from size — negatives and floats are fine) that drives a value ramp, named with a heat <Label> [low] [high] directive. Here size = position, color = the day’s move, so a glance shows both how big a holding is and how it’s doing:
Ramp colors are optional and data-aware: signed data (crossing 0) gets a diverging red · neutral · green ramp with the midpoint pinned at 0; one-sign data gets a sequential neutral · accent ramp. Override with heat <Label> low high (named palette colors only — hex is rejected).
A diagram can carry both tags and heat. The default color mode resolves tag → heat → branch; in the desktop app the legend offers a switcher to recolor live between them.
Directives
| Directive | Effect |
|---|---|
heat <Label> [low] [high] | Name (and optionally color) the value ramp; pairs with the heat: key. |
depth N | Render N levels deep; deeper subtrees collapse to a drillable solid block. A render budget, not a data limit — the full tree is always drillable, and static export renders it whole. |
no-values | Hide value labels. |
no-percent | Hide percentage labels. |
no-headers | Hide parent header bars. |
no-legend | Hide the legend. |
Everything is on by default; subtract with no-*. Numbers auto-compact (1.2M, 940k).
depth keeps a deep tree readable — collapse the leaves into solid blocks you can drill into:
Color Modes
The default mode is resolved from the source — tags declared → tag; else any heat present → heat; else branch (each top-level branch a distinct hue, tinted with depth). The desktop app adds a runtime tag/heat/branch switcher in the legend — live preview only, it never edits the source.
Radial mode — sunburst / hierarchical pie
Add a bare radial line and the same hierarchy renders as a sunburst — a hierarchical, multi-ring pie. The center disc is the whole (the chart title + grand total), the first ring is your top-level groups, and each outer ring breaks a group into its parts. It’s the familiar “slices of a circle” read of the exact same data a treemap shows as rectangles:
Everything carries over: tags, the heat ramp, and no-values / no-percent / no-legend. no-headers has no effect (a sunburst has no header bars). An arc’s angle is its share of the whole (value ÷ grand total); the radius is just depth and carries no magnitude — so slices are laid out in source order (not value-sorted), and very thin arcs drop their inline label to avoid clutter.
When to reach for radial vs. rectangular: use the sunburst for shallow trees (≈3 levels or fewer) and when you want the “part of a whole” circle. For deep trees or precise magnitude comparison, prefer the rectangular treemap — because radius carries no magnitude, deep sunbursts thin out and the eye over-weights the outer rings. For flat, single-level data with no hierarchy, use the pie chart instead.
Interactivity
In the desktop app, containers carry a focus icon and are drillable — click anywhere in a region to zoom into it (its box stays as context), and click its header again to zoom back out. A drilled branch keeps the color it had when expanded. Static export renders the whole tree.
Complete Example — tags + heat together
Size = effort, color (by default) = squad; flip the legend to the heat ramp to see which work is ahead of or behind plan:
treemap Engineering Portfolio (effort, pts)
tag Squad as sq
Platform blue
Product green
Infra orange
heat Δ vs plan %
Platform sq: Platform
API Gateway 120 heat: 4.0
Auth 80 heat: -6.5
Service Mesh 60 heat: 1.2
Product sq: Product
Onboarding 140 heat: 8.1
Checkout 110 heat: -3.4
Search 70 heat: 0.5
Infra sq: Infra
CI Pipeline 90 heat: -1.8
Observability 75 heat: 5.6
Cost Controls 50 heat: 2.3