Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3 v5 Zoomable Sunburst

Public visualization

Viewing a saved revision (read-only)

e4b28b92a4b84ee2b210ee8a7773b440

D3 v5 Zoomable Sunburst

0 stars0🌍 Public
YYash G
Last edited Mar 26, 2020
Created on Mar 26, 2020

This interactive sunburst visualization displays hierarchical data from the Flare dataset, animating radial arcs and labels when clicking to zoom into nodes. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to render SVG paths, with `d3.interpolate` and `transition.attrTween` for smooth 750ms animations. The color scale uses `d3.scaleOrdinal` with `d3.interpolateRainbow`, and labels rotate and flip based on arc position. Data loads asynchronously via an Observable stdlib `require` call, while a central circle returns to the root view.

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