Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3 v5 Zoomable Sunburst

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

236631182bb94cc791910cd7a5a65824

Open

D3 v5 Zoomable Sunburst

0 stars1🌍 Public
55FEKO
Last edited Sep 21, 2019
Created on Sep 21, 2019

This zoomable sunburst visualizes the hierarchical structure of the Flare dataset, using colored arcs to represent categories and nested segments for subcategories. Clicking a segment smoothly zooms into that branch, animating the radial layout via `d3.transition` and `attrTween`. Rendered with SVG, it leverages `d3.partition`, `d3.hierarchy`, and `d3.arc` to compute the layout, while `d3.scaleOrdinal` and `d3.interpolateRainbow` drive the color scheme, with labels and tooltips (`<title>`) providing details on demand.

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