D3 Zoomable Sunburst

D3’s Zoomable Sunburst packs a tree into concentric arcs, then keeps the view readable by showing only two levels at once. Click a branch to make it the new center; click the middle to climb back toward the root.

What is D3 Zoomable Sunburst?

A sunburst turns parent-and-child structure into a set of nested rings: angle carries quantity, radius marks depth, and shared color keeps a top-level branch visually related as it subdivides. This example adds a strong focus mechanism. Selecting a branch promotes it to the middle while its children sweep into the surrounding bands; reversing direction restores the broader context. The implementation is part of the appeal. The notebook exposes the D3 hierarchy and partition steps, SVG arc construction, labels, ancestor-path titles, color scale, visibility rules, and transition logic, so the finished pinwheel and the machinery behind it sit side by side.

What you can do there

• Click a hierarchy node to focus
• Click the center to move outward
• Inspect the D3 implementation

Why we picked it

Many hierarchy charts become confetti when the tree gets deep. Limiting the view to two layers gives this one room to breathe, while the center-as-back-button gesture makes movement through the structure feel spatial instead of menu-driven.

How to get the most from it

Start at the center and choose one broad arc rather than chasing the thinnest outer slice. After zooming in, compare the new inner ring with its surrounding children, then use the center to step back. Developers can read the exposed partition and arc code alongside each behavior.

Good to know

The notebook is publicly viewable and displays an ISC license, but Observable’s current account and pricing rules for forking, saving, and downloading were not established. The live chart, animations, tooltips, keyboard behavior, touch support, accessibility, audio, and performance have not been verified in a rendered session.

Who made it, and when?

Mike Bostock is the credited creator or organization.