Skip to main content
SimilarExport ZIP
100%

D3 v5 Zoomable Sunburst

✓ Published1🌍 Public
Ssalsami
Last edited Jun 13, 2019
Created on Jun 13, 2019

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.

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

D3 v5 Zoomable Sunburst

A zoomable sunburst diagram displays the hierarchical structure of the Flare dataset, with nodes sized by value and colored by top-level category. Clicking a ring zooms into that subtree while decreasing visible depth. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` for layout and rendering, with transitions via `transition.attrTween` to animate arc geometry and labels. The SVG visualization imports data through the Observable stdlib and includes interactive hover tooltips.

MMohamed-Khchiou
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
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