Skip to main content
SimilarExport ZIP
100%

Fork of Fork of D3 v5 Zoomable Sunburst

✓ Published0🌍 Public
JJonathan
Last edited Mar 3, 2021
Created on Mar 3, 2021

This example visualizes a hierarchical dataset as a zoomable sunburst diagram. It displays the flare visualization toolkit's class hierarchy, where the size of each arc corresponds to a numeric value, and clicking on a segment zooms into that branch. The code uses D3 v5's `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute the layout, while `d3.scaleOrdinal` and `d3.interpolateRainbow` handle color encoding. Smooth zooming and panning animations are implemented via D3 transitions and `attrTween`, rendering the result as 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…

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst visualization displays the hierarchical flare dataset, using arc segments sized by value and colored by top-level category. Clicking a segment zooms into that subtree, with smooth animated transitions reshaping all arcs and labels. Built with D3 v5, the example uses `d3.hierarchy`, `d3.partition`, `d3.arc`, and `d3.interpolate` to drive the SVG rendering and 750ms transition animations. The data is loaded via the Observable standard library's `require` function.

JJonathan
95% match
Loading thumbnail…

Fork of Fork of D3 v5 Zoomable Sunburst

A zoomable sunburst visualization displays the hierarchical Flare dataset, showing the relative sizes of categories and subcategories through concentric ring segments. Clicking a node smoothly animates and re-scales the chart to focus on that branch, with the central circle resetting the view. Built with D3 v5, it uses `d3.partition`, `d3.hierarchy`, and `d3.arc` for layout and rendering, while `transition.attrTween` and `d3.interpolate` drive the animated transitions between zoom states. Color mapping uses `d3.scaleOrdinal` with `d3.interpolateRainbow`.

DDeclan Naughton
94% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This zoomable sunburst visualization displays a hierarchical dataset, the Flare software package, with each arc segment sized proportionally to its value. Users click any arc to zoom in and explore nested categories, while a central circle resets the view. Built with D3 v7, it uses `d3.partition`, `d3.hierarchy`, and `d3.arc` to compute the layout, with smooth transitions animated via `transition.attrTween` and `transition.tween`. The color scale uses `d3.scaleOrdinal` and `d3.interpolateRainbow` to distinguish top-level branches.

KKamal Bahadur Rana
94% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This zoomable sunburst diagram visualizes the hierarchical Flare dataset, showing the relative sizes of categories and subcategories through nested arcs. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to render the SVG, with an ordinal color scale based on `d3.interpolateRainbow`. Clicking a node triggers smooth animated transitions via `transition.attrTween` and `d3.interpolate`, rescaling arcs and labels to zoom into the selected branch. Labels rotate and reposition based on arc angles, and tooltips via `title` show full paths and numeric values.

Kksookdeo
94% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes a hierarchical dataset representing the Flare visualization toolkit, using an SVG rendering with animated transitions powered by D3 v5. The visualization shows the hierarchical structure as a radial layout, with arcs partitioned by value and colored by top-level category. Clicking a node zooms in to expand that subtree, while clicking the center circle returns to the root. The code uses `d3.partition`, `d3.hierarchy`, `d3.arc`, and `transition.attrTween` to animate both the arcs and their labels, with data loaded from an Observable standard library module.

SStuartSutherland
94% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This zoomable sunburst chart visualizes the hierarchical flare dataset using D3 v5. The visualization partitions data into a radial layout, with arcs representing nodes and their sizes proportional to values. Clicking an arc transitions the view to zoom into that node, re-scaling the partition layout and updating arc paths and labels. The code uses d3.hierarchy, d3.partition, and d3.arc for the layout and rendering, with d3.transition and attrTween animating the zoom. Colors are assigned via d3.scaleOrdinal with an interpolateRainbow range, and SVG text labels rotate and reposition dynamically.

SShdnShmli
94% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

A zoomable sunburst visualization displays hierarchical data from a flare.json dataset, with arcs sized by numeric values and colored by top-level category. Clicking a node zooms to focus on that subtree, using smooth 750-millisecond transitions. The code builds the hierarchy with `d3.hierarchy` and `d3.partition`, renders arcs via `d3.arc`, and animates using `transition.attrTween` with interpolated angular coordinates. Labels rotate radially, and a central circle resets the view when clicked.

LLiml
94% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

A zoomable sunburst visualization displays the hierarchical Flare dataset as concentric arcs, with clickable parent nodes that smoothly re-scale the layout for detailed exploration. Built with D3 v5, the code uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to render SVG paths, while `transition.attrTween` animates arc geometry and label rotations over 750ms. Colors are assigned via `d3.scaleOrdinal` with an interpolated rainbow palette, and node tooltips show ancestor paths and formatted values.

CChristianABeier
94% match