Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of D3 v5 Zoomable Sunburst

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

5e6c13d93dbb4a6e9b943d9d08a53812

Open

Fork of D3 v5 Zoomable Sunburst

0 stars1🌍 Public
Bblueyjuice
Last edited Dec 1, 2021
Created on Dec 1, 2021

A zoomable sunburst chart visualizes the hierarchical structure of the Flare dataset, with arcs color-coded by top-level category and sized by value. Clicking a segment rotates and scales the visualization to focus on that subtree, using D3 v5 transitions and `transition.attrTween` to animate arc geometry and label positions. The chart renders with SVG, leveraging `d3.hierarchy`, `d3.partition`, and `d3.arc`, while loading data asynchronously via the Observable standard library and `require`.

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