Squarified Treemap Layout Simulator

Dataset

Layout Algorithm

Item count 10

Live Layout Stats

Items

Layout time

0.0 ms

Avg aspect ratio

1.00

Worst aspect ratio

1.00

Hover a block for its value & trend.

How it works

A treemap divides a rectangle into sub-rectangles whose areas are proportional to a weight w_i. A naive "slice-and-dice" layout just lines items up by width, which produces very thin slivers once values vary a lot. The squarified algorithm (Bruls, Huizing & van Wijk, 1999) instead builds rows greedily, adding items to the current row only while doing so keeps rectangles closer to square:

worst(row, side) = max( side²·max(row)/sum(row)²,
                          sum(row)²/(side²·min(row)) )

while data remains:
  try adding next item to current row
  if worst(row+item) >= worst(row): commit row, start new one
  else: keep growing the row
  lay the row out along the shorter side of
  the remaining free rectangle, then shrink
  that rectangle by the row's thickness

Each committed row's height is exactly Σvalue / width (or width = Σvalue / height for a vertical row), which keeps every rectangle's area exactly equal to its value — the defining property of a treemap. This exact algorithm ships inside D3.js's d3.treemap(), Plotly's px.treemap(), and Tableau's built-in treemap chart, all mentioned in this page's source article on data-visualization tooling.

Area (footprint) of each block encodes its data value.
Height (extrusion) encodes a second variable — year-over-year trend — colored green for growth, red for decline.
Aspect ratio of a rectangle is max(w/h, h/w); 1.00 is a perfect square. Squarified layouts keep this near 1–3 for typical data; slice-and-dice routinely produces ratios above 10.

Positive trend Negative trend

⚠ Couldn't load the 3D engineThree.js failed to load from the CDN. Check your connection and reload.