Skip to main content
100%

Fork of D3 v5 Zoomable Sunburst

✓ Published0🌍 Public
Ssofiaboteva
Last edited May 17, 2022
Created on May 17, 2022

This visualization shows the Flare software package’s class hierarchy as a zoomable sunburst. The circular radial layout displays hierarchical partitions, where each ring represents a depth level and each arc’s size corresponds to the node’s value. Clicking on any arc animates the view, re-centering and rescaling the chart around that node, while a circle at the center returns to the root. The code uses d3.hierarchy, d3.partition, d3.arc, and transition.attrTween on SVG paths, with data loaded via the @observablehq/flare module and color scales built with d3.scaleOrdinal and d3.interpolateRainbow.

AI-generated description

Mike Bostock's D3 Zoomable Sunburst example

<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

MIT Licensed

Similar vizzes