Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of D3 v5 Zoomable Sunburst

Public visualization

Viewing a saved revision (read-only)

46ee6e763e9f4de59f46280c7590f200

Fork of D3 v5 Zoomable Sunburst

1 star1🌍 Public
DDonald Bagwell
Last edited Feb 8, 2024
Created on Feb 8, 2024

This example presents a zoomable sunburst visualization of hierarchical data, where each ring segment represents a category and its size corresponds to a numerical value. Built with D3 v5, it uses the `d3.partition` layout to compute the angular and radial coordinates for the hierarchical structure. The visualization is rendered as SVG, with a click interaction on each arc that triggers a smooth animated zoom via `d3.transition` and `attrTween`. Node labels rotate to align with their segments. The example is an updated version of Mike Bostock's original, ported from Observable, and uses the `flare.csv` and `flare.json` datasets.

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