Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3 v5 Zoomable Sunburst

Public visualization

Viewing a saved revision (read-only)

8343122786a44e95a9cc50f485e93f1f

D3 v5 Zoomable Sunburst

0 stars1🌍 Public
Pprincit
Last edited May 21, 2020
Created on May 21, 2020

This zoomable sunburst visualization displays hierarchical data from the Flare dataset, with concentric rings representing nested categories such as analytics, animate, and query. The visualization uses D3 v5's partition layout to render the sunburst as SVG, with each sector's arc length proportional to its value. Users can click on any arc to zoom in and explore that branch of the hierarchy, with the root label and title updating to reflect the current focus. The code implements this interactivity using D3's `d3.partition`, `d3.hierarchy`, and event handling on the SVG elements.

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