Skip to main content
SimilarExport ZIP
100%

D3 v5 Zoomable Sunburst

✓ Published0🌍 Public
Aanyazm
Last edited Mar 12, 2020
Created on Mar 12, 2020

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.

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

The D3 v5 Zoomable Sunburst shows a hierarchical dataset of the Flare visualization library (loaded via the @observablehq/flare module) as a multi-ring sunburst chart. Clicking an arc zooms in to reveal its children, with smooth transitions applied to the arcs and labels via `transition.attrTween` and `d3.interpolate`. The visualization is rendered as SVG, uses `d3.hierarchy` and `d3.partition` for layout, and `d3.scaleOrdinal` with a rainbow palette for coloring top-level categories.

AAlex Levitt
95% 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
95% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

A zoomable sunburst chart displays hierarchical data as concentric arcs, where clicking a segment zooms in to show it as the new root. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute and render the layout, with a color scale based on `d3.interpolateRainbow`. Clicking triggers a smooth 750ms transition via `transition.attrTween`, animating arc paths and labels. The hierarchy comes from the Observable `@observablehq/flare` dataset, rendered as SVG with interactive hover tooltips.

Qqazwsxedcrfvtgbyhnujmikol1234
94% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This D3 v5 zoomable sunburst visualizes hierarchical data from the Observable @observablehq/flare dataset. Users click arcs to zoom into a category, triggering animated transitions that recompute arc angles and radii via `d3.partition` and `d3.hierarchy`. The code uses `d3.arc`, `d3.scaleOrdinal`, and `d3.interpolateRainbow` for coloring, with SVG paths and text labels rendering the radial layout. `transition.attrTween` animates the shape and position of arcs and labels over 750 milliseconds, while `d3.format` displays numeric values.

Bbeca8675
94% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

A zoomable sunburst diagram displays hierarchical data as concentric arcs, with click interactions drilling into nested levels and animating transitions via `d3.transition` and `attrTween`. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to render SVG paths, with `d3.scaleOrdinal` and `d3.interpolateRainbow` for color encoding. Data comes from the `@observablehq/flare` module requiring the Observable standard library. Labels rotate and fade based on arc visibility, and the visualization loads data asynchronously using `d3.csv` fetches.

ZZhou180
94% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

A zoomable sunburst visualizes the hierarchical structure of the Flare dataset, with arcs sized by value and colored by top-level category. Clicking a node animates a zoom to that branch of the hierarchy. The visualization uses D3 v5’s `d3.partition`, `d3.hierarchy`, and `d3.arc` to compute layout and paths, with `transition.attrTween` for smooth animated updates. Data originates from the `@observablehq/flare` module, rendered as SVG with rotating labels.

Rremyapk
94% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes the hierarchical structure of the Flare dataset, displaying nested arcs whose size and color encode node values and category. Users click any arc to zoom into that subtree, with smooth 750-millisecond transitions animating arc paths and labels via `d3.transition` and `transition.attrTween`. The code uses D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute and render the SVG layout, while a rainbow color scale distinguishes top-level branches. Data loads asynchronously from the Observable Flare module using `observablehq/stdlib`.

TTravy Trav
94% 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
94% match