Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3 v5 Zoomable Sunburst

Public visualization

D3 v5 Zoomable Sunburst

0 stars0🌍 Public
Ssupermoose
Last edited Aug 24, 2019
Created on Aug 24, 2019

This zoomable sunburst visualizes the hierarchical structure of the Flare software package, with each ring segment representing a directory or file and its area proportional to a numeric value. It uses D3 v5’s `d3.partition` layout and `d3.arc` generator to draw SVG arcs, with click interactions and smooth transitions (`transition.attrTween`) that recenter and rescale the hierarchy. A color scale from `d3.interpolateRainbow` distinguishes top-level categories, while labels rotate and fade based on visibility. Data loads asynchronously via the Observable standard library’s `require` function.

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

Comments

Sign in to join the discussion.

MIT Licensed