Skip to main content
SimilarExport ZIP
100%

D3 v5 Zoomable Sunburst

✓ Published1🌍 Public
JJerfaas
Last edited Apr 2, 2020
Created on Apr 2, 2020

This zoomable sunburst visualization displays the hierarchical structure of the Flare data set, using nested arcs to represent parent-child relationships and their relative sizes. Built with D3 v5, it renders the hierarchy as an interactive ring layout where users can click any arc to zoom into that subtree, with smooth animated transitions between views. The visualization uses `d3.partition`, `d3.hierarchy`, and `d3.arc` for geometry, while `transition.attrTween` and `transition.tween` handle the interpolated animation of arc paths and labels during zoom operations.

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

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 visualizes the hierarchical structure of the Flare dataset, showing nested categories as concentric arcs. Clicking an arc zooms into that subtree, smoothly animating the radial layout over two seconds. Built with D3 v5, it uses `d3.partition`, `d3.hierarchy`, and `d3.arc` to compute geometry, while `d3.interpolate` and `transition.attrTween` animate the paths and labels. Color assignment uses `d3.scaleOrdinal` with `d3.interpolateRainbow`. The visualization renders as SVG, with tooltips displaying the full path and formatted values.

Aandrewomalley
95% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive zoomable sunburst visualizes the hierarchical structure of the Flare dataset, where each ring segment represents a node and its size corresponds to a value. Users can click on any segment to zoom in, revealing its children and re-centering the view, or click the central circle to zoom back out. Built with D3 v5, the visualization uses SVG for rendering and employs animated transitions via `transition.attrTween` to smoothly interpolate arc paths and labels as the view changes. The hierarchical data is processed using `d3.hierarchy`, `d3.partition`, and `d3.arc`, with colors assigned via a quantized rainbow interpolator.

LLal Singh Dhaila
94% 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
94% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This example shows a zoomable sunburst visualization of the Flare software hierarchy, rendering hierarchical data as concentric arcs with color-coded categories. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute and draw the layout in SVG. Clicking an arc animates the view via `transition.attrTween`, interpolating arc angles and radii to zoom into the selected node, while labels fade based on visibility using `d3.interpolate`. Data loads from a remote JSON file.

AAlex Levitt
94% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

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.

MMohamed-Khchiou
94% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive visualization displays the hierarchical structure of the Flare data as a sunburst diagram, partitioned into concentric rings where each ring represents a level of the hierarchy and arc angles encode numeric values. Clicking a segment zooms the view to focus on that subtree, using animated transitions that smoothly rescale and reposition arcs via `d3.interpolate` and `d3.attrTween`, with colors assigned by `d3.scaleOrdinal` and `d3.interpolateRainbow`. Rendered as SVG with D3 v5, it loads hierarchical JSON data and relies on the Observable stdlib’s `d3.partition` and `d3.arc` generators, adapting Bostock’s original example for vanilla JavaScript.

OOleg Russkin
94% 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
94% match