Skip to main content
SimilarExport ZIP
100%

Exclusive data

✓ Published0🌍 Public
AAS251998
Last edited May 13, 2021
Created on May 13, 2021

This example shows a zoomable sunburst visualization of the Flare software package’s module hierarchy, where each arc segment represents a class and its size corresponds to the class’s value. Clicking a segment animates the layout to focus on that subtree, with smooth transitions handled by `transition.attrTween` and interpolated arc geometry. The visualization uses D3 v5’s `d3.partition`, `d3.hierarchy`, and `d3.arc` with SVG rendering, and loads hierarchical data from the `@observablehq/flare` dataset via Observable’s stdlib `require` mechanism.

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

D3 v5 Zoomable Sunburst

This zoomable sunburst visualization displays the hierarchical Flare dataset, showing the relative sizes of categories and their subcomponents through concentric, color-coded arcs. Users can click on any segment to zoom into that branch, with animated transitions expanding and rotating the view around the central circle. The code uses D3 v5's `d3.hierarchy`, `d3.partition`, and custom `d3.arc` generators to draw SVG paths, while `transition.attrTween` and `d3.interpolate` handle the smooth geometric morphing between views. Data loads from the `@observablehq/flare` package via the Observable stdlib's `require` module.

MMarwanElfatrani
91% match
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
90% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This example visualizes the hierarchical structure of the Flare data set as a zoomable sunburst diagram, where clicking on a segment re-centers the view on that part of the hierarchy. The visualization uses D3 v5’s `d3.arc`, `d3.partition`, and `d3.transition` (with `transition.attrTween`) to animate the resizing of arcs and labels. Colors are assigned via `d3.scaleOrdinal`, while `d3.hierarchy` and `d3.hierarchy.sum` preprocess the data, which is loaded from the Observable `@observablehq/flare` library (provided as both CSV and JSON).

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

D3 v5

This zoomable sunburst chart visualizes the hierarchical Flare dataset, showing the size of each node through arc length and color-coded by top-level category. Clicking an arc zooms into that subtree, recomputing the partition layout and animating the transition. Built with D3 v5, it uses `d3.partition`, `d3.hierarchy`, `d3.arc`, and `transition.attrTween` to smoothly interpolate arc geometry and label positions. The visualization renders as SVG with interactive animations, and data is loaded asynchronously from the Observable `@observablehq/flare` module.

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

D3 v5 Zoomable Sunburst

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.

Ssupermoose
89% match