Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of D3 v5 Zoomable Sunburst using local json

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

d1285361366d46ca8561881955f37274

Open

Fork of D3 v5 Zoomable Sunburst using local json

0 stars0🌍 Public
LLiml
Last edited Apr 2, 2024
Created on Apr 2, 2024

This zoomable sunburst chart visualizes the hierarchical structure of the Flare data set, with each ring representing a level of the hierarchy and arc sizes proportional to node values. Clicking a ring zooms in on that subtree, animating the transition over 750 milliseconds. Built with D3 v6, the visualization uses the `d3.hierarchy` and `d3.partition` APIs to compute the layout, while `d3.arc` generates the sunburst paths. Color assignment uses `d3.scaleOrdinal` with a rainbow interpolator, and the dynamic data loading and label positioning rely on `d3.json` and the `transition.attrTween` API.

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