Skip to main content
SimilarExport ZIP
100%

D3 v5 Zoomable Sunburst

✓ Published1🌍 Public
VVishnu Ch
Last edited Apr 13, 2020
Created on Apr 13, 2020

This interactive sunburst chart displays the hierarchical Flare dataset, where each ring segment represents a node and its angular width encodes the node's value. Clicking a segment zooms into that subtree, smoothly animating the layout using D3 v5’s `d3.partition`, `d3.hierarchy`, and `d3.arc` with `transition.attrTween` for interpolated arc paths. Labels and fill opacity update dynamically, while a central circle returns the view to the root. The visualization is rendered as SVG and uses `d3.scaleOrdinal` with an interpolated rainbow palette.

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

D3 v5 Zoomable Sunburst

This interactive sunburst chart visualizes the hierarchical structure of the Flare dataset, showing file sizes as angular arc lengths. Users navigate the hierarchy by clicking on any segment, which re-centers the visualization on that node's subtree. The implementation is built with D3 v5, using the `d3.arc` generator and `d3.partition` layout to compute segment geometry. Colors are assigned via `d3.scaleOrdinal` with a rainbow interpolation. Clicking triggers a smooth 750-millisecond transition, with `attrTween` and `d3.interpolate` animating the arcs and labels, while the view resets when clicking the innermost circle.

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

D3 v5 Zoomable Sunburst

This zoomable sunburst visualization displays the hierarchical structure of the Flare dataset, where each ring segment represents a category and its size corresponds to a numeric value. Clicking a segment smoothly transitions the chart to focus on that node’s subtree, using D3 v5’s `d3.partition`, `d3.hierarchy`, and `d3.arc` to compute and render the circular layout. The animation relies on `transition.attrTween` and `d3.interpolate` to morph arc geometry and label transforms between states, with colors assigned per top-level branch via `d3.scaleOrdinal`.

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

D3 v5 Zoomable Sunburst - PD

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.

Vvalbauer
94% match
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
94% 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
94% match