Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3 v5 Zoomable Sunburst

Public visualization

Viewing a saved revision (read-only)

ab189c2a929142349290079d73f4464e

D3 v5 Zoomable Sunburst

0 stars1🌍 Public
JJerfaas
Last edited Apr 2, 2020
Created on Apr 2, 2020

This zoomable sunburst visualization displays the hierarchical structure of the Flare data set, using nested arcs to represent parent-child relationships and their relative sizes. Built with D3 v5, it renders the hierarchy as an interactive ring layout where users can click any arc to zoom into that subtree, with smooth animated transitions between views. The visualization uses `d3.partition`, `d3.hierarchy`, and `d3.arc` for geometry, while `transition.attrTween` and `transition.tween` handle the interpolated animation of arc paths and labels during zoom operations.

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