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
Bblueyjuice
Last edited Dec 1, 2021
Created on Dec 1, 2021

This interactive sunburst diagram visualizes the hierarchical Flare dataset, showing the relative sizes of its branches and leaves through concentric, angle-based arcs. Clicking an arc zooms in to display that node as the new root, with a smooth 750-millisecond transition animating the arcs and labels via `d3.arc` and `transition.attrTween`. The chart uses D3 v5's `d3.hierarchy`, `d3.partition`, `d3.scaleOrdinal`, and a quantized rainbow color scale, rendering as SVG. Labels rotate and flip to maintain readability, and center-clicking returns to the previous level.

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