Text treemaps for hierarchical budgets and totals

Use glyphChartTreemap(data, channels?, options?). Its default channels are { id: "id", parent: "parent", value: "value", label: "label" }.

Engineering allocation

These illustrative budget units form one root with three teams and six leaves. Branch totals come from children; assign magnitudes to leaves.

┌──────────────────────────────────────────────────────────────┐
│ Engineering                                                  │
├──────────────────────────────────────────────┬───────────────┤
│ Product                                      │ Delivery      │
├─────────────────────────┬────────────────────┼───────────────┤
│ Portal                  │ Mobile             │ CI            │
│ 22                      │ 18                 │ 13            │
│                         │                    │               │
│                         │                    │               │
├─────────────────────────┴────────────────────┤               │
│ Platform                                     ├───────────────┤
├──────────────────────────┬───────────────────┤ QA            │
│ Cloud                    │ Security          │ 12            │
│ 20                       │ 15                │               │
│                          │                   │               │
└──────────────────────────┴───────────────────┴───────────────┘

Code

import { renderGlyphChart } from "@glyphcss/charts";

const { text } = renderGlyphChart({
  type: "treemap",
  data: [
    {
      id: "root",
      parent: null,
      label: "Engineering"
    },
    {
      id: "Product",
      parent: "root",
      label: "Product"
    },
    {
      id: "Portal",
      parent: "Product",
      label: "Portal",
      value: 22
    },
    {
      id: "Mobile",
      parent: "Product",
      label: "Mobile",
      value: 18
    },
    {
      id: "Platform",
      parent: "root",
      label: "Platform"
    },
    {
      id: "Cloud",
      parent: "Platform",
      label: "Cloud",
      value: 20
    },
    {
      id: "Security",
      parent: "Platform",
      label: "Security",
      value: 15
    },
    {
      id: "Delivery",
      parent: "root",
      label: "Delivery"
    },
    {
      id: "CI",
      parent: "Delivery",
      label: "CI",
      value: 13
    },
    {
      id: "QA",
      parent: "Delivery",
      label: "QA",
      value: 12
    }
  ],
  channels: {
    id: "id",
    parent: "parent",
    value: "value",
    label: "label"
  }
}, {
  target: "chat",
  width: 64,
  height: 16
});
console.log(text);

import { glyphChartTreemap, renderGlyphChart } from "@glyphcss/charts";
const result = renderGlyphChart(
  glyphChartTreemap([
    { id: "root", parent: null, label: "Engineering" },
    { id: "Product", parent: "root", label: "Product" },
    { id: "Portal", parent: "Product", label: "Portal", value: 22 },
    { id: "Mobile", parent: "Product", label: "Mobile", value: 18 },
    { id: "Platform", parent: "root", label: "Platform" },
    { id: "Cloud", parent: "Platform", label: "Cloud", value: 20 },
    { id: "Security", parent: "Platform", label: "Security", value: 15 },
    { id: "Delivery", parent: "root", label: "Delivery" },
    { id: "CI", parent: "Delivery", label: "CI", value: 13 },
    { id: "QA", parent: "Delivery", label: "QA", value: 12 },
  ]),
  { target: "chat", width: 64, height: 16 },
);

Ids must be unique, parents must exist, and the hierarchy must be acyclic. Use null or an empty parent for roots. Leaves require finite, nonnegative values. Invalid hierarchy rejects with treemap-hierarchy.

Tiles share borders. Labels and leaf values need interior space; small tiles or whole labels that do not fit are omitted with treemap-omitted. Increase dimensions or aggregate tiny categories before rendering. Treemap rejects x/y scales and transforms.

For indented source syntax, see Mermaid treemaps. For entity relationships rather than weighted areas, use ER diagrams.