Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3 v5 Zoomable Sunburst

Public visualization

D3 v5 Zoomable Sunburst

1 star0🌍 Public
Hhirowhite
Last edited Jul 29, 2020
Created on Jul 29, 2020

This zoomable sunburst chart visualizes hierarchical data, displaying nested nodes as concentric arcs with color-coded categories and interactive labels. Clicking an arc zooms into that subtree, while clicking the center circle returns to the root. The visualization uses D3 v5’s `d3.partition` layout, `d3.arc` for path generation, and `d3.transition` with `attrTween` for smooth animated updates. Data is loaded from the `@observablehq/flare` dataset via the Observable stdlib, which the code fetches using `require()` before rendering the SVG.

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