Skip to main content
SimilarExport ZIP
100%

D3 v5 Zoomable Sunburst

✓ Published1🌍 Public
Tthanhtrant219
Last edited Apr 17, 2020
Created on Apr 17, 2020

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.

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

This zoomable sunburst visualizes hierarchical data from the flare library, displaying nested categories as concentric rings where arc size encodes value. Clicking a node zooms into that subtree, with smooth transitions animated via `d3.transition` and `transition.attrTween`. The chart is built with D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc`, using SVG rendering with rainbow color scales. Labels rotate and fade based on visible arc size, and a central circle returns to the root view.

BBhaveshSolanki794
95% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes hierarchical data from the flare library, displaying nested categories as concentric rings where arc size encodes value. Clicking a node zooms into that subtree, with smooth transitions animated via `d3.transition` and `transition.attrTween`. The chart is built with D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc`, using SVG rendering with rainbow color scales. Labels rotate and fade based on visible arc size, and a central circle returns to the root view.

BBhaveshSolanki794
95% 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

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

D3 v5 Zoomable Sunburst

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.

Cchungmin-yu
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 interactive sunburst diagram displays the hierarchical flare dataset with zoomable partitions. Built with D3 v5, it uses d3.partition and d3.hierarchy to compute angular layout, with d3.arc rendering SVG paths. Clicking a slice zooms into that subtree via transition.attrTween, interpolating arc geometry and adjusting fill-opacity and label visibility. Labels rotate using SVG transforms, and the color scale uses d3.scaleOrdinal.

Tthanhtrant219
94% match