Skip to main content
SimilarExport ZIP
100%

Fork of D3 v5 Zoomable Sunburst

✓ Published0🌍 Public
FFDASSO
Last edited Jun 21, 2021
Created on Jun 21, 2021

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.

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 interactive sunburst visualization displays the hierarchical structure of the Flare dataset, where each arc segment represents a node and its angular width encodes the node's value. Clicking a segment zooms in to show that node as the new root, with smooth animated transitions updating arcs and labels. Built with D3 v5, the visualization uses `d3.hierarchy`, `d3.partition`, and `d3.arc` for layout, while `transition.attrTween` animates the changing arc paths during zoom. Color is assigned per top-level category using a rainbow scale.

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

Fork of D3 v5 Zoomable Sunburst

This zoomable sunburst chart visualizes the hierarchical flare dataset using D3 v5. The visualization partitions data into a radial layout, with arcs representing nodes and their sizes proportional to values. Clicking an arc transitions the view to zoom into that node, re-scaling the partition layout and updating arc paths and labels. The code uses d3.hierarchy, d3.partition, and d3.arc for the layout and rendering, with d3.transition and attrTween animating the zoom. Colors are assigned via d3.scaleOrdinal with an interpolateRainbow range, and SVG text labels rotate and reposition dynamically.

SShdnShmli
96% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst visualizes the hierarchical structure of the Flare dataset, with each arc segment representing a data category and its size proportional to value. Clicking an arc zooms in to make that node the new root, animating the repositioning of all visible arcs and labels. Built with D3 v5, it uses `d3.partition`, `d3.hierarchy`, and `d3.arc` to compute and draw the layout, while `transition.attrTween` smoothly interpolates arc geometry during zoom. The visualization renders in SVG and applies a rainbow color scale based on top-level categories.

Jjimmy.fisher@member.mensa.org
96% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst diagram visualizes the hierarchical Flare dataset, showing the relative sizes of its branches and leaves through concentric, angle-based arcs. Clicking an arc zooms in to display that node as the new root, with a smooth 750-millisecond transition animating the arcs and labels via `d3.arc` and `transition.attrTween`. The chart uses D3 v5's `d3.hierarchy`, `d3.partition`, `d3.scaleOrdinal`, and a quantized rainbow color scale, rendering as SVG. Labels rotate and flip to maintain readability, and center-clicking returns to the previous level.

Bblueyjuice
96% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst visualization displays the hierarchical structure of the Flare dataset, with each arc’s size proportional to its value. Clicking a slice zooms in to reveal its children, using D3 v5’s `d3.partition`, `d3.hierarchy`, and `d3.arc` for layout and rendering. Animated transitions via `transition.attrTween` and `d3.interpolate` smoothly update arc positions and labels, while colors are assigned using `d3.scaleOrdinal` and `d3.interpolateRainbow`. The visualization renders as SVG.

BBrittany Harden
96% match
Loading thumbnail…

Fork of Fork of Fork of Fork of D3 v5 Zoomable Sunburst

This zoomable sunburst diagram visualizes the hierarchical structure of the Flare data set, using nested arcs to represent each node's size and depth. Users click an arc to re-center the visualization on that subtree, with a smooth animation transitioning the layout. Built with D3 v5, the code uses `d3.partition`, `d3.arc`, and custom transition logic via `transition.attrTween` to smoothly interpolate arc geometry and label positions. The visualization renders as SVG with interactivity driven by click events on the arcs and a central circle.

Bblueyjuice
96% match