Skip to main content
SimilarExport ZIP
100%

D3 v5 Zoomable Sunburst

✓ Published2🌍 Public
苏苏巨亮
Last edited Apr 15, 2020
Created on Apr 14, 2020

This example shows a zoomable sunburst visualization of the hierarchical flare dataset, where clicking a ring zooms into that subtree and clicking the center returns to the root. The code uses D3 v5’s `d3.partition` and `d3.arc` to compute and draw the arcs, with `d3.interpolateRainbow` for color mapping and `transition.attrTween` for smooth animated zooms. Labels rotate and fade based on visibility criteria, and the data is loaded via the Observable `@observablehq/flare` package with the page rendered as SVG.

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 presents a zoomable sunburst visualization of the flare.json hierarchical dataset, where clicking on a ring segment animates the view to focus on that node. Built with D3 v5, it renders the hierarchy as an SVG using `d3.partition` and `d3.arc` to compute arc geometry. Interactive transitions leverage `transition.attrTween` and `d3.interpolate` to smoothly reshape arcs and labels when navigating. Data is loaded via the Observable `@observablehq/flare` module using a `require()` call.

Ssathishkanna11
96% 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 example shows a zoomable sunburst visualization of the Flare software package’s class hierarchy, with arc size encoding class value and color assigned by top-level category. Clicking an arc zooms into that subtree, animating the radial layout transitions. The code uses D3 v5’s `d3.partition`, `d3.hierarchy`, `d3.scaleOrdinal`, `d3.interpolateRainbow`, and `d3.arc`, with transitions driven by `transition.attrTween` and `tween` on path data. Data loads via the Observable stdlib `require` for `@observablehq/flare`. Rendering uses SVG paths and text labels.

FfaRriaN
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
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
94% match
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…

Fork of D3 v5 Zoomable Sunburst

This example shows a zoomable sunburst visualization of the Flare software package hierarchy, where clicking an arc zooms into that subtree while the center circle returns to the root. D3 v5’s `d3.partition`, `d3.hierarchy`, and `d3.arc` generate the radial layout with sequential rainbow coloring, while animated transitions update arc paths and labels via `transition.attrTween` and `d3.interpolate`. The data loads asynchronously from the `@observablehq/flare` dataset, and interaction relies on click handlers attached to SVG `path` elements.

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