Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3 v5 Zoomable Sunburst

Public visualization

Viewing a saved revision (read-only)

6965838313b74e5589331cdfe177bfd6

D3 v5 Zoomable Sunburst

0 stars0🌍 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

  • 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