Nested circles whose areas encode value. Children packed inside parent.
A free, animated circle packing you can read here or embed on any website, from Scrollchart.
Circle Packing
Circle packing encodes a hierarchical dataset as nested circles: a large outer circle represents the root or total; inside it, mid-size circles represent top-level groups; inside each group, smaller circles represent individual items. The area of each circle is proportional to its value, so visually larger circles hold more. Circles within a group are packed to fill as much of the parent as possible without overlapping.
Common applications include portfolio breakdowns (asset classes containing individual holdings), species taxonomy (families containing genera), and budget hierarchies (departments containing line items). The organic, non-rectangular shape makes circle packing more visually distinctive than a treemap, though the curved boundaries make precise area comparisons harder.
Area, not diameter, is the data-encoding dimension. A circle with twice the area has a diameter only about 1.41 times larger (since area = pi * r^2), so size differences look smaller than they are. This is a known perceptual limitation: readers tend to underestimate area differences between circles compared to equivalent length differences on a bar chart.
Use the circle hierarchy to navigate: the outer ring of labeled circles shows the main groups. Their relative sizes tell the top-level story. Zoom into one group to read its children. Labels inside very small circles may be absent or replaced by tooltips. If two leaf circles look nearly the same size, check any numeric labels or hover states rather than relying on visual judgment.
Editorial pages where a quick visual replaces a wall of text
Content-marketing posts that need a clean, branded illustration
Source & accuracy
This circle packing is an editorial illustration built to represent the concept accurately. Where it shows figures, they are typical or representative values chosen to make the relationship clear, not a single underlying dataset. The diagram and its explainer are reviewed and maintained centrally, and updated over time as understanding improves.
Hierarchical data in nested circles
Circle packing arranges hierarchical data as nested circles: a large parent circle contains smaller child circles, whose areas encode a value (budget allocation, file size, population). The layout packs children efficiently inside the parent, showing both the part-to-whole relationship and peer comparison within each level.
The visual density and geometric elegance of circle packing appeals to designers and data journalists, though it can be harder for viewers to compare areas precisely (humans judge areas less accurately than lengths).
Practical limits and readability
Circle packing works well for up to 3-4 levels of hierarchy and roughly 20-30 items total. Beyond that, small circles become unreadable. For large trees or many categories, a treemap or sunburst chart often scales better. Use circle packing when elegance and novelty matter as much as precision.
Embed this diagram
Add this animated circle packing to your own site. Copy one line of HTML, or use the embed builder for theme and sizing options.
Reference
What this is
A free, embeddable, animated circle packing for any website.
Who uses it
Data journalists, Researchers & academics, Content marketers, News organizations.
How to embed
Copy one line of HTML. No signup. No watermark. Works in WordPress, Webflow, Ghost, Substack, plain HTML.
File size
iframe embed, ~80 KB gzipped (loads on demand, does not block your page paint).
License
Free forever. Editorial explainer text included; updated centrally over time.
Copy the universal HTML snippet, the WordPress shortcode, or an iframe fallback -
see the WordPress plugin page for details. Any format keeps
the same Core Web Vitals profile and the same explainer text.
By embedding, you acknowledge the diagram and explainer text are served from scrollchart.com and may be updated from time to time to reflect new research or to link to relevant sources within the explainer.
Frequently asked questions
Where can I get a free animated "Circle Packing" for my website?
Scrollchart provides "Circle Packing" as a free, embeddable animated diagram you can add to any website with one line of HTML. No signup is required and there is no watermark. The diagram and its explainer text are served from scrollchart.com, so the embed stays current without any maintenance on your end.
How do I embed a circle packing in a blog post or article?
Paste the one-line HTML snippet from the Scrollchart diagram page into your post editor. It works in WordPress, Webflow, Ghost, and plain HTML with no plugin required. The animated diagram and its explainer text load from scrollchart.com and render directly in your page DOM.