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)

cfbc3baf902044c0a315bca910cd14ae

Open

D3 v5 Zoomable Sunburst

0 stars1🌍 Public
AAlex Levitt
Last edited Apr 21, 2019
Created on Apr 21, 2019

The D3 v5 Zoomable Sunburst shows a hierarchical dataset of the Flare visualization library (loaded via the @observablehq/flare module) as a multi-ring sunburst chart. Clicking an arc zooms in to reveal its children, with smooth transitions applied to the arcs and labels via `transition.attrTween` and `d3.interpolate`. The visualization is rendered as SVG, uses `d3.hierarchy` and `d3.partition` for layout, and `d3.scaleOrdinal` with a rainbow palette for coloring top-level categories.

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