This entry is part of the Chart Index, the reference library for the Chart Design Field Guide.

Circle packing represents a hierarchy as nested circles. Each branch is a circle that encloses the circles of its children; each leaf is a circle whose area is its value. The enclosure communicates parent–child structure the way a treemap's nesting does, but with a geometry the eye reads as containment rather than partition — a family of leaves sits visibly inside its parent, with air around it.

It is the friendliest of the space-filling hierarchy charts and the least efficient. A treemap uses every pixel; a circle packing leaves gaps in every corner, because circles do not tile. That waste buys legibility: nested circles are instantly understood by readers who have never seen a treemap, and the gaps between siblings make the hierarchy obvious without gutters or header bands.

What it is

A circle packing chart maps a hierarchical categorical structure to nested circles and a quantitative variable to leaf area. The root is the outermost circle; each of its children is a circle packed inside it; each of those is packed with its own children, down to the leaves. Leaf area is proportional to value; a branch's circle is just large enough to enclose its packed children, so branch size reflects the sum of its leaves plus the packing's unavoidable slack. Colour usually identifies the top-level branch and lightens with depth.

The hero chart above is a company's headcount: four divisions, sixteen teams, 203 people. Engineering is the biggest circle because it holds the most people, and its Platform team is the biggest leaf in the chart. The reader can compare teams within a division at a glance — Sales is clearly twice Success — and can see that the whole of Operations would fit inside Platform. Randomise the teams and the leaves grow and shrink in place while their division circles re-pack around them.

When to use it

Circle packing is the right choice when:

  • The hierarchy itself is the message and the number of leaves is moderate (up to a few dozen).
  • The reader needs an approachable overview before exploring details interactively.
  • Approximate size comparison is sufficient — which teams are big, which are small.
  • Zooming into branches is part of the intended interaction: a circle is a natural zoom target.
  • The audience is general, and the friendliness of nested circles is worth more than the treemap's precision.

When not to use it

  • Readers must compare values accurately. Circle area is a weak channel and the packing adds slack. Use a bar chart or a treemap.
  • The hierarchy is deep or has hundreds of tiny leaves. Each level of nesting costs radius; by the fourth level the leaves are dots.
  • Space is tight. Nested circles leave far more unused area than rectangles do — roughly a quarter of the frame even in the best case.
  • Branch totals are the point. A branch circle's area is not its sum; it is its sum plus packing waste, and the waste differs from branch to branch.

Design principles

Know what the circles cost

The circle packing and the treemap draw the same tree. The treemap gives every pixel to a leaf; the packing gives a good share of them to the gaps between circles. The two figures below draw the headcount both ways.

As circle packing: friendly, gappy
Four divisions, sixteen teams. Every division is visibly a circle of teams and the reader needs no legend to see the nesting — but look at the empty space: between the leaves, around each division, and in every corner of the frame.
As a treemap: every pixel is a person
Identical data. The same sixteen teams fill the frame with no waste, every label fits, and a division's area is exactly its headcount. What is lost is the instant legibility of the circles: the reader now needs the header bands and the shared hue to see which cells belong together.

Reserve colour for branches

Use one colour family per top-level branch and derive the children's shade from the parent — one step lighter per level, as the hero does. The circles then read as families even where the enclosure is hard to see. Colour every leaf independently and the packing becomes a bowl of sweets: the hierarchy is still in the geometry, but the eye no longer sees it.

Branch colour: a division is a colour
Blue is Engineering wherever it appears, and its leaves are a lighter blue. The reader can name a team's division from its hue alone, and the nesting and the colour agree with each other.
A colour per node: the divisions dissolve
The same packing with the palette cycled per circle. Enclosure is the only remaining cue to the hierarchy, and against six competing hues it is not enough: the eye reads sixteen unrelated circles and four coloured rings.

Label only circles that can hold text

A label that spills outside its circle breaks the enclosure metaphor and attaches itself to the neighbour. Hide labels below a radius threshold — the figures here skip any leaf under fourteen pixels — and reveal them in the tooltip. When the branches are large enough, a small eyebrow at the top edge of each branch circle names the family without covering its children.

A long tail of small leaves: the small ones go unlabelled
Three product lines with a tail of minor SKUs. The big leaves carry their names; the small ones are left bare rather than smothered in text they cannot hold, and the reader hovers for the rest. The chart stays a picture instead of becoming a word cloud.

Give siblings room, but not too much

The padding between sibling circles is part of the design. Too little and adjacent leaves touch, so the eye cannot tell where one ends; too much and the branch circles balloon, the leaves shrink, and the chart spends its frame on air. Four to six pixels is usually right for a chart of this size.

No padding: the leaves touch
Zero padding between siblings. The packing is tightest, but the leaves kiss their neighbours and the hairline borders are all that separates them; the branch circles hug their children so closely that the enclosure almost disappears.
Sixteen pixels of padding: the leaves shrink to make room
The same data with generous padding. Every circle is now clearly separate, but the leaves have given up a third of their radius to the gaps, the small teams are approaching dots, and the four division circles are mostly canvas.

Make zoom state explicit

When readers can zoom into a branch, retain a visible path back to the root — a breadcrumb, or the parent circle drawn faintly around the zoomed view — and preserve branch colour across levels so that a zoomed-in team is still recognisably blue. A zoom that changes colours or hides the parent strands the reader inside the hierarchy.

Do not imply precision

Circle area is difficult to compare, and the branch circles carry packing slack that has nothing to do with the data. Never print a branch's value as if its circle encoded it; show values in tooltips or beside leaves when exact reading matters, and reach for a bar chart if the exact reading is the point.

Give it a square frame

The packing is round, so a wide frame wastes its sides and a tall one wastes its top and bottom. Give the chart a height close to its width, and use the corners for the title and a legend if one is needed.

Anatomy

The composition of a circle packing chart
An anatomical guide

The outer enclosure is the root, nested circles are branches, leaf area carries value, and colour identifies branch membership. Everything else — the padding, the eyebrows, the label threshold — exists to keep the enclosure legible.

  • Treemap — the same hierarchy as a space-filling partition; more precise, less friendly.
  • Sunburst — hierarchy arranged in concentric rings.
  • Icicle chart — hierarchy as stacked bands; best for tracing depth.
  • Tree — explicit parent–child structure without area encoding.
  • Bubble chart — circles sized by value with no hierarchy.

Reading list

  • Wang, W., Wang, H., Dai, G. & Wang, H. (2006). Visualization of Large Hierarchical Data by Circle Packing. The paper that introduced the form for hierarchies.
  • Munzner, T. (2014). Visualization Analysis and Design. On containment as a channel and the trade-offs among hierarchy layouts.
  • Heer, J., Bostock, M. & Ogievetsky, V. (2010). A Tour Through the Visualization Zoo. Circle packing alongside its siblings.
  • Cleveland, W. & McGill, R. (1984). Graphical Perception. Why area is a weak channel for exact comparison.