🌍 Public
Viewing a saved revision (read-only)
731e45fb3a9a40e9bc95dd84a8b5305b
D3 v5 Zoomable Sunburst
This zoomable sunburst from Mike Bostock’s example, ported to D3 v5 by tdog8901, visualizes hierarchical data using an interactive radial layout with SVG and animated transitions. Clicking a node zooms into that subtree, smoothly re-scaling arcs via `transition.attrTween` and interpolated path data. The code uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to render the rings, with a color scale based on top-level names. It loads data from a custom `flare.json` file and includes labels that fade in or out based on visibility thresholds.
AI-generated descriptionMike 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