Skip to main content
100%

D3 v5 Zoomable Sunburst

✓ Published0🌍 Public
Ddrmurugesh
Last edited May 28, 2019
Created on May 28, 2019

This D3 v5 zoomable sunburst chart visualizes the hierarchical structure of the Flare software project, using nested arcs where each ring represents a level in the tree and arc angles are proportional to each node's value. The example, ported from an Observable notebook, loads the data from the `@observablehq/flare` library and renders it using SVG. User interactions trigger the `clicked` function, which sets new target values for the `d3.partition()` layout and uses `g.transition().duration(750)` along with `attrTween` on the path elements to animate the zoom across its layered structure.

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