Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3 v5 Zoomable Sunburst

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

7bfe1b040e354769b479c21577cb7e83

Open

D3 v5 Zoomable Sunburst

0 stars2🌍 Public
Jjessand4
Last edited Nov 17, 2019
Created on Nov 17, 2019

This zoomable sunburst visualizes hierarchical data, showing the proportion of food categories across multiple cities. The data is loaded from the `@observablehq/flare` dataset and rendered as an SVG with animated transitions. Users can click on arcs or the central circle to zoom in and out. The code uses `d3.hierarchy`, `d3.partition`, `d3.arc`, and `d3.scaleOrdinal` with an interpolated rainbow color scheme, along with `transition.attrTween` for smooth updates.

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