Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3 v5 Zoomable and loadable Sunburst

Public visualization

Viewing a saved revision (read-only)

3456d09a2e86424c8fabee3bf77f4476

D3 v5 Zoomable and loadable Sunburst

0 stars0🌍 Public
Aallanagabindhu
Last edited Nov 13, 2019
Created on Nov 13, 2019

This interactive sunburst chart visualizes hierarchical data from the flare dataset, displaying restaurant categories and subcategories as concentric arcs. Clicking a segment zooms in to reveal that branch's children, while clicking the center circle navigates back up the hierarchy. Built with D3 v5, it uses custom partition layouts, arc interpolation, and CSS transitions to animate the zooming effect. The visualization loads data asynchronously via the Observable stdlib and renders everything as SVG with animated color and opacity changes.

AI-generated description

Mike Bostock's D3 Zoomable Sunburst example

  • with D3 v5 (based on the changes in v5) <br></br> Ported from this Observable notebook for this forum thread. Many thanks to Bryan Gingechen who answered my question about the necessary steps to get from an (Observable) JavaScript notebook to a vanilla JavaScript index.html. He presented his solution on blockbuilder.org