Skip to main content
SimilarExport ZIP
100%

Fork of D3 v5 Zoomable Sunburst

✓ Published0🌍 Public
Aape-ape-ape
Last edited Apr 12, 2021
Created on Apr 12, 2021

This zoomable sunburst chart visualizes the hierarchical structure of the Flare data, with each ring representing a level and the arc angles proportional to leaf values. The visualization uses D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.scaleOrdinal` for layout and coloring, plus `transition.attrTween` for animated zooming and panning. The clickable arcs and labels update via interpolated transitions on the SVG paths and text elements, showing node names and values from the flare dataset on hover.

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…

Fork of D3 v5 Zoomable Sunburst

This zoomable sunburst chart visualizes the hierarchical flare dataset, where each ring segment represents a category and its size reflects the summed value of its children. Clicking an arc smoothly zooms into that node, re-scaling the partition layout and labels. Built with D3 v5, it uses `d3.partition`, `d3.hierarchy`, `d3.arc`, and `d3.interpolate` within a `transition.attrTween` animation, rendering as SVG with zoom transitions triggered by click events. The flare data is loaded via the Observable standard library’s `require` method.

JJaeyong Lee
96% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This zoomable sunburst visualization displays the hierarchical structure of the Flare dataset, with each ring segment representing a category or subcategory sized by value. Clicking any arc zooms into that node, smoothly animating the layout so the selected subtree expands to fill the view. The chart is built with D3 v5 using the `d3.partition` layout and custom `d3.arc` paths, rendered as SVG with transitions driven by `transition.attrTween` and `d3.interpolate`. Labels rotate and fade based on visibility thresholds, while a central circle resets the view to the root.

MMaeva B
95% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

A zoomable sunburst chart displays the hierarchical structure of the Flare dataset as a radial layout, with each ring segment representing a category and its subcategories. The visualization animates transitions when a user clicks a segment, zooming into that node and its descendants while keeping the surrounding context visible. Built with D3 v5, the chart uses `d3.hierarchy`, `d3.partition`, and a custom `d3.arc` generator to compute the geometry, while `transition.attrTween` smoothly interpolates the arc paths and label transforms during the 750ms zoom animation. The dataset is loaded from an Observable library and rendered as an SVG.

Ddfeldhaus
95% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This sunburst visualization displays the hierarchical structure of the Flare data set, with each arc representing a node and its size proportional to the node’s value. Clicking an arc zooms in to show that node’s children, while clicking the center circle returns to the previous level. The visualization uses D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc` APIs, with smooth transitions animated via `transition.attrTween`. Color is assigned using `d3.scaleOrdinal` with a rainbow palette, and the SVG is rendered from the `flare.json` data file.

Hhirowhite
95% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This sunburst chart visualizes the hierarchical structure of the Flare dataset, with arcs representing nodes sized by value and color-coded by top-level branch. Clicking an arc zooms and centers the view on that node, while a click on the center circle returns to the root. Built with D3 v5, it uses `d3.partition`, `d3.hierarchy`, and `d3.arc` for layout, with animated transitions driven by `transition.attrTween` and `d3.interpolate` to smoothly update arc paths and labels during zoom.

FFDASSO
95% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst visualization displays the hierarchical structure of the Flare dataset, with each ring segment sized by value. Clicking a node zooms in to reveal its children, while the central circle returns to the root view. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, `d3.arc`, and animated transitions via `transition.attrTween` to smoothly interpolate arc positions. Colors derive from a `d3.scaleOrdinal` over the rainbow palette, and labels rotate with their arcs.

Iillyyo
95% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

A zoomable sunburst diagram displays the hierarchical structure of the Flare dataset, with each ring representing a level of hierarchy and arc length proportional to size. Clicking a sector zooms into that subtree, re-centering and re-scaling the visualization with a smooth 750-millisecond animation. Built with D3 v5, the SVG rendering uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute the layout, while `transition.attrTween` animates the path geometry and label transforms. The color scale assigns distinct hues to top-level categories based on the data's children.

PPekingWaldo
95% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

A zoomable sunburst chart visualizes the hierarchical structure of the Flare dataset, with arcs color-coded by top-level category and sized by value. Clicking a segment rotates and scales the visualization to focus on that subtree, using D3 v5 transitions and `transition.attrTween` to animate arc geometry and label positions. The chart renders with SVG, leveraging `d3.hierarchy`, `d3.partition`, and `d3.arc`, while loading data asynchronously via the Observable standard library and `require`.

Bblueyjuice
95% match