Skip to main content
SimilarExport ZIP
100%

D3 v5 Zoomable Sunburst

✓ Published0🌍 Public
MMarwanElfatrani
Last edited Jul 1, 2020
Created on Jul 1, 2020

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.

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

D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes the hierarchical structure of the Flare software class library, showing relative sizes of modules and submodules through nested arcs. Clicking a segment zooms into that branch, while the center circle returns to the root. Built with D3 v5, it uses `d3.hierarchy` and `d3.partition` to compute the layout, `d3.arc` for path geometry, and `d3.interpolateRainbow` for coloring. Animated transitions rely on `transition.attrTween` and `transition.tween` to smoothly update paths and labels during zoom.

FFrancisco Salema
94% match