Treemap

Nested rectangles representing hierarchical data.

html

<div class="treemap treemap--balanced" style="--accent:#E8A020;--gap:3px;">
  <div class="treemap__group treemap__group--balanced">
        <div class="treemap__cell treemap__cell--a">
          <span class="treemap__name">A</span>
          <span class="treemap__pct">28%</span>
        </div>
        <div class="treemap__right">
        <div class="treemap__cell treemap__cell--b" style="flex-basis:30.6%;">
          <span class="treemap__name">B</span>
          <span class="treemap__pct">22%</span>
        </div>
        <div class="treemap__cell treemap__cell--c" style="flex-basis:27.8%;">
          <span class="treemap__name">C</span>
          <span class="treemap__pct">20%</span>
        </div>
        <div class="treemap__cell treemap__cell--d" style="flex-basis:22.2%;">
          <span class="treemap__name">D</span>
          <span class="treemap__pct">16%</span>
        </div>
        <div class="treemap__cell treemap__cell--e" style="flex-basis:19.4%;">
          <span class="treemap__name">E</span>
          <span class="treemap__pct">14%</span>
        </div>
        </div>
      </div>
  <div class="treemap__group treemap__group--dominant">
        <div class="treemap__cell treemap__cell--a">
          <span class="treemap__name">A</span>
          <span class="treemap__pct">55%</span>
        </div>
        <div class="treemap__right">
        <div class="treemap__cell treemap__cell--b" style="flex-basis:33.3%;">
          <span class="treemap__name">B</span>
          <span class="treemap__pct">15%</span>
        </div>
        <div class="treemap__cell treemap__cell--c" style="flex-basis:26.7%;">
          <span class="treemap__name">C</span>
          <span class="treemap__pct">12%</span>
        </div>
        <div class="treemap__cell treemap__cell--d" style="flex-basis:22.2%;">
          <span class="treemap__name">D</span>
          <span class="treemap__pct">10%</span>
        </div>
        <div class="treemap__cell treemap__cell--e" style="flex-basis:17.8%;">
          <span class="treemap__name">E</span>
          <span class="treemap__pct">8%</span>
        </div>
        </div>
      </div>
  <div class="treemap__srtable-wrap treemap__srtable-wrap--balanced">
      <table class="treemap__srtable">
        <caption>Treemap data, balanced emphasis</caption>
        <thead><tr><th scope="col">Category</th><th scope="col">Share</th></tr></thead>
        <tbody>
          <tr><td>Category A</td><td>28%</td></tr>
          <tr><td>Category B</td><td>22%</td></tr>
          <tr><td>Category C</td><td>20%</td></tr>
          <tr><td>Category D</td><td>16%</td></tr>
          <tr><td>Category E</td><td>14%</td></tr>
        </tbody>
      </table></div>
  <div class="treemap__srtable-wrap treemap__srtable-wrap--dominant">
      <table class="treemap__srtable">
        <caption>Treemap data, dominant emphasis</caption>
        <thead><tr><th scope="col">Category</th><th scope="col">Share</th></tr></thead>
        <tbody>
          <tr><td>Category A</td><td>55%</td></tr>
          <tr><td>Category B</td><td>15%</td></tr>
          <tr><td>Category C</td><td>12%</td></tr>
          <tr><td>Category D</td><td>10%</td></tr>
          <tr><td>Category E</td><td>8%</td></tr>
        </tbody>
      </table></div>
