Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3 v5 Zoomable Sunburst

Public visualization

D3 v5 Zoomable Sunburst

0 stars1🌍 Public
MManav Mehra
Last edited Jan 21, 2020
Created on Jan 21, 2020

This D3 v5 zoomable sunburst visualizes the hierarchical structure of the Flare codebase, showing class relationships and their relative sizes. Users click arcs to zoom in and out, with an animated transition of 750ms duration. The visualization uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute the layout, with color encoding applied via `d3.scaleOrdinal` and `d3.interpolateRainbow`. Rendering is done through SVG paths and text elements, with transitions managed by `transition.attrTween` and `d3.interpolate` for smooth angular and radial adjustments.

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