Skip to main content
SimilarExport ZIP
100%

Fork of D3 v5 Zoomable Sunburst

✓ Published0🌍 Public
DDries Lagae
Last edited Nov 12, 2022
Created on Nov 12, 2022

This interactive sunburst diagram visualizes the hierarchical structure of the Flare software library, with each ring representing a level of the codebase and arc size proportional to data values. The D3 v5 code uses the `d3.partition` layout algorithm, `d3.arc` for drawing segments, and animated transitions triggered by clicking on any visible arc to zoom into the selected branch. SVG paths and text labels render in the browser, with colors assigned via `d3.scaleOrdinal` and an interpolated rainbow palette, while the dataset is loaded asynchronously from an Observable-hosted JSON file.

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

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst diagram shows the hierarchical structure of the Flare dataset, with each arc segment representing a category and its size proportional to the data value. Clicking a segment zooms in to reveal that node’s children, while clicking the central circle returns to the previous level, using smooth transitions. The visualization is built with D3 v5, leveraging `d3.partition`, `d3.arc`, and `transition.attrTween` for animation. Data is loaded asynchronously via the Observable stdlib’s `require` and rendered as SVG with color encoding from `d3.scaleOrdinal` and `d3.interpolateRainbow`.

LLeandro
95% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst diagram visualizes the hierarchical structure of the Flare dataset, with each ring segment representing a category or subcategory whose arc width corresponds to its value. Users can click on any node to zoom into that branch, smoothly animating the re-scaling of arcs and labels via D3 transitions. The visualization is rendered as SVG and uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute layout, while `d3.interpolateRainbow` assigns categorical colors by top-level branch. The code loads data asynchronously through the Observable Standard Library’s `require()` function.

JJosieeeeee
94% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst visualization displays the hierarchical structure of the Flare dataset, with each arc’s size proportional to its value. Clicking a slice zooms in to reveal its children, using D3 v5’s `d3.partition`, `d3.hierarchy`, and `d3.arc` for layout and rendering. Animated transitions via `transition.attrTween` and `d3.interpolate` smoothly update arc positions and labels, while colors are assigned using `d3.scaleOrdinal` and `d3.interpolateRainbow`. The visualization renders as SVG.

BBrittany Harden
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 D3 v5 Zoomable Sunburst

This interactive sunburst chart displays the hierarchical structure of the Flare software system, using segment size to encode file sizes and color to distinguish top-level categories. Built with D3 v5, it renders as SVG and responds to user clicks on segments to zoom in and out of the hierarchy. The visualization uses D3’s `d3.arc`, `d3.partition`, and `d3.hierarchy` APIs to compute the layout, with animated transitions handled through `d3.transition` and `transition.attrTween` for smooth rescaling of arcs and labels. The data originates from the Flare dataset’s JSON representation, sourced from Observable.

AAlbert
94% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

A zoomable sunburst diagram displays the hierarchical structure of the Flare dataset, with each ring representing a level of hierarchy and arc length proportional to size. Clicking a sector zooms into that subtree, re-centering and re-scaling the visualization with a smooth 750-millisecond animation. Built with D3 v5, the SVG rendering uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute the layout, while `transition.attrTween` animates the path geometry and label transforms. The color scale assigns distinct hues to top-level categories based on the data's children.

PPekingWaldo
94% match