Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of D3 v5 Zoomable Sunburst v1

Public visualization

Viewing a saved revision (read-only)

eacb750c70564fcdb930223dc3eee6f0

Fork of D3 v5 Zoomable Sunburst v1

0 stars0🌍 Public
OOwer
Last edited Jan 23, 2023
Created on Jan 23, 2023

This interactive sunburst diagram visualizes a hierarchical dataset through nested, color-coded arcs that zoom and pan with click interactions. Built with D3 v5, it uses `d3.hierarchy` and `d3.partition` to compute layout, while `d3.arc` generates each segment. Transitions animate via `transition.attrTween` and interpolated arc paths, with labels rotating and fading based on visibility criteria. The data originates from the `@observablehq/flare` package, rendered as SVG with responsive scaling.

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