Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3 v5 Zoomable Sunburst

Public visualization

Viewing a saved revision (read-only)

00b1c16d515648b4944ccfce96edf1d8

D3 v5 Zoomable Sunburst

0 stars3🌍 Public
SSumittiwari654
Last edited Dec 26, 2019
Created on Nov 28, 2019

This zoomable sunburst visualization displays a hierarchical dataset of restaurant categories across multiple cities, using concentric rings to represent nesting levels. Built with D3 v5, it renders as SVG with animated transitions triggered by clicking any arc to zoom into that subtree. The code loads data from the `@observablehq/flare` module and applies `d3.partition` with a radial layout, while `d3.arc` and `transition.attrTween` handle the smooth path interpolations between zoom states. Color is assigned via `d3.scaleOrdinal` with an interpolated rainbow palette.

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