Skip to main content
๐ŸŒ Public

Share visualization

Send this visualization to others.

D3 v5 Zoomable Sunburst

Public visualization

D3 v5 Zoomable Sunburst

0 stars1๐ŸŒ Public
Bbeca8675
Last edited Apr 30, 2020
Created on Apr 20, 2020

This D3 v5 zoomable sunburst visualizes hierarchical data from the Observable @observablehq/flare dataset. Users click arcs to zoom into a category, triggering animated transitions that recompute arc angles and radii via `d3.partition` and `d3.hierarchy`. The code uses `d3.arc`, `d3.scaleOrdinal`, and `d3.interpolateRainbow` for coloring, with SVG paths and text labels rendering the radial layout. `transition.attrTween` animates the shape and position of arcs and labels over 750 milliseconds, while `d3.format` displays numeric values.

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