Fork of D3 v5 Zoomable Sunburst

100%

Fork of D3 v5 Zoomable Sunburst

✓ Published0🌍 Public

Last edited Nov 26, 2021

Created on Nov 26, 2021

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.

AI-generated description

Mike Bostock's D3 Zoomable Sunburst example

with D3 v5 (based on the changes in v5)

<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 sunburst chart visualizes the hierarchical structure of the Flare dataset, with arcs representing nodes sized by value and color-coded by top-level branch. Clicking an arc zooms and centers the view on that node, while a click on the center circle returns to the root. Built with D3 v5, it uses `d3.partition`, `d3.hierarchy`, and `d3.arc` for layout, with animated transitions driven by `transition.attrTween` and `d3.interpolate` to smoothly update arc paths and labels during zoom.

FFDASSO

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

95% 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

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

95% match

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This interactive zoomable sunburst chart visualizes the hierarchical structure of the Flare dataset, representing files and their sizes as concentric arcs. Built with D3 v5, it uses `d3.partition`, `d3.arc`, and `d3.hierarchy` to lay out the radial tree, with animation handled by `transition.attrTween` for smooth zooming on click. The visualization is rendered as SVG, with fill-opacity and label visibility responding to the current zoom level, and colors assigned via `d3.scaleOrdinal` with an interpolated rainbow palette.

Vvorp-portal

95% 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

95% match

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

A zoomable sunburst chart displays the hierarchical structure of the Flare dataset as a radial layout, with each ring segment representing a category and its subcategories. The visualization animates transitions when a user clicks a segment, zooming into that node and its descendants while keeping the surrounding context visible. Built with D3 v5, the chart uses `d3.hierarchy`, `d3.partition`, and a custom `d3.arc` generator to compute the geometry, while `transition.attrTween` smoothly interpolates the arc paths and label transforms during the 750ms zoom animation. The dataset is loaded from an Observable library and rendered as an SVG.

Ddfeldhaus

95% match

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst diagram visualizes the hierarchical Flare dataset, showing the relative sizes of its branches and leaves through concentric, angle-based arcs. Clicking an arc zooms in to display that node as the new root, with a smooth 750-millisecond transition animating the arcs and labels via `d3.arc` and `transition.attrTween`. The chart uses D3 v5's `d3.hierarchy`, `d3.partition`, `d3.scaleOrdinal`, and a quantized rainbow color scale, rendering as SVG. Labels rotate and flip to maintain readability, and center-clicking returns to the previous level.

Bblueyjuice

95% match