Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of D3 v5 Zoomable Sunburst

Public visualization

Viewing a saved revision (read-only)

063f72502424480781076fadc6d97503

Fork of D3 v5 Zoomable Sunburst

0 stars0🌍 Public
Mmartina.dallamico.1@studenti.unipd.it
Last edited Oct 29, 2024
Created on Oct 29, 2024

This D3 v5 zoomable sunburst visualizes the hierarchical structure of the Flare dataset, displaying classic ring segments that expand and contract with click interactions. Built with the `d3.partition` layout and rendered as SVG, the visualization uses `d3.scaleOrdinal` with interpolated rainbow colors to differentiate top-level categories. Animated transitions are handled through `d3.transition` and `transition.attrTween`, interpolating arc geometries and label transformations in 750-millisecond sequences. The example demonstrates the modern D3 API style, including the `join` method for efficient path and text element creation from hierarchical data.

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