Skip to main content
SimilarExport ZIP
100%

D3 v5 Zoomable Sunburst

✓ Published1🌍 Public
MMohamed-Khchiou
Last edited Feb 18, 2020
Created on Feb 18, 2020

A zoomable sunburst diagram displays the hierarchical structure of the Flare dataset, with nodes sized by value and colored by top-level category. Clicking a ring zooms into that subtree while decreasing visible depth. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` for layout and rendering, with transitions via `transition.attrTween` to animate arc geometry and labels. The SVG visualization imports data through the Observable stdlib and includes interactive hover tooltips.

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…

D3 v5 Zoomable Sunburst

A zoomable sunburst diagram displays the hierarchical structure of the Flare data set, visually encoding each category's size through the arc's angular width. The visualization is rendered as SVG via D3 v5, with the root hierarchy partition built using `d3.hierarchy`, `d3.partition`, and the `d3.arc` generator. Clicking a node triggers a smooth animation using D3's `.transition().duration(750)` with `.attrTween` to interpolate arc positions, while fill colors for top-level categories are assigned using a quantized rainbow interpolation via `d3.scaleOrdinal`.

JJESN2
95% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive sunburst diagram visualizes the hierarchical structure of the Flare dataset, where each ring segment represents a category and its size corresponds to its value. Users click a segment to zoom into that branch, re-centering the visualization and smoothly animating the arcs and labels. Built with D3 v5, the example uses `d3.hierarchy`, `d3.partition`, and a custom `d3.arc` to compute geometry, while `transition.attrTween` animates the changing path data. The color scheme assigns hues to top-level categories using `d3.scaleOrdinal` and `d3.interpolateRainbow`.

JJuan Sebastian Prieto
95% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst diagram visualizes the hierarchical structure of the Flare dataset, with nested arcs representing categories and subcategories. Clicking a node smoothly zooms and re-centers the view on that segment, while fading out irrelevant arcs and labels. Built with D3 v5, it uses `d3.partition`, `d3.hierarchy`, and `d3.arc` to compute the layout, and `transition.attrTween` for animated interpolation between states. Data loads via the Observable standard library, with SVG rendering and a rainbow color scale for top-level branches.

JJ. Matthew Pryor
95% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

A zoomable sunburst diagram displays hierarchical data from the Observable Flare dataset, with each ring segment representing a node and its value. Clicking a segment smoothly zooms and scales the visualization to focus on that subtree, using D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc`. Animated transitions via `transition.attrTween` and `d3.interpolate` update arc paths and labels, while `d3.scaleOrdinal` with an interpolated rainbow palette colors top-level branches.

BBhavyatulasi
95% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive sunburst visualization displays the hierarchical structure of the Flare dataset, with arc size proportional to leaf-node values and color encoding by top-level category. Clicking any arc zooms to that subtree via animated transitions using `d3.transition` and `transition.attrTween`, while an inner circle returns to the root. Built with D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc`, labels rotate to remain readable. Data loads through the Observable standard library’s `require()` method, and rendering uses SVG with `fill-opacity` to indicate parent-child relationships.

SStella
95% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualization displays the hierarchical structure of the Flare dataset, where each ring segment represents a category and its size corresponds to a numeric value. Clicking a segment smoothly transitions the chart to focus on that node’s subtree, using D3 v5’s `d3.partition`, `d3.hierarchy`, and `d3.arc` to compute and render the circular layout. The animation relies on `transition.attrTween` and `d3.interpolate` to morph arc geometry and label transforms between states, with colors assigned per top-level branch via `d3.scaleOrdinal`.

MMustafa-Esoofally
95% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

A zoomable sunburst diagram visualizes the hierarchical flare dataset as concentric arcs, where clicking a segment zooms in to reveal its children. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` for layout, with `d3.interpolateRainbow` for color. Animated transitions via `transition.attrTween` and a `tween` function update arc geometry and label rotations. The SVG rendering includes hover tooltips showing ancestor paths and values, with a central circle to return to the root.

MMarwanElfatrani
95% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes the hierarchical Flare dataset, showing relative sizes of its categories through nested arcs. Clicking a node smoothly zooms into its subtree, while a center circle returns to the root. The example uses D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute layout and shapes, with `transition.attrTween` and `d3.interpolate` animating arc positions. Labels rotate and fade based on visibility, and the color scale applies `d3.interpolateRainbow` per top-level branch, rendered as an SVG with user interaction.

TTravy Trav
95% match