Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of D3 v5 Zoomable Sunburst

Public visualization

Viewing a saved revision (read-only)

418b192bee3e4943a123770101c5bc92

Fork of D3 v5 Zoomable Sunburst

0 stars0🌍 Public
Hhirowhite
Last edited Dec 30, 2020
Created on Dec 30, 2020

This sunburst visualization displays the hierarchical structure of the Flare data set, with each arc representing a node and its size proportional to the node’s value. Clicking an arc zooms in to show that node’s children, while clicking the center circle returns to the previous level. The visualization uses D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc` APIs, with smooth transitions animated via `transition.attrTween`. Color is assigned using `d3.scaleOrdinal` with a rainbow palette, and the SVG is rendered from the `flare.json` data file.

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