Viewing a saved revision (read-only)
35f60fc8d3a74763b1e8d171f3f63ec6
D3 v5 Zoomable Sunburst
This interactive sunburst chart visualizes the hierarchically structured Flare dataset, showing the relative sizes of data clusters and their nested subcategories through concentric arcs. Users click on any parent arc to zoom into that subtree and recenter the visualization, with smooth animated transitions handled by D3 transitions and `transition.attrTween`. The example is implemented in D3 v5, using `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute and render the layout, while `d3.interpolateRainbow` provides a categorical color scale. Data loads via the Observable standard library from the `@observablehq/flare` module, and all elements are drawn as SVG paths and text labels.
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