Skip to main content
SimilarExport ZIP
100%

Fork of D3 v5 Zoomable Sunburst

✓ Published0🌍 Public
Mmartina.dallamico.1@studenti.unipd.it
Last edited Oct 29, 2024
Created on Oct 29, 2024

This D3 v5 zoomable sunburst visualizes the hierarchical structure of the Flare dataset, displaying classic ring segments that expand and contract with click interactions. Built with the `d3.partition` layout and rendered as SVG, the visualization uses `d3.scaleOrdinal` with interpolated rainbow colors to differentiate top-level categories. Animated transitions are handled through `d3.transition` and `transition.attrTween`, interpolating arc geometries and label transformations in 750-millisecond sequences. The example demonstrates the modern D3 API style, including the `join` method for efficient path and text element creation from hierarchical data.

AI-generated description

Mike Bostock's [D3 Zoomable Sunburst example] (https://beta.observablehq.com/@mbostock/d3-zoomable-sunburst)

<br></br> Ported from [this Observable notebook] (https://beta.observablehq.com/@tasqon/d3-circle-packing) 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 zoomable sunburst visualization displays the hierarchical structure of the Flare dataset, with each ring segment representing a category or subcategory sized by value. Clicking any arc zooms into that node, smoothly animating the layout so the selected subtree expands to fill the view. The chart is built with D3 v5 using the `d3.partition` layout and custom `d3.arc` paths, rendered as SVG with transitions driven by `transition.attrTween` and `d3.interpolate`. Labels rotate and fade based on visibility thresholds, while a central circle resets the view to the root.

MMaeva B
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
94% 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 interactive sunburst visualization displays the hierarchical structure of the Flare dataset, with each ring segment sized by value. Clicking a node zooms in to reveal its children, while the central circle returns to the root view. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, `d3.arc`, and animated transitions via `transition.attrTween` to smoothly interpolate arc positions. Colors derive from a `d3.scaleOrdinal` over the rainbow palette, and labels rotate with their arcs.

Iillyyo
94% match
Loading thumbnail…

Fork of Fork of D3 v5 Zoomable Sunburst

This interactive sunburst diagram visualizes the hierarchical structure of the Flare dataset, with each ring segment representing a node whose angular width and radial extent encode its value. Clicking any segment smoothly zooms and re-centers the view on that subtree, with labels and arc opacity transitioning via `transition.attrTween` and `d3.interpolate`. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute and render the SVG paths, while a custom color scale maps top-level categories to a rainbow palette.

Bblueyjuice
94% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst visualizes the hierarchical structure of the Flare dataset, with each arc segment representing a data category and its size proportional to value. Clicking an arc zooms in to make that node the new root, animating the repositioning of all visible arcs and labels. Built with D3 v5, it uses `d3.partition`, `d3.hierarchy`, and `d3.arc` to compute and draw the layout, while `transition.attrTween` smoothly interpolates arc geometry during zoom. The visualization renders in SVG and applies a rainbow color scale based on top-level categories.

Jjimmy.fisher@member.mensa.org
94% 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
94% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst diagram visualizes the hierarchical structure of the Flare dataset, using concentric rings to represent nested categories and their relative sizes. Clicking any arc zooms into that subsection, smoothly animating the layout through D3 transitions. The visualization is built with D3 v5, using `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute and render the arcs as SVG paths. Colors are assigned via `d3.scaleOrdinal` with an interpolated rainbow palette, and labels rotate and fade based on the current zoom level.

Jjulia-amelie
94% match