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)

cb52b47e26bd4857a97ae57b8724f0eb

Open

D3 v5 Zoomable Sunburst

0 stars4🌍 Public
Mmpcantele
Last edited Oct 23, 2019
Created on Oct 23, 2019

This zoomable sunburst visualization displays a hierarchical dataset of energy and capital categories, allowing users to click arcs to focus on a child node and its descendants or click the center circle to zoom back out. Rendered as an SVG using D3 v5, the chart uses `d3.partition`, `d3.hierarchy`, `d3.arc`, and a color scale based on `d3.interpolateRainbow`. Transitions between zoom levels are animated via `transition.attrTween` and `d3.interpolate`, with labels and arcs fading based on visibility. The data originates from the Observable `@observablehq/flare` dataset.

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