Skip to main content
SimilarExport ZIP
100%

Fork of D3 v5 Zoomable Sunburst

✓ Published0🌍 Public
BBrittany Harden
Last edited Dec 12, 2022
Created on Dec 12, 2022

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.

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

Fork of Fork of D3 v5 Zoomable Sunburst

This visualization presents a zoomable sunburst of the Flare dataset, showing a hierarchical file structure as multi-level arcs. Rendered with SVG and animated transitions, users click any segment to make it the new root, smoothly redrawing the tree with D3 v5’s updated partition layout. The code uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute geometry, while `transition.attrTween` and `d3.interpolate` animate the arcs and labels. Colors derive from `d3.scaleOrdinal` with an interpolated rainbow range, and the data loads asynchronously from the Observable Flare library.

Bblueyjuice
96% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This zoomable sunburst visualization displays a hierarchical dataset, the Flare software package, with each arc segment sized proportionally to its value. Users click any arc to zoom in and explore nested categories, while a central circle resets the view. Built with D3 v7, it uses `d3.partition`, `d3.hierarchy`, and `d3.arc` to compute the layout, with smooth transitions animated via `transition.attrTween` and `transition.tween`. The color scale uses `d3.scaleOrdinal` and `d3.interpolateRainbow` to distinguish top-level branches.

KKamal Bahadur Rana
96% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst chart visualizes the hierarchical structure of the Flare dataset, showing relative sizes of categories and subcategories as concentric arcs. Users click any segment to zoom into that branch, with smooth 750ms transitions animating the radial layout. Built with D3 v5, the visualization uses `d3.partition` for layout, `d3.arc` for path generation, and `d3.interpolateRainbow` for color coding. SVG rendering with `transition.attrTween` smoothly updates arc geometry and label positions during zoom interactions.

TTom Ellis
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 D3 v5 Zoomable Sunburst

This interactive zoomable sunburst chart visualizes the hierarchical structure of the Flare dataset, representing files and their sizes as concentric arcs. Built with D3 v5, it uses `d3.partition`, `d3.arc`, and `d3.hierarchy` to lay out the radial tree, with animation handled by `transition.attrTween` for smooth zooming on click. The visualization is rendered as SVG, with fill-opacity and label visibility responding to the current zoom level, and colors assigned via `d3.scaleOrdinal` with an interpolated rainbow palette.

Vvorp-portal
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
95% match