Skip to main content
SimilarExport ZIP
100%

D3 v5 Zoomable Sunburst

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

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.

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

A zoomable sunburst diagram displays hierarchical data from the Flare dataset, using nested arcs to show relative values. The D3 v5 example implements interactive click-to-zoom transitions with `d3.partition`, `d3.arc`, and `d3.hierarchy`. SVG elements and animated `transition.attrTween` calls adjust arc angles and radii, while color encoding and labels update dynamically based on the visible depth.

Ssalsami
94% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

A zoomable sunburst diagram displays hierarchical data from the Flare dataset, using nested arcs to show relative values. The D3 v5 example implements interactive click-to-zoom transitions with `d3.partition`, `d3.arc`, and `d3.hierarchy`. SVG elements and animated `transition.attrTween` calls adjust arc angles and radii, while color encoding and labels update dynamically based on the visible depth.

Ssalsami
94% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

A zoomable sunburst diagram displays hierarchical data from the Flare dataset, using nested arcs to show relative values. The D3 v5 example implements interactive click-to-zoom transitions with `d3.partition`, `d3.arc`, and `d3.hierarchy`. SVG elements and animated `transition.attrTween` calls adjust arc angles and radii, while color encoding and labels update dynamically based on the visible depth.

Ssalsami
94% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

A zoomable sunburst diagram displays hierarchical data from the Flare dataset, using nested arcs to show relative values. The D3 v5 example implements interactive click-to-zoom transitions with `d3.partition`, `d3.arc`, and `d3.hierarchy`. SVG elements and animated `transition.attrTween` calls adjust arc angles and radii, while color encoding and labels update dynamically based on the visible depth.

Ssalsami
94% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

A zoomable sunburst diagram displays hierarchical data from the Flare dataset, using nested arcs to show relative values. The D3 v5 example implements interactive click-to-zoom transitions with `d3.partition`, `d3.arc`, and `d3.hierarchy`. SVG elements and animated `transition.attrTween` calls adjust arc angles and radii, while color encoding and labels update dynamically based on the visible depth.

Ssalsami
94% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive sunburst diagram visualizes the hierarchical structure of the Flare dataset, allowing users to click on any segment to zoom in and explore nested categories. Built with D3 v5, the visualization uses an arc partition layout with a radial layout, where the inner ring represents the root and outer rings show deeper levels. The code leverages `d3.partition`, `d3.hierarchy`, and `d3.arc` for geometry, and employs `d3.interpolateRainbow` for color coding. Animations are handled via `d3.transition` and `transition.attrTween`, smoothly interpolating arc positions and labels during zoom transitions.

BBhavyatulasi
94% 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 the hierarchical flare dataset, encoding each node’s value as the arc’s angular width. Clicking a slice zooms into that subtree, dynamically rescaling the partition layout and re-centering the view. Built with D3 v5 and SVG, the example uses `d3.partition`, `d3.hierarchy`, and `d3.interpolate` to animate transitions, reading hierarchical data from a CSV file with id and value fields. The rendered output includes a breadcrumb trail showing the current path.

Tthanhtrant219
94% match