Skip to main content
SimilarExport ZIP
100%

D3 v5 Zoomable Sunburst

✓ Published0🌍 Public
Hhirowhite
Last edited Jul 29, 2020
Created on Jul 29, 2020

This zoomable sunburst chart visualizes hierarchical data, displaying nested nodes as concentric arcs with color-coded categories and interactive labels. Clicking an arc zooms into that subtree, while clicking the center circle returns to the root. The visualization uses D3 v5’s `d3.partition` layout, `d3.arc` for path generation, and `d3.transition` with `attrTween` for smooth animated updates. Data is loaded from the `@observablehq/flare` dataset via the Observable stdlib, which the code fetches using `require()` before rendering the 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 interactive sunburst chart visualizes hierarchical data from the Flare dataset, representing the size of each node through the arc’s angular width and radial extent. Users click any arc to zoom into that subtree, with smooth 750-millisecond transitions applied via `transition.attrTween` and `d3.interpolate`. The visualization uses D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc` to generate SVG paths and labels, with `d3.scaleOrdinal` and `d3.interpolateRainbow` providing color encoding. The Observable HQ standard library’s `require` method loads the data from the `@observablehq/flare` module.

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

D3 v5 Zoomable Sunburst

A zoomable sunburst chart displays hierarchical data as concentric arcs, where clicking a segment zooms in to show it as the new root. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute and render the layout, with a color scale based on `d3.interpolateRainbow`. Clicking triggers a smooth 750ms transition via `transition.attrTween`, animating arc paths and labels. The hierarchy comes from the Observable `@observablehq/flare` dataset, rendered as SVG with interactive hover tooltips.

Qqazwsxedcrfvtgbyhnujmikol1234
95% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst chart displays hierarchical data as concentric arcs, where clicking a segment zooms in to show its children while the central circle returns to the root. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to render the SVG layout, with `transition.attrTween` animating arc positions and label transforms. The visualization loads the flare dataset via Observable’s stdlib and applies a rainbow color scale based on top-level categories.

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

D3 v5 Zoomable Sunburst

This zoomable sunburst visualization displays hierarchical data from the @observablehq/flare dataset, with arcs sized by value and colored by top-level category. Clicking a slice zooms to reveal its children with smooth transitions. Built with D3 v5, it uses the `d3.partition` layout, `d3.hierarchy` for data nesting, `d3.arc` for path generation, and `transition.attrTween` to interpolate arc geometry and label positions during zoom animations.

Aanyazm
95% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst chart visualizes the hierarchical structure of the Flare data library, using D3 v5’s `d3.arc`, `d3.partition`, and `d3.hierarchy` APIs. The root hierarchy is loaded via an ObservableHQ library (`@observablehq/stdlib`), and each ring segment is colored by top-level category with proportional arc lengths. Clicking a node smoothly zooms the chart via `transition.attrTween` and `d3.interpolate`, animating both arc geometry and label rotation. The SVG rendering includes hover tooltips showing the full path and numeric value for each leaf.

Ddrmurugesh
94% match