Skip to main content
SimilarExport ZIP
100%

D3 v5 Zoomable Sunburst

✓ Published0🌍 Public
Cchungmin-yu
Last edited Nov 28, 2020
Created on Nov 28, 2020

A zoomable sunburst visualizes the hierarchical Flare dataset, where clicking a node zooms the radial layout to focus on that subtree, recentering and rescaling arcs with animated transitions. Rendered as SVG, it uses D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute the layout, with colors assigned via `d3.scaleOrdinal` and `d3.interpolateRainbow`. Interactive updates rely on `transition.attrTween` to interpolate arc geometry and label positions over 750 milliseconds.

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 Flare dataset, showing relative sizes of its categories through nested arcs. Clicking a node smoothly zooms into its subtree, while a center circle returns to the root. The example uses D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute layout and shapes, with `transition.attrTween` and `d3.interpolate` animating arc positions. Labels rotate and fade based on visibility, and the color scale applies `d3.interpolateRainbow` per top-level branch, rendered as an SVG with user interaction.

TTravy Trav
96% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

The zoomable sunburst visualizes hierarchical data from the Observable Flare dataset as concentric arcs, where clicking a node recenters and rescales the view on that subtree. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` for layout and rendering, with smooth 750ms transitions driven by `transition.attrTween` and interpolation of arc geometry. Color is assigned per top-level branch via a rainbow ordinal scale, and labels rotate radially with visibility filtering.

VVishnu Ch
95% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes the hierarchical flare dataset, showing nested categories as concentric arcs. Clicking a node smoothly zooms to focus on that subtree, with animated transitions of arc sizes and label positions. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to render SVG paths, while `d3.interpolate` and `transition.attrTween` animate the morphing geometry and opacity changes during navigation.

Tthanhtrant219
94% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst chart visualizes hierarchical data from the flare dataset. Clicking a node zooms into that subtree, while a central circle returns to the parent level. The chart uses D3 v5’s `d3.partition` layout and `d3.hierarchy`, rendering arcs as SVG paths with `d3.arc`. Interactive transitions animate via `transition.attrTween`, updating arc geometry and label rotations with color scales from `d3.interpolateRainbow`.

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

D3 v5 Zoomable Sunburst

This example shows a zoomable sunburst visualization of the Flare software hierarchy, rendering hierarchical data as concentric arcs with color-coded categories. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute and draw the layout in SVG. Clicking an arc animates the view via `transition.attrTween`, interpolating arc angles and radii to zoom into the selected node, while labels fade based on visibility using `d3.interpolate`. Data loads from a remote JSON file.

AAlex Levitt
94% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes the hierarchical structure of the Flare dataset, using colored arcs to represent categories and nested segments for subcategories. Clicking a segment smoothly zooms into that branch, animating the radial layout via `d3.transition` and `attrTween`. Rendered with SVG, it leverages `d3.partition`, `d3.hierarchy`, and `d3.arc` to compute the layout, while `d3.scaleOrdinal` and `d3.interpolateRainbow` drive the color scheme, with labels and tooltips (`<title>`) providing details on demand.

55FEKO
94% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

A zoomable sunburst diagram visualizes the hierarchical flare dataset as concentric arcs, where clicking a segment zooms in to reveal its children. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` for layout, with `d3.interpolateRainbow` for color. Animated transitions via `transition.attrTween` and a `tween` function update arc geometry and label rotations. The SVG rendering includes hover tooltips showing ancestor paths and values, with a central circle to return to the root.

MMarwanElfatrani
93% match