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
JJosieeeeee
Last edited Dec 13, 2021
Created on Dec 13, 2021

This interactive sunburst diagram visualizes the hierarchical structure of the Flare dataset, with each ring segment representing a category or subcategory whose arc width corresponds to its value. Users can click on any node to zoom into that branch, smoothly animating the re-scaling of arcs and labels via D3 transitions. The visualization is rendered as SVG and uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute layout, while `d3.interpolateRainbow` assigns categorical colors by top-level branch. The code loads data asynchronously through the Observable Standard Library’s `require()` function.

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