Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Fork of D3 v5 Zoomable Sunburst

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

cfc4b6ac6a65455197ca4d40de528858

Open

Fork of Fork of D3 v5 Zoomable Sunburst

0 stars0🌍 Public
DDeclan Naughton
Last edited Feb 9, 2024
Created on Feb 9, 2024

A zoomable sunburst visualization displays the hierarchical Flare dataset, showing the relative sizes of categories and subcategories through concentric ring segments. Clicking a node smoothly animates and re-scales the chart to focus on that branch, with the central circle resetting the view. Built with D3 v5, it uses `d3.partition`, `d3.hierarchy`, and `d3.arc` for layout and rendering, while `transition.attrTween` and `d3.interpolate` drive the animated transitions between zoom states. Color mapping uses `d3.scaleOrdinal` with `d3.interpolateRainbow`.

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