Skip to main content
SimilarExport ZIP
100%

D3 v5 Zoomable Sunburst

✓ Published1🌍 Public
SSumittiwari654
Last edited Nov 28, 2019
Created on Nov 28, 2019

This example presents a zoomable sunburst visualization of hierarchical data from the Flare dataset, rendered as an interactive donut chart in SVG. The visualization uses D3 v5’s `d3.partition` and `d3.hierarchy` to compute angular and radial layouts, with `d3.arc` drawing each segment. Users click a node to zoom into that subtree, triggering a 750ms animated transition where `transition.attrTween` interpolates arc geometries and label transforms. The color scale uses `d3.interpolateRainbow`, and data is loaded via the Observable Stdlib `require` function.

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 demonstrates a zoomable sunburst visualization of the Flare dataset using D3 v5. It uses `d3.hierarchy` and `d3.partition` to compute the layout, with `d3.arc` for path generation. Interactive zoom transitions are implemented through click handlers and `transition.attrTween` to animate arcs and labels. The visualization renders as SVG with color scales from `d3.scaleOrdinal` and `d3.interpolateRainbow`. The data is loaded asynchronously via an Observable notebook library, with the dataset containing hierarchical filesystem-like size values.

BBhavyatulasi
94% 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
93% 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
93% match
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
92% 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
92% 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
92% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

A zoomable sunburst visualizes the hierarchical Flare dataset, where clicking a node zooms the radial layout to focus on that subtree, recentering and rescaling arcs with animated transitions. Rendered as SVG, it uses D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute the layout, with colors assigned via `d3.scaleOrdinal` and `d3.interpolateRainbow`. Interactive updates rely on `transition.attrTween` to interpolate arc geometry and label positions over 750 milliseconds.

Cchungmin-yu
92% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst chart visualizes hierarchical data from the flare dataset. Clicking a node zooms into that subtree, while a central circle returns to the parent level. The chart uses D3 v5’s `d3.partition` layout and `d3.hierarchy`, rendering arcs as SVG paths with `d3.arc`. Interactive transitions animate via `transition.attrTween`, updating arc geometry and label rotations with color scales from `d3.interpolateRainbow`.

Hhardypatel1
92% match