Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of D3 v5 Zoomable Sunburst

Public visualization

Fork of D3 v5 Zoomable Sunburst

0 stars0🌍 Public
SStuartSutherland
Last edited Jan 5, 2023
Created on Jan 5, 2023

This zoomable sunburst visualizes a hierarchical dataset representing the Flare visualization toolkit, using an SVG rendering with animated transitions powered by D3 v5. The visualization shows the hierarchical structure as a radial layout, with arcs partitioned by value and colored by top-level category. Clicking a node zooms in to expand that subtree, while clicking the center circle returns to the root. The code uses `d3.partition`, `d3.hierarchy`, `d3.arc`, and `transition.attrTween` to animate both the arcs and their labels, with data loaded from an Observable standard library module.

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

Comments

Sign in to join the discussion.

MIT Licensed