Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of D3 v5 Zoomable Sunburst

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

This zoomable sunburst visualizes the hierarchical flare dataset, showing nested categories as concentric arcs whose angular width encodes value. Clicking an arc zooms into that subtree with a smooth 750ms transition, while a central circle returns to the root. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute layout and geometry, with `transition.attrTween` animating arc paths and label rotations. The data loads from the `@observablehq/flare` module via the Observable runtime and renders as SVG with a rainbow color scale.

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 visualizes hierarchical data from the Observable `@observablehq/flare` dataset, showing the flare library’s package structure with color-coded arcs and labels. Clicking a node zooms into that subtree with a smooth 750ms transition, adjusting arc positions and label rotations via `d3.transition` and `tween` interpolation. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, `d3.arc`, and a sequential `d3.scaleOrdinal` with interpolated rainbow colors. The SVG renders all nodes, hiding non-visible arcs and labels through opacity filters.

Aape-ape-ape
96% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst chart visualizes hierarchical data from the `@observablehq/flare` dataset, showing nested categories as colored arcs that can be clicked to zoom into sub-hierarchies. Built with D3 v5 and rendered as SVG, the visualization uses `d3.partition`, `d3.hierarchy`, and `d3.arc` to compute layout geometry, with `d3.scaleOrdinal` and `d3.interpolateRainbow` for color mapping. Clicking an arc triggers a smooth 750ms transition via `transition.attrTween` that interpolates angular and radial coordinates, while labels rotate and fade based on visibility thresholds. Ancestor tooltips appear via appended `title` elements.

AAliceBradbury
95% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes the hierarchical Flare dataset, showing the relative sizes of categories and subcategories in a radial layout. Users click on arcs to zoom into deeper levels, with smooth animated transitions between views. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute the layout, while `d3.interpolate` and `transition.attrTween` animate arc paths and label positions. The color scale maps top-level categories using `d3.scaleOrdinal` and `d3.interpolateRainbow`.

RRockkmr
95% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst visualization displays the hierarchical flare dataset, using arc segments sized by value and colored by top-level category. Clicking a segment zooms into that subtree, with smooth animated transitions reshaping all arcs and labels. Built with D3 v5, the example uses `d3.hierarchy`, `d3.partition`, `d3.arc`, and `d3.interpolate` to drive the SVG rendering and 750ms transition animations. The data is loaded via the Observable standard library's `require` function.

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

Fork of D3 v5 Zoomable Sunburst v1

This interactive sunburst diagram visualizes a hierarchical dataset through nested, color-coded arcs that zoom and pan with click interactions. Built with D3 v5, it uses `d3.hierarchy` and `d3.partition` to compute layout, while `d3.arc` generates each segment. Transitions animate via `transition.attrTween` and interpolated arc paths, with labels rotating and fading based on visibility criteria. The data originates from the `@observablehq/flare` package, rendered as SVG with responsive scaling.

OOwer
95% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes the hierarchical structure of the Flare dataset, displaying nested arcs whose size and color encode node values and category. Users click any arc to zoom into that subtree, with smooth 750-millisecond transitions animating arc paths and labels via `d3.transition` and `transition.attrTween`. The code uses D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute and render the SVG layout, while a rainbow color scale distinguishes top-level branches. Data loads asynchronously from the Observable Flare module using `observablehq/stdlib`.

TTravy Trav
94% 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
94% match