Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3 v5 Zoomable Sunburst

Public visualization

Viewing a saved revision (read-only)

731e45fb3a9a40e9bc95dd84a8b5305b

D3 v5 Zoomable Sunburst

0 stars1🌍 Public
TTravy Trav
Last edited Mar 13, 2020
Created on Mar 12, 2020

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 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