Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3 v5 Zoomable Sunburst

Public visualization

Viewing a saved revision (read-only)

828dfb5234d24e0aa03ddb1c91208047

D3 v5 Zoomable Sunburst

0 stars0🌍 Public
JJuan Sebastian Prieto
Last edited Jun 27, 2019
Created on Jun 27, 2019

This interactive sunburst diagram visualizes the hierarchical structure of the Flare dataset, where each ring segment represents a category and its size corresponds to its value. Users click a segment to zoom into that branch, re-centering the visualization and smoothly animating the arcs and labels. Built with D3 v5, the example uses `d3.hierarchy`, `d3.partition`, and a custom `d3.arc` to compute geometry, while `transition.attrTween` animates the changing path data. The color scheme assigns hues to top-level categories using `d3.scaleOrdinal` and `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