π Public
Viewing a saved revision (read-only)
6965838313b74e5589331cdfe177bfd6
D3 v5 Zoomable Sunburst
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 descriptionMike 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