Skip to main content
SimilarExport ZIP
100%

D3 v5 Zoomable Sunburst - PD

✓ Published0🌍 Public
Vvalbauer
Last edited Oct 2, 2019
Created on Oct 2, 2019

This interactive zoomable sunburst visualization displays the hierarchical structure of the Flare dataset, with each ring segment sized by its value. Clicking an arc zooms into that node, using smooth animated transitions to refocus the layout. The code employs D3 v5’s `d3.hierarchy` and `d3.partition` for layout, `d3.arc` for path generation, and `transition.attrTween` to interpolate between states. Color is assigned via a rainbow scale, and labels rotate radially with `d3.interpolate`-based tweening. Data loads from the `@observablehq/flare` package through the Observable stdlib.

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 diagram shows the hierarchical structure of the Flare dataset, with each ring segment representing a category and its value. Users can click on any segment to zoom in and focus on that branch, while clicking the central circle returns to the parent level. Built with D3 v5, the visualization uses `d3.hierarchy`, `d3.partition`, and animated SVG transitions to smoothly interpolate arc paths and labels via `transition.attrTween`. Data is loaded from the `@observablehq/flare` module, and colors are assigned using `d3.scaleOrdinal` with a quantized rainbow palette.

Ddon-alberto
96% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes the flare dataset, a hierarchical collection of file sizes. The visualization displays the hierarchy as concentric rings, where each ring segment represents a node, with size proportional to its value. Users click on a segment to re-center the view on that subtree, and click the central circle to zoom back out. Built with D3 v5, it uses `d3.hierarchy` and `d3.partition` for layout, and `d3.arc` for rendering paths. Interactions are animated via SVG `transition` and `attrTween` methods, with color mapping from `d3.scaleOrdinal` and `d3.interpolateRainbow`. The data is loaded from the `@observablehq/flare` dataset.

Ttorstendahlen
95% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

The D3 v5 Zoomable Sunburst shows a hierarchical dataset of the Flare visualization library (loaded via the @observablehq/flare module) as a multi-ring sunburst chart. Clicking an arc zooms in to reveal its children, with smooth transitions applied to the arcs and labels via `transition.attrTween` and `d3.interpolate`. The visualization is rendered as SVG, uses `d3.hierarchy` and `d3.partition` for layout, and `d3.scaleOrdinal` with a rainbow palette for coloring top-level categories.

AAlex Levitt
95% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive visualization presents a zoomable sunburst chart of the Flare data hierarchy, where clicking a ring segment smoothly transitions the view to that level. The chart encodes hierarchical relationships as concentric rings, with arc length proportional to values and colors assigned by top-level category. Built with D3 v5, it uses the `d3.partition()` layout, `d3.arc()` for path geometry, and CSS transitions driven by `transition.attrTween` to animate changes. The example loads data from the `@observablehq/flare` package and renders everything as SVG elements.

Ttasqon
95% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This visualization renders the Flare software package hierarchy as a zoomable sunburst, where each arc segment represents a node and its size encodes the node’s value. Users can click arcs or the central circle to drill down or back up through the hierarchy, with animated transitions handled by `d3.transition` and `transition.attrTween`. The code uses D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute and draw the layout in SVG, while `d3.scaleOrdinal` with `d3.interpolateRainbow` assigns colors to top-level branches. The data is loaded asynchronously from the `@observablehq/flare` module via the Observable standard library.

Ssyahidibnoe
95% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualization displays the hierarchical structure of the Flare dataset, showing parent-child relationships and relative sizes through concentric arcs. Built with D3 v5, it uses `d3.partition` to compute the layout, `d3.arc` for path generation, and `d3.scaleOrdinal` with an interpolated rainbow palette for coloring. Clicking any node triggers an animated transition via `transition.attrTween` and `transition.attr`, zooming to that subtree while labels adjust their rotation and opacity based on visibility thresholds. The dataset loads from the `@observablehq/flares` package, and all rendering is done in SVG.

Yyarosus
95% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes the structure of a hierarchical dataset, using nested arcs to represent the flare data from Observable’s `@observablehq/flare` library. Each level of the hierarchy is depicted as a ring, with arc segments sized proportionally to the data values. Clicking on a segment triggers an animated transition using `transition.attrTween` and `d3.interpolate` to smoothly re-center the view on that node, showing its children in greater detail. The visualization is rendered with SVG inside a circular partition layout, and the code uses `d3.hierarchy`, `d3.partition`, and `d3.scaleOrdinal` with the `interpolateRainbow` color scheme to distinguish top-level categories.

JJamie919
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
95% match