Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of D3 v5 Zoomable Sunburst

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

d7b47de2b8a54e2bbd23fe0b1cb4afbd

Open

Fork of D3 v5 Zoomable Sunburst

0 stars0🌍 Public
KKamal Bahadur Rana
Last edited Jun 26, 2023
Created on Jun 26, 2023

This zoomable sunburst visualization displays a hierarchical dataset, the Flare software package, with each arc segment sized proportionally to its value. Users click any arc to zoom in and explore nested categories, while a central circle resets the view. Built with D3 v7, it uses `d3.partition`, `d3.hierarchy`, and `d3.arc` to compute the layout, with smooth transitions animated via `transition.attrTween` and `transition.tween`. The color scale uses `d3.scaleOrdinal` and `d3.interpolateRainbow` to distinguish top-level branches.

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