D3 Zoomable Circle Packing

Zoomable circle packing is a public D3 notebook that compresses a branching hierarchy into nested circles. Click inward to magnify a branch, click the background to climb back out, and inspect the concise source when the geometry starts making sense.

What is D3 Zoomable Circle Packing?

The example's trick is economical: parent circles contain their children, leaf size carries quantity, and a click changes the focus without replacing the diagram. Labels fade between levels while the circles expand around the selected branch, turning an abstract tree into something closer to a set of Russian dolls with excellent bookkeeping. The notebook is also a practical code specimen, with the packing, labels, hover state, and zoom transition kept together in a compact public example.

What you can do there

• Click nested circles to focus on branches
• Click the background to return to the root
• Inspect or fork the public notebook

Why we picked it

Few visualization examples explain both the idea and its implementation this cleanly. The nested geometry makes hierarchy legible at a glance, while the public source exposes enough detail for a curious visitor to trace how layout, labeling, and animated focus fit together.

How to get the most from it

Start with one of the larger inner circles, then descend a level at a time and watch which labels replace the previous set. Click the open background to return to the root. If you are studying the code, compare the pack layout with the zoom function after you understand the visual rhythm.

Good to know

This is an Observable notebook and code example, not a general-purpose hierarchy explorer. The page labels the notebook public and ISC, but saving, forking, account requirements, touch behavior, accessibility, audio, and current platform pricing were not verified. The zoom animation may be uncomfortable for motion-sensitive visitors.

Who made it, and when?

Mike Bostock is the credited creator or organization.