Treemap

A treemap's only hard constraint is that AREA be proportional to value, which leaves each rectangle's shape free. Slicing naively spends that freedom on slivers whose areas the eye cannot compare; squarifying spends it on keeping every cell near-square, which is what makes one readable. See site/content/algorithms for the argument.

Diagrams 564 × 374 <data><record><treemap>

Result

Source examples/treemap.svgn

<diagram padding="22">
  <!-- A treemap's only hard constraint is that AREA be proportional to value,
       which leaves each rectangle's shape free. Slicing naively spends that
       freedom on slivers whose areas the eye cannot compare; squarifying
       spends it on keeping every cell near-square, which is what makes one
       readable. See site/content/algorithms for the argument. -->
  <data name="package">
    <record part="engine/layout" loc="4100"/>
    <record part="engine/chart"  loc="3300"/>
    <record part="frontend"      loc="2400"/>
    <record part="engine/render" loc="1500"/>
    <record part="foundation"    loc="1200"/>
    <record part="isometric"     loc="900"/>
    <record part="ir"            loc="700"/>
    <record part="vocabulary"    loc="500"/>
  </data>

  <treemap data="package" by="part" value="loc" width="520" height="330"/>
</diagram>

Open the SVG →