Skip to main content
SimilarExport ZIP
100%

D3 v5 Zoomable Sunburst

✓ Published3🌍 Public
Hhardypatel1
Last edited Nov 14, 2019
Created on Nov 14, 2019

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`.

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

D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes the hierarchical Flare dataset, showing relative sizes of its categories through nested arcs. Clicking a node smoothly zooms into its subtree, while a center circle returns to the root. The example uses D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute layout and shapes, with `transition.attrTween` and `d3.interpolate` animating arc positions. Labels rotate and fade based on visibility, and the color scale applies `d3.interpolateRainbow` per top-level branch, rendered as an SVG with user interaction.

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

An interactive zoomable sunburst chart visualizes the hierarchical structure of the Flare data set. The radial layout partitions the root node into concentric rings, with arc segments representing each category and subcategory; the color of each leaf is inherited from its top-level group. Clicking on an arc zooms into that subtree, expanding its children while hiding others. Built with D3 v5, the visualization uses `d3.partition` for layout, `d3.arc` for path generation, and animated transitions via `transition.attrTween` to smoothly update arc shapes and labels.

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

D3 v5 Zoomable Sunburst

This zoomable sunburst chart visualizes the hierarchical flare dataset, encoding each node’s value as the arc’s angular width. Clicking a slice zooms into that subtree, dynamically rescaling the partition layout and re-centering the view. Built with D3 v5 and SVG, the example uses `d3.partition`, `d3.hierarchy`, and `d3.interpolate` to animate transitions, reading hierarchical data from a CSV file with id and value fields. The rendered output includes a breadcrumb trail showing the current path.

Tthanhtrant219
94% 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
94% match