Skip to main content
SimilarExport ZIP
100%

D3 v5 Zoomable Sunburst

✓ Published0🌍 Public
SSumittiwari654
Last edited Nov 28, 2019
Created on Nov 28, 2019

A hierarchical sunburst chart displays hierarchical data as concentric rings of arcs, with colors assigned to top-level branches. Clicking a segment smoothly zooms and re-centers the visualization on that arc, expanding its children outward while fading unrelated elements. Built with D3 v5, it loads data via the Observable standard library and uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute and render the layout as SVG. Interactive transitions rely on `transition.attrTween` and `d3.interpolate` to animate arc positions and label rotations.

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

A hierarchical sunburst chart displays hierarchical data as concentric rings of arcs, with colors assigned to top-level branches. Clicking a segment smoothly zooms and re-centers the visualization on that arc, expanding its children outward while fading unrelated elements. Built with D3 v5, it loads data via the Observable standard library and uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute and render the layout as SVG. Interactive transitions rely on `transition.attrTween` and `d3.interpolate` to animate arc positions and label rotations.

SSumittiwari654
100% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes hierarchical data from an Observable flare dataset, letting users click arcs to zoom into nested categories. Built with D3 v5, it renders the chart as an SVG using `d3.partition` and `d3.arc`, with animated transitions via `transition.attrTween` that smoothly interpolate arc positions. Colors derive from a rainbow scale based on top-level children, while labels dynamically appear or fade based on arc visibility. The example also includes a central reset circle to navigate back to the root.

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

D3 v5 Zoomable Sunburst

A zoomable sunburst diagram displays hierarchical data from the Observable Flare dataset, with each ring segment representing a node and its value. Clicking a segment smoothly zooms and scales the visualization to focus on that subtree, using D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc`. Animated transitions via `transition.attrTween` and `d3.interpolate` update arc paths and labels, while `d3.scaleOrdinal` with an interpolated rainbow palette colors top-level branches.

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

D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes hierarchical data from the flare library, displaying nested categories as concentric rings where arc size encodes value. Clicking a node zooms into that subtree, with smooth transitions animated via `d3.transition` and `transition.attrTween`. The chart is built with D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc`, using SVG rendering with rainbow color scales. Labels rotate and fade based on visible arc size, and a central circle returns to the root view.

BBhaveshSolanki794
92% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes hierarchical data from the flare library, displaying nested categories as concentric rings where arc size encodes value. Clicking a node zooms into that subtree, with smooth transitions animated via `d3.transition` and `transition.attrTween`. The chart is built with D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc`, using SVG rendering with rainbow color scales. Labels rotate and fade based on visible arc size, and a central circle returns to the root view.

BBhaveshSolanki794
92% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

An interactive zoomable sunburst visualization displays hierarchical data from the Observable Flare dataset, where clicking on an arc zooms into that subtree. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to render SVG paths with animated transitions via `transition.attrTween`. Color is assigned by a `d3.scaleOrdinal` interpolating rainbow hues across top-level children, while labels rotate and fade based on arc visibility. Clicking the center circle returns to the root level.

Ssyahidibnoe
92% match