</div>
<style>
.treemap { max-width: 420px; font: 12px system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 12px; box-sizing: border-box; }
.treemap__group { display: none; height: 200px; }
.treemap--balanced .treemap__group--balanced { display: flex; gap: var(--gap); }
.treemap--dominant .treemap__group--dominant { display: flex; gap: var(--gap); }
.treemap__cell--a { flex: 0 0 28%; }
.treemap--dominant .treemap__cell--a { flex-basis: 55%; }
.treemap__right { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--gap); }
.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; }
.treemap__cell--a { background: var(--accent); color: #241430; }
.treemap__cell--b { background: #A8E6C1; }
.treemap__cell--c { background: #F5C2E0; }
.treemap__cell--d { background: #BFD9F2; }
.treemap__cell--e { background: #D9C8F0; }
.treemap__name { font-size: 13px; }
.treemap__pct { font-size: 11px; font-weight: 500; opacity: .8; }
.treemap__srtable-wrap { display: none; }
.treemap--balanced .treemap__srtable-wrap--balanced { display: block; }
.treemap--dominant .treemap__srtable-wrap--dominant { display: block; }
.treemap__srtable { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
</style>

tailwind

<div class="treemap-tw treemap-tw--balanced" style="--accent:#E8A020;--gap:3px;">
  <div class="treemap-tw__group treemap-tw__group--balanced">
        <div class="treemap-tw__cell treemap-tw__cell--a">
          <span class="treemap-tw__name">A</span>
          <span class="treemap-tw__pct">28%</span>
        </div>
        <div class="treemap-tw__right">
        <div class="treemap-tw__cell treemap-tw__cell--b" style="flex-basis:30.6%;">
          <span class="treemap-tw__name">B</span>
          <span class="treemap-tw__pct">22%</span>
        </div>
        <div class="treemap-tw__cell treemap-tw__cell--c" style="flex-basis:27.8%;">
          <span class="treemap-tw__name">C</span>
          <span class="treemap-tw__pct">20%</span>
        </div>
        <div class="treemap-tw__cell treemap-tw__cell--d" style="flex-basis:22.2%;">
          <span class="treemap-tw__name">D</span>
          <span class="treemap-tw__pct">16%</span>
        </div>
        <div class="treemap-tw__cell treemap-tw__cell--e" style="flex-basis:19.4%;">
          <span class="treemap-tw__name">E</span>
          <span class="treemap-tw__pct">14%</span>
        </div>
        </div>
      </div>
  <div class="treemap-tw__group treemap-tw__group--dominant">
        <div class="treemap-tw__cell treemap-tw__cell--a">
          <span class="treemap-tw__name">A</span>
          <span class="treemap-tw__pct">55%</span>
        </div>
        <div class="treemap-tw__right">
        <div class="treemap-tw__cell treemap-tw__cell--b" style="flex-basis:33.3%;">
          <span class="treemap-tw__name">B</span>
          <span class="treemap-tw__pct">15%</span>
        </div>
        <div class="treemap-tw__cell treemap-tw__cell--c" style="flex-basis:26.7%;">
          <span class="treemap-tw__name">C</span>
          <span class="treemap-tw__pct">12%</span>
        </div>
        <div class="treemap-tw__cell treemap-tw__cell--d" style="flex-basis:22.2%;">
          <span class="treemap-tw__name">D</span>
          <span class="treemap-tw__pct">10%</span>
        </div>
        <div class="treemap-tw__cell treemap-tw__cell--e" style="flex-basis:17.8%;">
          <span class="treemap-tw__name">E</span>
          <span class="treemap-tw__pct">8%</span>
        </div>
        </div>
      </div>
  <div class="treemap-tw__srtable-wrap treemap-tw__srtable-wrap--balanced">
      <table class="treemap-tw__srtable">
        <caption>Treemap data, balanced emphasis</caption>
        <thead><tr><th scope="col">Category</th><th scope="col">Share</th></tr></thead>
        <tbody>
          <tr><td>Category A</td><td>28%</td></tr>
          <tr><td>Category B</td><td>22%</td></tr>
          <tr><td>Category C</td><td>20%</td></tr>
          <tr><td>Category D</td><td>16%</td></tr>
          <tr><td>Category E</td><td>14%</td></tr>
        </tbody>
      </table></div>
  <div class="treemap-tw__srtable-wrap treemap-tw__srtable-wrap--dominant">
      <table class="treemap-tw__srtable">
        <caption>Treemap data, dominant emphasis</caption>
        <thead><tr><th scope="col">Category</th><th scope="col">Share</th></tr></thead>
        <tbody>
          <tr><td>Category A</td><td>55%</td></tr>
          <tr><td>Category B</td><td>15%</td></tr>
          <tr><td>Category C</td><td>12%</td></tr>
          <tr><td>Category D</td><td>10%</td></tr>
          <tr><td>Category E</td><td>8%</td></tr>
        </tbody>
      </table></div>
</div>
<style>
.treemap-tw { max-width: 420px; font: 12px system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 12px; box-sizing: border-box; }
.treemap-tw__group { display: none; height: 200px; }
.treemap-tw--balanced .treemap-tw__group--balanced { display: flex; gap: var(--gap); }
.treemap-tw--dominant .treemap-tw__group--dominant { display: flex; gap: var(--gap); }
.treemap-tw__cell--a { flex: 0 0 28%; }
.treemap-tw--dominant .treemap-tw__cell--a { flex-basis: 55%; }
.treemap-tw__right { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--gap); }
.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; }
.treemap-tw__cell--a { background: var(--accent); color: #241430; }
.treemap-tw__cell--b { background: #A8E6C1; }
.treemap-tw__cell--c { background: #F5C2E0; }
.treemap-tw__cell--d { background: #BFD9F2; }
.treemap-tw__cell--e { background: #D9C8F0; }
.treemap-tw__name { font-size: 13px; }
.treemap-tw__pct { font-size: 11px; font-weight: 500; opacity: .8; }
.treemap-tw__srtable-wrap { display: none; }
.treemap-tw--balanced .treemap-tw__srtable-wrap--balanced { display: block; }
.treemap-tw--dominant .treemap-tw__srtable-wrap--dominant { display: block; }
.treemap-tw__srtable { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
</style>

react

export function Treemap({
  emphasis = "balanced",
  showLabels = true,
  gap = 3,
  accent = "#E8A020",
}) {
  const layouts = {
    balanced: { a: 28, cells: [["B", 22, "30.6%"], ["C", 20, "27.8%"], ["D", 16, "22.2%"], ["E", 14, "19.4%"]] },
    dominant: { a: 55, cells: [["B", 15, "33.3%"], ["C", 12, "26.7%"], ["D", 10, "22.2%"], ["E", 8, "17.8%"]] },
  };
  const colors = { B: "#A8E6C1", C: "#F5C2E0", D: "#BFD9F2", E: "#D9C8F0" };
  const active = layouts[emphasis] ?? layouts.balanced;
  return (
    <div style={{ maxWidth: 420, padding: 12, font: "12px system-ui, sans-serif", color: "#241430", background: "#FAF7F2", boxSizing: "border-box" }}>
      <div style={{ display: "flex", height: 200, gap }}>
        <div style={{ flex: `0 0 ${active.a}%`, background: accent, borderRadius: 4, padding: "6px 8px", boxSizing: "border-box",
          display: "flex", flexDirection: "column", justifyContent: "flex-end", fontWeight: 600 }}>
          <span style={{ fontSize: 13 }}>A</span>
          {showLabels && <span style={{ fontSize: 11, fontWeight: 500, opacity: .8 }}>{active.a}%</span>}
        </div>
        <div style={{ flex: "1 1 auto", display: "flex", flexDirection: "column", gap }}>
          {active.cells.map(([letter, pct, basis]) => (
            <div key={letter} style={{ flexBasis: basis, background: colors[letter], borderRadius: 4, padding: "6px 8px", boxSizing: "border-box",
              display: "flex", flexDirection: "column", justifyContent: "flex-end", fontWeight: 600 }}>
              <span style={{ fontSize: 13 }}>{letter}</span>
              {showLabels && <span style={{ fontSize: 11, fontWeight: 500, opacity: .8 }}>{pct}%</span>}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}