Treemap (squarified)

Native squarified treemaps for hierarchical area visualization. Declare nodes with `parent` references and `size`; the engine sizes parents automatically as the sum of their children and uses the Bruls/Huijing/van Wijk squarified algorithm so every rectangle stays close to a 1:1 aspect ratio.

Templates

Source language

plaintext

Workstation

Studio

Engine id

treemap

Open in Studio

In the same space

Most users come to Treemap (squarified) from d3.treemap or Excel treemap charts. Glyph runs this engine in the browser — no install, shareable via URL, exportable to PNG / SVG / PDF / source.

Syntax at a glance

node photos size 7700
node videos size 20000
node photos.2024 parent photos size 4500

Paste this in the Studio code pane to see Treemap (squarified) render live. The full grammar is at the upstream-docs link above.

Sample templates

All 51 →

data

Treemap — disk usage

Disk usage by folder.

business

Treemap — portfolio composition

Investment portfolio by sector and holding.

business

Treemap — global mobile OS market share

Approximate market share by mobile OS family.

business

Treemap — government budget breakdown

Federal budget categories.

data

Treemap — codebase size by language

Lines of code per language in a sample monorepo.

business

Budget Allocation (Treemap)

Annual budget split by department.

Engine reference: treemap · ← Browse all engines · Quick-start guide