U2.11.3Treemap aspect ratio and layout stabilitydesignresearch

Layout algorithms fix aspect ratios; thin strips resist comparison

Aliases: squarified treemap · slice and dice · treemap stability

What it is

Values determine treemap areas, but the layout algorithm determines rectangle shape and position. Slice-and-dice, squarified, strip, and order-preserving variants produce different aspect ratios, adjacencies, and update stability for the same data. Thin rectangles are often harder to compare, label, and select, but squareness is not the only objective. Dynamic tracking may favor stable positions, while reading order or grouping may favor preserved order.

Why it happens

One area can be represented by many width-height combinations. In a thin block, one dimension can dominate judgment, while varying widths and neighboring shapes destabilize area comparison. Squarified layouts optimize aspect ratio, slice-and-dice exposes order, and stable layouts reduce displacement during updates; these goals conflict. The algorithm preserves theoretical area yet changes perceived area, label room, boundaries, and object constancy across animation.

Studying it

For identical values and canvases, compare layouts on within-parent area judgment, target location, ordered reading, label recognition, and tracking across updates. Record errors, time, the distribution and worst-case aspect ratio, node displacement, and adjacency change rather than a mean shape metric alone. Separate static from dynamic tasks and test wide and narrow viewports with varied tree shapes. An algorithmic gain in squareness does not prove better user performance.

Where it stops holding

Very small values can form strips under any algorithm and require depth management, aggregation, or detail. Preserving input order may justify less square shapes while reducing area precision; optimizing shape may destroy familiar positions. Responsive viewport changes can also reflow the whole map. Layout should be deterministic and versioned so identical data does not move without reason and appear to have changed.

Applying it

  • Select the objective from the task: static area comparison favors aspect-ratio control, sequential scanning favors order, and frequent updates favor positional and adjacency stability.
  • Fix sorting key, algorithm, parameters, and tie rules, then inspect meaningless movement across breakpoints and data updates.
  • Preserve labels, search, and an accessible hierarchical table so thin or moving nodes remain findable by name and value.
  • Compare candidate layouts on near-area and update-tracking tasks. If squareness helps comparison but harms tracking, offer task-specific views instead of one declared winner.

Related

  • Same group: U2.11.1 Treemaps encode shares as areas of nested rectangles · U2.11.2 Deep-node areas get too small to read; cap the depth · U2.11.4 Adjacent rectangles need borders or gaps to show hierarchy · U2.11.5 Treemaps cannot show negatives or support cross-branch comparison
  • Adjacent: U1.04.1 Perceived area systematically underestimates actual area · U3.07.1 Aspect ratio changes the visual impression of slope
  • Search terms: squarified treemap · slice and dice · aspect ratio · layout stability

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/U2.11.3