Circle Packing
Nested circles that reveal hierarchical relationships — parent circles contain their children, and each circle’s area is proportional to its value.
// 01 — The chart
What it looks like
A circle packing diagram showing NPM dependencies grouped by category. Larger circles indicate more downloads; nesting shows category membership.
// 02 — Definition
What is circle packing?
Circle packing (also called packed circles or nested bubble chart) is a space-filling visualization that uses circles to represent hierarchical data. Each node in the hierarchy is a circle; parent nodes contain their children, and each circle’s area is proportional to its value.
Unlike treemaps (which fill 100% of the available space with rectangles), circle packing has inherent whitespace — circles can’t tile perfectly. This makes the chart less space-efficient but more visually organic and easier to read. The nesting is immediately obvious because circles sit inside their parents.
Circle packing is popular for visualizing software dependencies, organizational structures, and biological taxonomies where the organic, bubble-like appearance creates an intuitive sense of containment and relative size.
Origin: Circle packing as a data visualization technique was pioneered by Weixin Wang and colleagues in 2006, building on the mathematical problem of circle packing studied since the 17th century. D3.js made it widely accessible through its d3.pack() layout algorithm.
// 03 — Anatomy
Parts of a circle packing chart
// 04 — Usage
When to use it — and when not to
- Showing hierarchical grouping with an organic, intuitive feel
- Relative sizes matter more than precise values
- The hierarchy has 2–3 levels with moderate branching
- You want to show containment (which things belong to which group)
- Creating engaging, visually appealing data art
- Precise comparison is important — use a treemap or bar chart
- Space efficiency matters — circles waste ~21% of area as whitespace
- You have many small leaf nodes that become unreadable dots
- The data is flat (non-hierarchical)
- Labels are long — circles have limited labeling space
// 05 — Reading guide
How to read a circle packing chart
Identify the hierarchy
The outermost circle is the root. Each level of nesting represents a deeper level in the hierarchy.
Compare circle sizes
Larger circles represent larger values. Compare areas (not diameters) — a circle twice the diameter has four times the area.
Read group containment
If circle A contains circles B and C, then B and C are children of A. This containment is the chart's key structural message.
Use colour for category
Circles of the same colour typically belong to the same top-level group, even if they're visually separated by layout.
Hover for details
In interactive versions, hover to see exact values, names, and hierarchy paths that aren't visible as labels.
// 06 — Data format
What data do you need?
A tree-structured dataset identical to sunburst and icicle charts. Leaf nodes have values; parent nodes derive their size from children.
{
name: "Dependencies",
children: [
{ name: "Frameworks", children: [
{ name: "React", value: 1800 },
{ name: "Vue", value: 950 }
]},
{ name: "Testing", children: [
{ name: "Jest", value: 600 },
{ name: "Mocha", value: 250 }
]}
]
}// 07 — Construction
How to build one
Structure data as a tree with values at leaf nodes.
Use d3.pack() to compute circle positions and radii for each node.
Draw SVG <circle> elements for each node, from root to leaves.
Colour by top-level group. Use opacity or lighter fills for container circles.
Add labels to circles large enough to fit text. Use tooltips for small circles.
// 08 — Common mistakes
Mistakes to watch out for
Comparing diameters instead of areas
Circle area grows with the square of the radius. A circle twice the diameter represents four times the value. Always compare areas.
Too many tiny circles
Hundreds of small leaf circles become an unreadable dotted mess. Aggregate small nodes or limit the hierarchy depth.
No labels or tooltips
Without identification, circles are just coloured dots. Always provide a way to discover what each circle represents.
Misleading whitespace
The wasted space between circles can make the chart look unbalanced. Don't interpret whitespace as data.
Too deep a hierarchy
Beyond 3 levels, inner circles become dots. Use click-to-zoom or limit the visible depth.
// 09 — Real-world examples
Where you’ll see it in the wild
Software ecosystems
NPM, PyPI, or CRAN package dependencies visualized as nested bubbles showing which libraries belong to which category.
News & media
Topic clusters in news coverage — major stories contain sub-stories, sized by article count or readership.
Genomics
Gene ontology hierarchies where biological processes contain molecular functions, sized by gene count.
Market analysis
Industry sectors containing companies, sized by market cap — a bubble version of a market map.
// 10 — Quick reference
Key facts at a glance
Packed circles, nested bubble chart
Hierarchical grouping, relative sizes, organic feel
2–3 levels
~79% (21% wasted as whitespace)
D3.js (d3.pack), Observable Plot, Flourish
Area = value, nesting = hierarchy
// 11 — Accessibility
Making it accessible
Provide a data table listing all nodes with their values and parent paths
Use ARIA tree roles so screen readers can navigate the hierarchy
Ensure colour contrast between nested levels meets WCAG requirements
Add text labels to all circles large enough to display them
Support keyboard navigation for interactive zoom
// 12 — Variations
Common variations
Flat circle packing
No hierarchy — circles are simply packed to fill a container, sized by value. Used for non-hierarchical proportional display.
Zoomable circle packing
Click a group circle to zoom in, showing its children in full detail. Essential for deep hierarchies.
Force-directed circles
Circles use physics simulation to find positions, creating more dynamic but less stable layouts.
Labelled packing
Only the largest circles get text labels; smaller ones use colour coding and tooltips for identification.
// 13 — FAQs
Frequently asked questions
What is a circle packing?+
Circle packing (also called packed circles or nested bubble chart) is a space-filling visualization that uses circles to represent hierarchical data. Each node in the hierarchy is a circle; parent nodes contain their children, and each circle's area is proportional to its value.
When should you use a circle packing?+
Use a circle packing when showing hierarchical grouping with an organic, intuitive feel. It also works well when relative sizes matter more than precise values, and when the hierarchy has 2–3 levels with moderate branching.
When should you avoid a circle packing?+
Avoid a circle packing when precise comparison is important — use a treemap or bar chart. It is also a poor fit when space efficiency matters — circles waste ~21% of area as whitespace, or when you have many small leaf nodes that become unreadable dots.
What data do you need to make a circle packing?+
A tree-structured dataset identical to sunburst and icicle charts. Leaf nodes have values; parent nodes derive their size from children.
How is a circle packing different from a treemap?+
Both a circle packing and a treemap can look similar at first glance, but they answer different questions. Reach for a circle packing when the comparisons and patterns it was designed to reveal match what you need to communicate, and choose a treemap when its particular strengths better fit your data and audience.
What is another name for a circle packing?+
Circle Packing is also known as Packed circles, nested bubble chart. The name varies between fields, but the visualisation technique is the same.
What size of dataset works best for a circle packing?+
Circle Packing works best for Hierarchical grouping, relative sizes, organic feel. Outside that range the chart either looks empty or becomes too cluttered to read clearly.
Are circle packings accessible to screen readers?+
Yes — a circle packing can be made accessible to screen readers by pairing it with a clear text summary of the key insight, ensuring color choices meet WCAG contrast guidelines, adding descriptive alt text or aria-label to the SVG, and offering the underlying data as an HTML table fallback for assistive technologies.