Skip to main content
SimilarExport ZIP
100%

Fork of D3 v5 Zoomable Sunburst

✓ Published0🌍 Public
Bblueyjuice
Last edited Dec 1, 2021
Created on Dec 1, 2021

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.

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 diagram visualizes the hierarchical Flare dataset, showing the relative sizes of categories and subcategories through nested arcs. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to render the SVG, with an ordinal color scale based on `d3.interpolateRainbow`. Clicking a node triggers smooth animated transitions via `transition.attrTween` and `d3.interpolate`, rescaling arcs and labels to zoom into the selected branch. Labels rotate and reposition based on arc angles, and tooltips via `title` show full paths and numeric values.

Kksookdeo
96% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst diagram visualizes the hierarchical Flare dataset, showing the relative sizes of categories and subcategories through radial arcs. Users can click on any arc to zoom into that portion of the hierarchy, with smooth animated transitions repositioning the layout. The visualization is built with D3 v5, using `d3.partition` to compute the layout, `d3.arc` for arc paths, and `transition.attrTween` to animate changes between states. Colors are assigned via `d3.scaleOrdinal` with an interpolated rainbow palette, and labels rotate to remain readable at various depths.

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

Fork of Fork of D3 v5 Zoomable Sunburst

This interactive sunburst diagram visualizes the hierarchical structure of the Flare dataset, with each ring segment representing a node whose angular width and radial extent encode its value. Clicking any segment smoothly zooms and re-centers the view on that subtree, with labels and arc opacity transitioning via `transition.attrTween` and `d3.interpolate`. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute and render the SVG paths, while a custom color scale maps top-level categories to a rainbow palette.

Bblueyjuice
96% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst diagram visualizes the hierarchical Flare dataset, displaying the relative sizes of categories and subcategories as concentric arcs. Users can click on any arc to zoom into that branch, with smooth animated transitions between views. The visualization uses D3 v5’s `d3.partition` layout and `d3.arc` generator to compute arc geometry, while `transition.attrTween` and `d3.interpolate` animate changes. A categorical color scale assigns hues to top-level nodes, and labels rotate and fade based on arc visibility thresholds. The data is loaded from an Observable-hosted JSON module.

RRene
95% 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
95% 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
95% match