Skip to main content
SimilarExport ZIP
100%

D3 v5 Zoomable Sunburst

✓ Published1🌍 Public
Ssyahidibnoe
Last edited Apr 27, 2019
Created on Apr 27, 2019

This zoomable sunburst visualizes the hierarchical Flare dataset, showing the relative sizes of categories and subcategories as concentric arcs that expand and contract with animation on click. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute the layout, while transitions via `transition.attrTween` animate changes between zoom levels. Color is assigned using `d3.scaleOrdinal` with an interpolated rainbow palette, and the data is loaded asynchronously via the Observable `@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 zoomable sunburst visualizes the hierarchical Flare dataset, showing the relative sizes of categories and subcategories as concentric arcs that expand and contract with animation on click. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute the layout, while transitions via `transition.attrTween` animate changes between zoom levels. Color is assigned using `d3.scaleOrdinal` with an interpolated rainbow palette, and the data is loaded asynchronously via the Observable `@observablehq/flare` module.

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

D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes the hierarchical structure of the Flare dataset, displaying nested arcs whose size and color encode node values and category. Users click any arc to zoom into that subtree, with smooth 750-millisecond transitions animating arc paths and labels via `d3.transition` and `transition.attrTween`. The code uses D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute and render the SVG layout, while a rainbow color scale distinguishes top-level branches. Data loads asynchronously from the Observable Flare module using `observablehq/stdlib`.

TTravy Trav
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 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
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