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)

748c4877df0b494481e018f4a31e2bc4

Open

D3 v5 Zoomable Sunburst

0 stars0🌍 Public
Mmaryam-Baghban
Last edited Aug 31, 2020
Created on Apr 28, 2020

This interactive zoomable sunburst diagram uses the D3 v5 library to display a hierarchical dataset. The code loads data from the Observable `flare` dataset and renders the visualization using SVG elements. Clicking on any arc transitions the view to that node, with a smooth animated zoom effect, by recomputing angular and radial portions via `d3.interpolate` and `transition.attrTween`. The visualization applies a rainbow color scale and includes text labels with conditional visibility.

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