Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Fork of Fork of D3 v5 Zoomable Sunburst

Public visualization

Viewing a saved revision (read-only)

ddcd60690c87469ba669529a84f0455a

Fork of Fork of Fork of D3 v5 Zoomable Sunburst

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

This zoomable sunburst visualizes the hierarchical flare dataset, showing nested categories as concentric arcs whose angular width encodes value. Clicking an arc zooms into that subtree with a smooth 750ms transition, while a central circle returns to the root. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute layout and geometry, with `transition.attrTween` animating arc paths and label rotations. The data loads from the `@observablehq/flare` module via the Observable runtime and renders as SVG with a rainbow color scale.

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