Skip to main content
SimilarExport ZIP
100%

D3 v5 Zoomable Sunburst

✓ Published0🌍 Public
MMatheusHALeal
Last edited Nov 2, 2019
Created on Nov 2, 2019

This zoomable sunburst chart visualizes hierarchical spending data from the flare.json dataset, with arcs colored by top-level category and sized by expense sums. Users click arcs or the center circle to zoom between hierarchy levels, while labels rotate and fade based on visible arc size. Built with D3 v5, it uses the `d3.partition` layout, `d3.hierarchy`, and arc generators for SVG rendering. Transitions employ `transition.attrTween` and interpolation to animate arc paths and labels smoothly, with style updates handled through attribute tweens and fill-opacity transitions.

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

D3 v5 Zoomable Sunburst

This zoomable sunburst visualization displays a hierarchical dataset of energy and capital categories, allowing users to click arcs to focus on a child node and its descendants or click the center circle to zoom back out. Rendered as an SVG using D3 v5, the chart uses `d3.partition`, `d3.hierarchy`, `d3.arc`, and a color scale based on `d3.interpolateRainbow`. Transitions between zoom levels are animated via `transition.attrTween` and `d3.interpolate`, with labels and arcs fading based on visibility. The data originates from the Observable `@observablehq/flare` dataset.

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

D3 v5 Zoomable Sunburst

This zoomable sunburst chart visualizes hierarchical data from the flare dataset. Clicking a node zooms into that subtree, while a central circle returns to the parent level. The chart uses D3 v5’s `d3.partition` layout and `d3.hierarchy`, rendering arcs as SVG paths with `d3.arc`. Interactive transitions animate via `transition.attrTween`, updating arc geometry and label rotations with color scales from `d3.interpolateRainbow`.

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

D3 v5 Zoomable Sunburst

This zoomable sunburst chart visualizes hierarchical data from a flare.csv file, showing the relative sizes of data tables and their parent-child relationships. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to render the radial layout as SVG paths. Clicking a segment triggers an animated transition that re-centers the view, using `d3.interpolate` and `transition.attrTween` to smoothly morph the arcs and labels over 750 milliseconds, with color encoding and opacity distinguishing hierarchy levels.

Aarvind75
91% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

A zoomable sunburst chart displays hierarchical data from the flare.json dataset, showing nested categories as concentric arcs. Users click a segment to zoom into that branch, with smooth animated transitions. Built with D3 v5, the visualization uses SVG paths and the d3.partition layout, d3.arc for arc geometry, and d3.transition with attrTween to animate between states. Colors derive from a scaleOrdinal with an interpolateRainbow palette.

BBhavyatulasi
91% match