Skip to main content
SimilarExport ZIP
100%

Fork of D3 v5 Zoomable Sunburst

✓ Published0🌍 Public
LLiml
Last edited Apr 2, 2024
Created on Apr 2, 2024

A zoomable sunburst visualization displays hierarchical data from a flare.json dataset, with arcs sized by numeric values and colored by top-level category. Clicking a node zooms to focus on that subtree, using smooth 750-millisecond transitions. The code builds the hierarchy with `d3.hierarchy` and `d3.partition`, renders arcs via `d3.arc`, and animates using `transition.attrTween` with interpolated angular coordinates. Labels rotate radially, and a central circle resets the view when clicked.

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

A zoomable sunburst visualization displays the hierarchical Flare dataset as concentric arcs, with clickable parent nodes that smoothly re-scale the layout for detailed exploration. Built with D3 v5, the code uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to render SVG paths, while `transition.attrTween` animates arc geometry and label rotations over 750ms. Colors are assigned via `d3.scaleOrdinal` with an interpolated rainbow palette, and node tooltips show ancestor paths and formatted values.

CChristianABeier
96% match
Loading thumbnail…

Fork of Fork of D3 v5 Zoomable Sunburst

A zoomable sunburst visualization displays the hierarchical Flare dataset, showing the relative sizes of categories and subcategories through concentric ring segments. Clicking a node smoothly animates and re-scales the chart to focus on that branch, with the central circle resetting the view. Built with D3 v5, it uses `d3.partition`, `d3.hierarchy`, and `d3.arc` for layout and rendering, while `transition.attrTween` and `d3.interpolate` drive the animated transitions between zoom states. Color mapping uses `d3.scaleOrdinal` with `d3.interpolateRainbow`.

DDeclan Naughton
96% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst chart visualizes hierarchical data from the Observable Flare dataset, with each arc representing a node and its size proportional to its value. Users click on arcs to zoom into that subtree, triggering a smooth 750ms animation that repositions and rescales all visible elements. The visualization is built with D3 v5, using `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute the layout, while color encoding is derived from a rainbow interpolator applied to top-level branches. Transitions employ `transition.attrTween` with an interpolator to animate arc paths and labels during zoom interactions.

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

Fork of D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes a hierarchical dataset representing the Flare visualization toolkit, using an SVG rendering with animated transitions powered by D3 v5. The visualization shows the hierarchical structure as a radial layout, with arcs partitioned by value and colored by top-level category. Clicking a node zooms in to expand that subtree, while clicking the center circle returns to the root. The code uses `d3.partition`, `d3.hierarchy`, `d3.arc`, and `transition.attrTween` to animate both the arcs and their labels, with data loaded from an Observable standard library module.

SStuartSutherland
95% 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
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 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