Skip to main content
SimilarExport ZIP
100%

D3 v5 Zoomable Sunburst

✓ Published1🌍 Public
Ssyedfayazz
Last edited May 6, 2020
Created on May 6, 2020

This zoomable sunburst diagram visualizes a hierarchical dataset from the Observable Flare library, displayed as radial slices whose size corresponds to the data's `size` values. Built with D3 v5, it uses the `d3.hierarchy`, `d3.partition`, and a custom `d3.arc` generator to draw the SVG paths. Clicking an arc smoothly animates the chart to focus on that branch, recalculating angular and radial bounds, and using a transition with `attrTween` to interpolate the path geometry and label rotation over 750 milliseconds.

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

An interactive zoomable sunburst visualization displays hierarchical data from the Observable Flare dataset, where clicking on an arc zooms into that subtree. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to render SVG paths with animated transitions via `transition.attrTween`. Color is assigned by a `d3.scaleOrdinal` interpolating rainbow hues across top-level children, while labels rotate and fade based on arc visibility. Clicking the center circle returns to the root level.

Ssyahidibnoe
95% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst chart displays hierarchical data as concentric arcs, where clicking a segment zooms in to show its children while the central circle returns to the root. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to render the SVG layout, with `transition.attrTween` animating arc positions and label transforms. The visualization loads the flare dataset via Observable’s stdlib and applies a rainbow color scale based on top-level categories.

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

D3 v5 Zoomable Sunburst

The zoomable sunburst visualizes hierarchical data from the Observable Flare dataset as concentric arcs, where clicking a node recenters and rescales the view on that subtree. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` for layout and rendering, with smooth 750ms transitions driven by `transition.attrTween` and interpolation of arc geometry. Color is assigned per top-level branch via a rainbow ordinal scale, and labels rotate radially with visibility filtering.

VVishnu Ch
94% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

A zoomable sunburst chart displays hierarchical data as concentric arcs, where clicking a segment zooms in to show it as the new root. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute and render the layout, with a color scale based on `d3.interpolateRainbow`. Clicking triggers a smooth 750ms transition via `transition.attrTween`, animating arc paths and labels. The hierarchy comes from the Observable `@observablehq/flare` dataset, rendered as SVG with interactive hover tooltips.

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

D3 v5 Zoomable Sunburst

This interactive sunburst visualization displays a hierarchical dataset from the Observable “flare” library. The circular treemap partitions data by category and subcategory, with each arc’s size reflecting the value. Clicking an arc smoothly zooms to that node, re-centering the layout and fading out unrelated segments, using `d3.hierarchy`, `d3.partition`, and `d3.arc` for geometry and `transition.attrTween` for animation. The SVG output is styled with `d3.scaleOrdinal` and `d3.interpolateRainbow` for color, while labels and tooltips are generated via D3 selections.

Ccochis
93% match