Skip to main content
SimilarExport ZIP
100%

D3 v5 Zoomable Sunburst

✓ Published1🌍 Public
Bbeca8675
Last edited Apr 30, 2020
Created on Apr 20, 2020

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.

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

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…

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

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
94% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This D3 v5 zoomable sunburst visualizes a hierarchical dataset, using colored arcs to represent nested categories from the flare data loaded via the Observable standard library. Clicking an arc animates a zoom into that node, with transitions driven by `d3.arc` interpolation and `transition.attrTween` to smoothly reshape arcs and labels. The SVG rendering uses `d3.partition`, `d3.hierarchy`, and ordinal color scales, with visibility logic filtering arcs and text based on computed angular and radial bounds.

SShivrangi
94% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

An interactive zoomable sunburst visualization displays hierarchical data from the Observable Flare dataset, where clicking on an arc zooms into that subtree. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to render SVG paths with animated transitions via `transition.attrTween`. Color is assigned by a `d3.scaleOrdinal` interpolating rainbow hues across top-level children, while labels rotate and fade based on arc visibility. Clicking the center circle returns to the root level.

Ssyahidibnoe
94% 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 interactive sunburst chart visualizes hierarchical data from the Observable `@observablehq/flare` dataset. The visualization displays nested segments as arcs, with each ring representing a level in the hierarchy. Clicking any segment zooms into that part of the hierarchy, making it the new root. The code uses the `d3.arc()` generator (with start/end angles and inner/outer radii) to draw paths, and `d3.partition()` to compute the layout. Interactivity relies on `transition.attrTween` (interpolating between arc geometries over 750ms) and `d3.interpolate` to smoothly animate data positions. Color mapping uses `d3.scaleOrdinal()` with a quantized rainbow interpolator, while labels are rotated and positioned via `labelTransform()`. The SVG rendering is driven by D3 v5's selection and join APIs.

RRenan Barbosa
94% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This example shows a zoomable sunburst visualization of the Flare software package’s class hierarchy, with arc size encoding class value and color assigned by top-level category. Clicking an arc zooms into that subtree, animating the radial layout transitions. The code uses D3 v5’s `d3.partition`, `d3.hierarchy`, `d3.scaleOrdinal`, `d3.interpolateRainbow`, and `d3.arc`, with transitions driven by `transition.attrTween` and `tween` on path data. Data loads via the Observable stdlib `require` for `@observablehq/flare`. Rendering uses SVG paths and text labels.

FfaRriaN
94% match