TREEMAP

squarified treemap, one level. Needs: 4 to 12 additive categories of one total, one optional highlight.

part-to-wholecompositionmagnitude

DL-01 AGRAW

Use when

a total split across 4 to 12 parts where the big picture beats precision
budget, scope, or inventory composition at a glance

Do not use when

precise comparisons (area is read badly; use CH-RNK-01)
hierarchies deeper than one level (out of scope for this entry)
more than 12 cells (aggregate the tail into Other)

See instead

under 4 categories: CH-PTW-03
precise comparison matters: CH-RNK-01

Alternatives

CH-PTW-01 (stacked bar)
CH-RNK-01 (when order matters more than area)

Rules

one level only; cells sorted descending before layout
2px background-colored gaps between cells
labels only in cells >= 90x44 px; small cells stay silent (their story is in the title)
one highlight maximum (role primary); all others role muted
unit once, on the largest cell

Never do this

rainbow cells (one hue plus one highlight, always)
labels crammed into tiny cells
nested hierarchies in this entry
treemap for time series

QA before delivering

4 to 12 cells
highlight count <= 1
labels absent below the size threshold
unit exactly once
title states the concentration with a number
source line present bottom-left

Data shape

title	string, action title stating the concentration with a number
eyebrow	string caps, rendered only when the DL chrome asks for it
source	string, rendered bottom-left, always
unit	string, appears once, on the largest cell's value
categories	array of {label, value > 0, highlight?}, 4 to 12 items

Sample data (golden)

{
  "title": "Pipeline and stations hold 55% of the budget",
  "eyebrow": "BUDGET . 2026 PLAN",
  "source": "Source: sample dataset v1, 2026-07-12",
  "unit": "M$",
  "categories": [
    {
      "label": "Pipeline",
      "value": 34,
      "highlight": true
    },
    {
      "label": "Stations",
      "value": 21
    },
    {
      "label": "Power",
      "value": 13
    },
    {
      "label": "Buildings",
      "value": 9
    },
    {
      "label": "Roads",
      "value": 7
    },
    {
      "label": "Telecom",
      "value": 6
    },
    {
      "label": "Fencing",
      "value": 5
    },
    {
      "label": "Other",
      "value": 5
    }
  ]
}