Part-to-Whole
Circle Packing
Nests circles within circles to represent hierarchical data, with area encoding value at each level.
NPM Package Ecosystem
Weekly downloads by category
View data (8 rows)
| Group | Downloads | Library |
|---|---|---|
| Frontend | 950 | React |
| Frontend | 420 | Vue |
| Frontend | 180 | Svelte |
| Backend | 700 | Express |
| Backend | 250 | Fastify |
| Backend | 120 | Koa |
| Tooling | 500 | Webpack |
| Tooling | 600 | Vite |
Use a circle packing when…
- Showing nested group sizes in an organic, visually appealing layout
- Comparing leaf-node sizes across different branches
Avoid when…
- When precise size comparisons are needed (circles waste space)
- When the hierarchy is very deep or very wide
Data it needs
| Property | Value |
|---|---|
| Min Rows | 5 |
| Min Columns | 2 |
| Column Types | stringnumber |
| Notes | Hierarchy is encoded as a parent reference column (or category column for two-level packs); a flat table without hierarchy renders a single ring of circles. |
Visual anatomy
Marks
circle
Channels
area (value)nesting (hierarchy)color (group)
Axes
-
Guiding principles
Consider instead
Common mistakes
Not accounting for wasted whitespace between circles
Labelling every circle, causing overlap
History
Circle packing for visualization was popularized by Wang et al. (2006) as a hierarchy layout alternative to treemaps.
Accessibility notes
Provide a nested list with values and ensure adjacent group fills meet WCAG AA contrast against each other and the background — circle borders alone are easy to lose. Use tooltips for unlabelled circles.
Related reading
Got data? Let's see what works.
Drop your CSV. You'll get a Circle Packing plus four alternatives - ranked by which one actually fits your data best.