Fork of Sunburst

100%

Fork of Sunburst

✓ Published0🌍 Public

Last edited Apr 19, 2021

Created on Apr 19, 2021

Forked from Sunburst

This example visualizes a hierarchical dataset of network infrastructure using a sunburst diagram. Each ring represents a level in the hierarchy, from geographic regions down to individual server racks, with arc lengths proportional to the value counts. The visualization is built with D3 v5 and React, using `d3.partition()` to compute the layout and `d3.arc()` to generate the SVG paths. Colors are assigned per top-level branch via `d3.scaleOrdinal` and `d3.interpolateRainbow`, with labels shown for larger segments. The data is loaded from a JSON file and rendered into an SVG element.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

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.

DDries Lagae

82% match

Loading thumbnail…

sunburst react

This sunburst chart visualizes a hierarchical dataset of research topics, with each ring representing nested categories and slice sizes proportional to data values. The visualization is built with React and D3 v6, using `d3.partition` to compute the layout, `d3.hierarchy` to structure the data, and `d3.arc` to render the SVG paths. Animated tooltips display node names and publication dates on hover, while text labels are rotated to align with their corresponding slices. The data is loaded from a remote CSV file and processed into the hierarchy structure.

MMark Lam

82% match

Loading thumbnail…

Sunburst 2

This interactive sunburst diagram displays hierarchical data from the flare dataset, with each ring representing a level of the hierarchy and arc size proportional to node value. Clicking a node zooms into that branch, animating the layout through an SVG transition. The visualization uses D3 v5’s `d3.partition`, `d3.hierarchy`, and `d3.arc` for geometry, with `transition.attrTween` handling the zoom animation and `d3.interpolate` for smooth arc morphing. Labels rotate and fade based on visibility, while a central circle resets the view.

HHgeginat

82% match

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst visualizes the hierarchical flare dataset, showing the relative sizes of its categories and subcategories. Clicking an arc zooms into that branch, expanding its children while collapsing others. Built with D3 v5, the chart uses `d3.partition`, `d3.hierarchy`, and `d3.arc` to render the sectors, with smooth zoom transitions driven by `transition.attrTween`. Color scales via `d3.scaleOrdinal` and `d3.interpolateRainbow`, and the layout adjusts dynamically on each click, with SVG elements and animations powered by the standard D3 library.

Jjimmyjs1607

81% match

Loading thumbnail…

Fork of Fork of D3 v5 Zoomable Sunburst

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.

JJonathan

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

81% match

Loading thumbnail…

Sunburst

A sunburst chart displays the hierarchical structure of the Flare dataset, with each ring segment representing a category and its subcategories, sized by numeric value. The visualization uses D3 v5’s `d3.partition` and `d3.arc` to compute and draw the radial layout, with SVG paths filled by a rainbow scale applied to top-level branches. Labels are rotated and placed conditionally based on arc size, and each segment includes a hover tooltip showing the full ancestor path and value.

苏苏巨亮

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

81% match