Skip to main content
SimilarExport ZIP
100%

fetch D3 v5 Zoomable Sunburst

✓ Published0🌍 Public
MMark Lam
Last edited Jan 12, 2022
Created on Jan 11, 2022

A zoomable sunburst chart visualizes the hierarchical Flare dataset, showing interactive drill-down and zoom-out navigation across nested categories. Built with D3 v5, this SVG-based example uses d3.partition to lay out nodes as concentric rings, with d3.arc generating the path geometry and d3.scaleOrdinal with an interpolateRainbow palette for color encoding. Clicking a node triggers a smooth transition via transition.attrTween, animating the arc angles to focus on the selected subtree while fading labels based on visibility thresholds.

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 displays the hierarchical Flare dataset, where each ring segment represents a node and its angular width encodes the node's value. Clicking a segment zooms into that subtree, smoothly animating the layout using D3 v5’s `d3.partition`, `d3.hierarchy`, and `d3.arc` with `transition.attrTween` for interpolated arc paths. Labels and fill opacity update dynamically, while a central circle returns the view to the root. The visualization is rendered as SVG and uses `d3.scaleOrdinal` with an interpolated rainbow palette.

VVishnu Ch
93% 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
92% 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
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

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

Fork of D3 v5 Zoomable Sunburst

This zoomable sunburst chart visualizes the hierarchical flare dataset, where each ring segment represents a category and its size reflects the summed value of its children. Clicking an arc smoothly zooms into that node, re-scaling the partition layout and labels. Built with D3 v5, it uses `d3.partition`, `d3.hierarchy`, `d3.arc`, and `d3.interpolate` within a `transition.attrTween` animation, rendering as SVG with zoom transitions triggered by click events. The flare data is loaded via the Observable standard library’s `require` method.

JJaeyong Lee
91% match