Edit Treemap

Name

Also known as (comma separated)

Brief definition Nested rectangles representing hierarchical data.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "emphasis", "type": "select", "label": "Emphasis", "default": "balanced", "options": [ "balanced", "dominant" ] }, { "id": "showLabels", "type": "toggle", "label": "Show value labels", "default": true }, { "id": "gap", "type": "number", "label": "Gap (px)", "default": 3, "min": 0, "max": 10, "step": 1 }, { "id": "accent", "type": "color", "label": "Largest cell colour", "default": "#E8A020", "presets": [ "#E8A020", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"treemap treemap--{{emphasis}}\" style=\"--accent:{{accent}};--gap:{{gap}}px;\">\n <div class=\"treemap__group treemap__group--balanced\">\n <div class=\"treemap__cell treemap__cell--a\">\n <span class=\"treemap__name\">A</span>\n {{#if showLabels}}<span class=\"treemap__pct\">28%</span>{{/if}}\n </div>\n <div class=\"treemap__right\">\n <div class=\"treemap__cell treemap__cell--b\" style=\"flex-basis:30.6%;\">\n <span class=\"treemap__name\">B</span>\n {{#if showLabels}}<span class=\"treemap__pct\">22%</span>{{/if}}\n </div>\n <div class=\"treemap__cell treemap__cell--c\" style=\"flex-basis:27.8%;\">\n <span class=\"treemap__name\">C</span>\n {{#if showLabels}}<span class=\"treemap__pct\">20%</span>{{/if}}\n </div>\n <div class=\"treemap__cell treemap__cell--d\" style=\"flex-basis:22.2%;\">\n <span class=\"treemap__name\">D</span>\n {{#if showLabels}}<span class=\"treemap__pct\">16%</span>{{/if}}\n </div>\n <div class=\"treemap__cell treemap__cell--e\" style=\"flex-basis:19.4%;\">\n <span class=\"treemap__name\">E</span>\n {{#if showLabels}}<span class=\"treemap__pct\">14%</span>{{/if}}\n </div>\n </div>\n </div>\n <div class=\"treemap__group treemap__group--dominant\">\n <div class=\"treemap__cell treemap__cell--a\">\n <span class=\"treemap__name\">A</span>\n {{#if showLabels}}<span class=\"treemap__pct\">55%</span>{{/if}}\n </div>\n <div class=\"treemap__right\">\n <div class=\"treemap__cell treemap__cell--b\" style=\"flex-basis:33.3%;\">\n <span class=\"treemap__name\">B</span>\n {{#if showLabels}}<span class=\"treemap__pct\">15%</span>{{/if}}\n </div>\n <div class=\"treemap__cell treemap__cell--c\" style=\"flex-basis:26.7%;\">\n <span class=\"treemap__name\">C</span>\n {{#if showLabels}}<span class=\"treemap__pct\">12%</span>{{/if}}\n </div>\n <div class=\"treemap__cell treemap__cell--d\" style=\"flex-basis:22.2%;\">\n <span class=\"treemap__name\">D</span>\n {{#if showLabels}}<span class=\"treemap__pct\">10%</span>{{/if}}\n </div>\n <div class=\"treemap__cell treemap__cell--e\" style=\"flex-basis:17.8%;\">\n <span class=\"treemap__name\">E</span>\n {{#if showLabels}}<span class=\"treemap__pct\">8%</span>{{/if}}\n </div>\n </div>\n </div>\n <div class=\"treemap__srtable-wrap treemap__srtable-wrap--balanced\">\n <table class=\"treemap__srtable\">\n <caption>Treemap data, balanced emphasis</caption>\n <thead><tr><th scope=\"col\">Category</th><th scope=\"col\">Share</th></tr></thead>\n <tbody>\n <tr><td>Category A</td><td>28%</td></tr>\n <tr><td>Category B</td><td>22%</td></tr>\n <tr><td>Category C</td><td>20%</td></tr>\n <tr><td>Category D</td><td>16%</td></tr>\n <tr><td>Category E</td><td>14%</td></tr>\n </tbody>\n </table></div>\n <div class=\"treemap__srtable-wrap treemap__srtable-wrap--dominant\">\n <table class=\"treemap__srtable\">\n <caption>Treemap data, dominant emphasis</caption>\n <thead><tr><th scope=\"col\">Category</th><th scope=\"col\">Share</th></tr></thead>\n <tbody>\n <tr><td>Category A</td><td>55%</td></tr>\n <tr><td>Category B</td><td>15%</td></tr>\n <tr><td>Category C</td><td>12%</td></tr>\n <tr><td>Category D</td><td>10%</td></tr>\n <tr><td>Category E</td><td>8%</td></tr>\n </tbody>\n </table></div>\n</div>\n<style>\n.treemap { max-width: 420px; font: 12px system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 12px; box-sizing: border-box; }\n.treemap__group { display: none; height: 200px; }\n.treemap--balanced .treemap__group--balanced { display: flex; gap: var(--gap); }\n.treemap--dominant .treemap__group--dominant { display: flex; gap: var(--gap); }\n.treemap__cell--a { flex: 0 0 28%; }\n.treemap--dominant .treemap__cell--a { flex-basis: 55%; }\n.treemap__right { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--gap); }\n.treemap__cell { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 6px 8px; box-sizing: border-box; border-radius: 4px; color: #241430; font-weight: 600; }\n.treemap__cell--a { background: var(--accent); color: #241430; }\n.treemap__cell--b { background: #A8E6C1; }\n.treemap__cell--c { background: #F5C2E0; }\n.treemap__cell--d { background: #BFD9F2; }\n.treemap__cell--e { background: #D9C8F0; }\n.treemap__name { font-size: 13px; }\n.treemap__pct { font-size: 11px; font-weight: 500; opacity: .8; }\n.treemap__srtable-wrap { display: none; }\n.treemap--balanced .treemap__srtable-wrap--balanced { display: block; }\n.treemap--dominant .treemap__srtable-wrap--dominant { display: block; }\n.treemap__srtable { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }\n</style>", "tailwind": "<div class=\"treemap-tw treemap-tw--{{emphasis}}\" style=\"--accent:{{accent}};--gap:{{gap}}px;\">\n <div class=\"treemap-tw__group treemap-tw__group--balanced\">\n <div class=\"treemap-tw__cell treemap-tw__cell--a\">\n <span class=\"treemap-tw__name\">A</span>\n {{#if showLabels}}<span class=\"treemap-tw__pct\">28%</span>{{/if}}\n </div>\n <div class=\"treemap-tw__right\">\n <div class=\"treemap-tw__cell treemap-tw__cell--b\" style=\"flex-basis:30.6%;\">\n <span class=\"treemap-tw__name\">B</span>\n {{#if showLabels}}<span class=\"treemap-tw__pct\">22%</span>{{/if}}\n </div>\n <div class=\"treemap-tw__cell treemap-tw__cell--c\" style=\"flex-basis:27.8%;\">\n <span class=\"treemap-tw__name\">C</span>\n {{#if showLabels}}<span class=\"treemap-tw__pct\">20%</span>{{/if}}\n </div>\n <div class=\"treemap-tw__cell treemap-tw__cell--d\" style=\"flex-basis:22.2%;\">\n <span class=\"treemap-tw__name\">D</span>\n {{#if showLabels}}<span class=\"treemap-tw__pct\">16%</span>{{/if}}\n </div>\n <div class=\"treemap-tw__cell treemap-tw__cell--e\" style=\"flex-basis:19.4%;\">\n <span class=\"treemap-tw__name\">E</span>\n {{#if showLabels}}<span class=\"treemap-tw__pct\">14%</span>{{/if}}\n </div>\n </div>\n </div>\n <div class=\"treemap-tw__group treemap-tw__group--dominant\">\n <div class=\"treemap-tw__cell treemap-tw__cell--a\">\n <span class=\"treemap-tw__name\">A</span>\n {{#if showLabels}}<span class=\"treemap-tw__pct\">55%</span>{{/if}}\n </div>\n <div class=\"treemap-tw__right\">\n <div class=\"treemap-tw__cell treemap-tw__cell--b\" style=\"flex-basis:33.3%;\">\n <span class=\"treemap-tw__name\">B</span>\n {{#if showLabels}}<span class=\"treemap-tw__pct\">15%</span>{{/if}}\n </div>\n <div class=\"treemap-tw__cell treemap-tw__cell--c\" style=\"flex-basis:26.7%;\">\n <span class=\"treemap-tw__name\">C</span>\n {{#if showLabels}}<span class=\"treemap-tw__pct\">12%</span>{{/if}}\n </div>\n <div class=\"treemap-tw__cell treemap-tw__cell--d\" style=\"flex-basis:22.2%;\">\n <span class=\"treemap-tw__name\">D</span>\n {{#if showLabels}}<span class=\"treemap-tw__pct\">10%</span>{{/if}}\n </div>\n <div class=\"treemap-tw__cell treemap-tw__cell--e\" style=\"flex-basis:17.8%;\">\n <span class=\"treemap-tw__name\">E</span>\n {{#if showLabels}}<span class=\"treemap-tw__pct\">8%</span>{{/if}}\n </div>\n </div>\n </div>\n <div class=\"treemap-tw__srtable-wrap treemap-tw__srtable-wrap--balanced\">\n <table class=\"treemap-tw__srtable\">\n <caption>Treemap data, balanced emphasis</caption>\n <thead><tr><th scope=\"col\">Category</th><th scope=\"col\">Share</th></tr></thead>\n <tbody>\n <tr><td>Category A</td><td>28%</td></tr>\n <tr><td>Category B</td><td>22%</td></tr>\n <tr><td>Category C</td><td>20%</td></tr>\n <tr><td>Category D</td><td>16%</td></tr>\n <tr><td>Category E</td><td>14%</td></tr>\n </tbody>\n </table></div>\n <div class=\"treemap-tw__srtable-wrap treemap-tw__srtable-wrap--dominant\">\n <table class=\"treemap-tw__srtable\">\n <caption>Treemap data, dominant emphasis</caption>\n <thead><tr><th scope=\"col\">Category</th><th scope=\"col\">Share</th></tr></thead>\n <tbody>\n <tr><td>Category A</td><td>55%</td></tr>\n <tr><td>Category B</td><td>15%</td></tr>\n <tr><td>Category C</td><td>12%</td></tr>\n <tr><td>Category D</td><td>10%</td></tr>\n <tr><td>Category E</td><td>8%</td></tr>\n </tbody>\n </table></div>\n</div>\n<style>\n.treemap-tw { max-width: 420px; font: 12px system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 12px; box-sizing: border-box; }\n.treemap-tw__group { display: none; height: 200px; }\n.treemap-tw--balanced .treemap-tw__group--balanced { display: flex; gap: var(--gap); }\n.treemap-tw--dominant .treemap-tw__group--dominant { display: flex; gap: var(--gap); }\n.treemap-tw__cell--a { flex: 0 0 28%; }\n.treemap-tw--dominant .treemap-tw__cell--a { flex-basis: 55%; }\n.treemap-tw__right { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--gap); }\n.treemap-tw__cell { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 6px 8px; box-sizing: border-box; border-radius: 4px; color: #241430; font-weight: 600; }\n.treemap-tw__cell--a { background: var(--accent); color: #241430; }\n.treemap-tw__cell--b { background: #A8E6C1; }\n.treemap-tw__cell--c { background: #F5C2E0; }\n.treemap-tw__cell--d { background: #BFD9F2; }\n.treemap-tw__cell--e { background: #D9C8F0; }\n.treemap-tw__name { font-size: 13px; }\n.treemap-tw__pct { font-size: 11px; font-weight: 500; opacity: .8; }\n.treemap-tw__srtable-wrap { display: none; }\n.treemap-tw--balanced .treemap-tw__srtable-wrap--balanced { display: block; }\n.treemap-tw--dominant .treemap-tw__srtable-wrap--dominant { display: block; }\n.treemap-tw__srtable { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }\n</style>", "react": "export function Treemap({\n emphasis = \"{{emphasis}}\",\n showLabels = {{showLabels}},\n gap = {{gap}},\n accent = \"{{accent}}\",\n}) {\n const layouts = {\n balanced: { a: 28, cells: [[\"B\", 22, \"30.6%\"], [\"C\", 20, \"27.8%\"], [\"D\", 16, \"22.2%\"], [\"E\", 14, \"19.4%\"]] },\n dominant: { a: 55, cells: [[\"B\", 15, \"33.3%\"], [\"C\", 12, \"26.7%\"], [\"D\", 10, \"22.2%\"], [\"E\", 8, \"17.8%\"]] },\n };\n const colors = { B: \"#A8E6C1\", C: \"#F5C2E0\", D: \"#BFD9F2\", E: \"#D9C8F0\" };\n const active = layouts[emphasis] ?? layouts.balanced;\n return (\n <div style={{ maxWidth: 420, padding: 12, font: \"12px system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", boxSizing: \"border-box\" }}>\n <div style={{ display: \"flex\", height: 200, gap }}>\n <div style={{ flex: `0 0 ${active.a}%`, background: accent, borderRadius: 4, padding: \"6px 8px\", boxSizing: \"border-box\",\n display: \"flex\", flexDirection: \"column\", justifyContent: \"flex-end\", fontWeight: 600 }}>\n <span style={{ fontSize: 13 }}>A</span>\n {showLabels && <span style={{ fontSize: 11, fontWeight: 500, opacity: .8 }}>{active.a}%</span>}\n </div>\n <div style={{ flex: \"1 1 auto\", display: \"flex\", flexDirection: \"column\", gap }}>\n {active.cells.map(([letter, pct, basis]) => (\n <div key={letter} style={{ flexBasis: basis, background: colors[letter], borderRadius: 4, padding: \"6px 8px\", boxSizing: \"border-box\",\n display: \"flex\", flexDirection: \"column\", justifyContent: \"flex-end\", fontWeight: 600 }}>\n <span style={{ fontSize: 13 }}>{letter}</span>\n {showLabels && <span style={{ fontSize: 11, fontWeight: 500, opacity: .8 }}>{pct}%</span>}\n </div>\n ))}\n </div>\n </div>\n </div>\n );\n}" }