Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3 v5 Zoomable Sunburst

Public visualization

Viewing a saved revision (read-only)

9ad08df5b0d44660bc6d83bfef6a21c8

D3 v5 Zoomable Sunburst

0 stars0🌍 Public
Cchungmin-yu
Last edited Nov 28, 2020
Created on Nov 28, 2020

A zoomable sunburst visualizes the hierarchical Flare dataset, where clicking a node zooms the radial layout to focus on that subtree, recentering and rescaling arcs with animated transitions. Rendered as SVG, it uses D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute the layout, with colors assigned via `d3.scaleOrdinal` and `d3.interpolateRainbow`. Interactive updates rely on `transition.attrTween` to interpolate arc geometry and label positions over 750 milliseconds.

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