Skip to main content
SimilarExport ZIP
100%

D3 v5 Zoomable Sunburst

✓ Published0🌍 Public
Ssupermoose
Last edited Aug 24, 2019
Created on Aug 24, 2019

This interactive visualization presents a hierarchical sunburst chart of the Flare software project’s package structure. Clicking any arc zooms into that subtree, animating the radial layout with smooth transitions. Built with D3 v5, it uses `d3.partition` and `d3.arc` to compute and draw the arcs, with `transition.attrTween` handling the zoom animation. Colors derive from a `d3.scaleOrdinal` with an interpolated rainbow palette, while labels rotate and reposition via `labelTransform`. Data loads from the @observablehq/flare module.

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 displays the hierarchical structure of the Flare software package, with each arc segment representing a module and its angular size proportional to the module’s value. Users can click any segment to zoom into that subtree, smoothly animating the layout as the focus shifts. The visualization is built with D3 v5, using `d3.partition` to compute the layout and `d3.arc` for rendering SVG paths. Transitions are animated via `transition.attrTween` and `d3.interpolate`. The code loads data from the Observable standard library’s `@observablehq/flare` dataset and applies a rainbow color scale.

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

D3 v5 Zoomable Sunburst

This interactive visualization presents a hierarchical sunburst chart that displays the file structure of the Flare data. Users click on any arc to zoom in, re-centering the view on that node while smoothly animating the layout to reveal its children. Built with D3 v5, the chart uses the `d3.partition()` layout and `d3.arc()` for rendering, alongside `d3.hierarchy()` and `d3.interpolate()` for smooth transitions between zoom levels. The visualization fetches its data from the @observablehq/flare library and renders via SVG paths and text elements.

BBetty
94% 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 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 interactive sunburst chart visualizes the hierarchically structured Flare dataset, showing the relative sizes of data clusters and their nested subcategories through concentric arcs. Users click on any parent arc to zoom into that subtree and recenter the visualization, with smooth animated transitions handled by D3 transitions and `transition.attrTween`. The example is implemented in D3 v5, using `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute and render the layout, while `d3.interpolateRainbow` provides a categorical color scale. Data loads via the Observable standard library from the `@observablehq/flare` module, and all elements are drawn as SVG paths and text labels.

Eenoris75
94% match