Skip to main content
SimilarExport ZIP
100%

D3 v5 Zoomable Sunburst

✓ Published0🌍 Public
Ssyahidibnoe
Last edited Apr 27, 2019
Created on Apr 27, 2019

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.

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 example shows a zoomable sunburst visualization of hierarchical data from the Observable Flare dataset. Users click on arcs to zoom into deeper levels, and a central circle returns to the root. Built with D3 v5, it uses `d3.partition`, `d3.hierarchy`, and `d3.arc` for layout, with `d3.scaleOrdinal` and `d3.interpolateRainbow` for coloring. Transitions animate arc paths and labels via `transition.attrTween` and `d3.interpolate`. The SVG renders with clickable paths and a reset circle.

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

D3 v5 Zoomable Sunburst

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.

Ssyedfayazz
95% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes hierarchical data from an Observable flare dataset, letting users click arcs to zoom into nested categories. Built with D3 v5, it renders the chart as an SVG using `d3.partition` and `d3.arc`, with animated transitions via `transition.attrTween` that smoothly interpolate arc positions. Colors derive from a rainbow scale based on top-level children, while labels dynamically appear or fade based on arc visibility. The example also includes a central reset circle to navigate back to the root.

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

D3 v5 Zoomable Sunburst

This interactive sunburst visualization displays hierarchical data from the Flare dataset, animating radial arcs and labels when clicking to zoom into nodes. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to render SVG paths, with `d3.interpolate` and `transition.attrTween` for smooth 750ms animations. The color scale uses `d3.scaleOrdinal` with `d3.interpolateRainbow`, and labels rotate and flip based on arc position. Data loads asynchronously via an Observable stdlib `require` call, while a central circle returns to the root view.

YYash G
94% match