Skip to main content
SimilarExport ZIP
100%

D3 v5 Zoomable Sunburst

✓ Published2🌍 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

<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

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 v5 Zoomable Sunburst

A zoomable sunburst visualization displays hierarchical data with a fictional dataset of restaurant categories across six North American cities. Users click arcs to zoom and transition between hierarchy levels, with smooth 750ms animated rotations and resizing. The example uses D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute the layout, with `transition.attrTween` handling the interpolation between view states. Labels and arc opacity dynamically adjust based on visibility. Data is loaded from the `@observablehq/flare` module via the Observable standard library in vanilla JavaScript.

RRashid Iqbal
94% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes the hierarchical Flare dataset, showing the relative sizes of categories and subcategories as concentric arcs that expand and contract with animation on click. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute the layout, while transitions via `transition.attrTween` animate changes between zoom levels. Color is assigned using `d3.scaleOrdinal` with an interpolated rainbow palette, and the data is loaded asynchronously via the Observable `@observablehq/flare` module.

Ssyahidibnoe
93% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes the hierarchical Flare dataset, showing the relative sizes of categories and subcategories as concentric arcs that expand and contract with animation on click. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute the layout, while transitions via `transition.attrTween` animate changes between zoom levels. Color is assigned using `d3.scaleOrdinal` with an interpolated rainbow palette, and the data is loaded asynchronously via the Observable `@observablehq/flare` module.

Ssyahidibnoe
93% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes the structure of a hierarchical dataset, using nested arcs to represent the flare data from Observable’s `@observablehq/flare` library. Each level of the hierarchy is depicted as a ring, with arc segments sized proportionally to the data values. Clicking on a segment triggers an animated transition using `transition.attrTween` and `d3.interpolate` to smoothly re-center the view on that node, showing its children in greater detail. The visualization is rendered with SVG inside a circular partition layout, and the code uses `d3.hierarchy`, `d3.partition`, and `d3.scaleOrdinal` with the `interpolateRainbow` color scheme to distinguish top-level categories.

JJamie919
93% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualization displays hierarchical data from the @observablehq/flare dataset, with arcs sized by value and colored by top-level category. Clicking a slice zooms to reveal its children with smooth transitions. Built with D3 v5, it uses the `d3.partition` layout, `d3.hierarchy` for data nesting, `d3.arc` for path generation, and `transition.attrTween` to interpolate arc geometry and label positions during zoom animations.

Aanyazm
93% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst chart visualizes hierarchical data, displaying restaurant categories (fast food, pizza, Mexican, etc.) across multiple cities, with each arc segment representing a portion of the total. The visualization uses D3 v5's hierarchical layout and partition functions to compute the arc geometry, rendering the sunburst as SVG paths with animated transitions. Clicking on a segment zooms into that subtree, using `d3.interpolate` and `transition.attrTween` to smoothly animate the arc angles and radii. The data originates from the Observable `@observablehq/flare` dataset, loaded dynamically via the Observable standard library's `require` function.

Jjessand4
92% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst chart visualizes hierarchical data, displaying nested nodes as concentric arcs with color-coded categories and interactive labels. Clicking an arc zooms into that subtree, while clicking the center circle returns to the root. The visualization uses D3 v5’s `d3.partition` layout, `d3.arc` for path generation, and `d3.transition` with `attrTween` for smooth animated updates. Data is loaded from the `@observablehq/flare` dataset via the Observable stdlib, which the code fetches using `require()` before rendering the SVG.

Hhirowhite
92% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualization displays the hierarchical Flare dataset, showing the relative sizes of categories and their subcomponents through concentric, color-coded arcs. Users can click on any segment to zoom into that branch, with animated transitions expanding and rotating the view around the central circle. The code uses D3 v5's `d3.hierarchy`, `d3.partition`, and custom `d3.arc` generators to draw SVG paths, while `transition.attrTween` and `d3.interpolate` handle the smooth geometric morphing between views. Data loads from the `@observablehq/flare` package via the Observable stdlib's `require` module.

MMarwanElfatrani
92% match