Skip to main content
SimilarExport ZIP
100%

Fork of D3 v5 Zoomable Sunburst

✓ Published0🌍 Public
KKinjal-Goyani
Last edited Oct 20, 2022
Created on Oct 20, 2022

This example visualizes a hierarchical dataset as a zoomable sunburst chart, where clicking a ring segment zooms in to show that subtree, with a central circle allowing navigation back to the root. The chart uses D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute and render the radial layout, with smooth animated transitions driven by `transition.attrTween` and `d3.interpolate`. Data is loaded asynchronously from the `@observablehq/flare` package via the Observable stdlib.

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…

Fork of D3 v5 Zoomable Sunburst

A zoomable sunburst chart displays the hierarchical structure of the Flare dataset as a radial layout, with each ring segment representing a category and its subcategories. The visualization animates transitions when a user clicks a segment, zooming into that node and its descendants while keeping the surrounding context visible. Built with D3 v5, the chart uses `d3.hierarchy`, `d3.partition`, and a custom `d3.arc` generator to compute the geometry, while `transition.attrTween` smoothly interpolates the arc paths and label transforms during the 750ms zoom animation. The dataset is loaded from an Observable library and rendered as an SVG.

Ddfeldhaus
94% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This fork of the D3 v5 Zoomable Sunburst visualizes hierarchical data as an interactive radial partition layout. Clicking a node zooms the view to focus on that node’s subtree, with smooth animated transitions between levels. The code uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute the layout, while `transition.attrTween` animates arc paths and labels. Data is loaded from the Observable `@observablehq/flare` dataset, rendered as SVG paths with color-coded top-level branches and interactive click handlers.

CChase Hall
94% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst v1

This interactive sunburst diagram visualizes a hierarchical dataset through nested, color-coded arcs that zoom and pan with click interactions. Built with D3 v5, it uses `d3.hierarchy` and `d3.partition` to compute layout, while `d3.arc` generates each segment. Transitions animate via `transition.attrTween` and interpolated arc paths, with labels rotating and fading based on visibility criteria. The data originates from the `@observablehq/flare` package, rendered as SVG with responsive scaling.

OOwer
93% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This zoomable sunburst visualization displays a hierarchical dataset from the @observablehq/flare library. Clicking on an arc zooms into that subtree, with animated transitions between views. The code uses D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.interpolate` to compute the radial layout and smooth interpolation. It renders with SVG paths and text, using a rainbow color scale and `transition.attrTween` for the animation, all orchestrated via the Observablehq stdlib.

Kkatebacon32
93% match
Loading thumbnail…

Fork of Fork of Fork of D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes the hierarchical flare dataset, showing nested categories as concentric arcs whose angular width encodes value. Clicking an arc zooms into that subtree with a smooth 750ms transition, while a central circle returns to the root. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute layout and geometry, with `transition.attrTween` animating arc paths and label rotations. The data loads from the `@observablehq/flare` module via the Observable runtime and renders as SVG with a rainbow color scale.

Bblueyjuice
93% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst chart visualizes hierarchical data from the `@observablehq/flare` dataset, showing nested categories as colored arcs that can be clicked to zoom into sub-hierarchies. Built with D3 v5 and rendered as SVG, the visualization uses `d3.partition`, `d3.hierarchy`, and `d3.arc` to compute layout geometry, with `d3.scaleOrdinal` and `d3.interpolateRainbow` for color mapping. Clicking an arc triggers a smooth 750ms transition via `transition.attrTween` that interpolates angular and radial coordinates, while labels rotate and fade based on visibility thresholds. Ancestor tooltips appear via appended `title` elements.

AAliceBradbury
93% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This zoomable sunburst chart visualizes the hierarchical flare dataset, where each ring segment represents a category and its size reflects the summed value of its children. Clicking an arc smoothly zooms into that node, re-scaling the partition layout and labels. Built with D3 v5, it uses `d3.partition`, `d3.hierarchy`, `d3.arc`, and `d3.interpolate` within a `transition.attrTween` animation, rendering as SVG with zoom transitions triggered by click events. The flare data is loaded via the Observable standard library’s `require` method.

JJaeyong Lee
93% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst visualization displays the hierarchical flare dataset, using arc segments sized by value and colored by top-level category. Clicking a segment zooms into that subtree, with smooth animated transitions reshaping all arcs and labels. Built with D3 v5, the example uses `d3.hierarchy`, `d3.partition`, `d3.arc`, and `d3.interpolate` to drive the SVG rendering and 750ms transition animations. The data is loaded via the Observable standard library's `require` function.

JJonathan
92% match