Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3 v5 Zoomable Sunburst

Public visualization

Viewing a saved revision (read-only)

e667ca4d9f904bdf93ab22b8668bdb44

D3 v5 Zoomable Sunburst

0 stars0🌍 Public
SSumittiwari654
Last edited Nov 28, 2019
Created on Nov 28, 2019

A hierarchical sunburst chart displays hierarchical data as concentric rings of arcs, with colors assigned to top-level branches. Clicking a segment smoothly zooms and re-centers the visualization on that arc, expanding its children outward while fading unrelated elements. Built with D3 v5, it loads data via the Observable standard library and uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute and render the layout as SVG. Interactive transitions rely on `transition.attrTween` and `d3.interpolate` to animate arc positions and label rotations.

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