D3 v5 Zoomable Sunburst

100%

D3 v5 Zoomable Sunburst

✓ Published1🌍 Public

Last edited Apr 8, 2019

Created on Apr 8, 2019

This interactive zoomable sunburst displays hierarchical data from a JSON file, showing nested categories and values. The visualization updates its arcs and labels with smooth, 750-millisecond transitions, allowing users to click any arc to zoom in and focus on a sub-branch. Built with D3 v5, it uses the `d3.partition` layout, `d3.arc` for geometry, and `d3.scaleOrdinal` with `d3.interpolateRainbow` for color coding. The code employs `transition.attrTween` for animated path and label updates, with SVG rendering and hover tooltips showing the full path and value.

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

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualization displays hierarchical data from a JSON file using a radial partition layout. Clicking any arc smoothly zooms into that subtree, while clicking the center circle returns to the root. The visualization uses D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc` APIs, with color mapping via `d3.scaleOrdinal` and animation through `transition.attrTween`. SVG rendering with interactive transitions highlights the relationships between nested data categories.

Llucaele

93% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive sunburst visualization displays a hierarchical dataset from the Observable “flare” library. The circular treemap partitions data by category and subcategory, with each arc’s size reflecting the value. Clicking an arc smoothly zooms to that node, re-centering the layout and fading out unrelated segments, using `d3.hierarchy`, `d3.partition`, and `d3.arc` for geometry and `transition.attrTween` for animation. The SVG output is styled with `d3.scaleOrdinal` and `d3.interpolateRainbow` for color, while labels and tooltips are generated via D3 selections.

Ccochis

93% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

A zoomable sunburst chart displays hierarchical data from the flare.json dataset, showing nested categories as concentric arcs. Users click a segment to zoom into that branch, with smooth animated transitions. Built with D3 v5, the visualization uses SVG paths and the d3.partition layout, d3.arc for arc geometry, and d3.transition with attrTween to animate between states. Colors derive from a scaleOrdinal with an interpolateRainbow palette.

BBhavyatulasi

92% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst chart displays hierarchical data as concentric arcs, where clicking a segment zooms in to show its children while the central circle returns to the root. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to render the SVG layout, with `transition.attrTween` animating arc positions and label transforms. The visualization loads the flare dataset via Observable’s stdlib and applies a rainbow color scale based on top-level categories.

Nnrcopeland

92% 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

92% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes the hierarchical structure of the Flare dataset, showing nested categories as concentric arcs. Clicking an arc zooms into that subtree, smoothly animating the radial layout over two seconds. Built with D3 v5, it uses `d3.partition`, `d3.hierarchy`, and `d3.arc` to compute geometry, while `d3.interpolate` and `transition.attrTween` animate the paths and labels. Color assignment uses `d3.scaleOrdinal` with `d3.interpolateRainbow`. The visualization renders as SVG, with tooltips displaying the full path and formatted values.

Aandrewomalley

92% 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

92% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive sunburst chart visualizes a hierarchical taxonomy, allowing users to click on any arc to zoom into that branch and explore its nested categories. Each ring segment represents a node, with size encoding the accumulated value of its descendants. Built with D3 v5, the visualization uses `d3.partition`, `d3.hierarchy`, and `d3.arc` to compute and draw the layout, while a `transition.attrTween` smoothly animates the arcs and labels during zoom transitions. The SVG rendering and color scales are applied directly through D3 selections.

AAdam Detrick

92% match