Skip to main content
SimilarExport ZIP
100%

Sunburst

✓ Published3🌍 Public
苏苏巨亮
Last edited Apr 15, 2020
Created on Apr 2, 2020
Forked from React Starter

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.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sunburst

A zoomable sunburst chart visualizes the hierarchical flare dataset, showing nested categories as concentric rings where each arc's angular width represents its value. The visualization collapses or expands levels when a user clicks on an arc or the central circle, with smooth transitions animating the radial layout. Built with D3 v5, the code uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute the layout, while `transition.attrTween` and `d3.interpolate` animate arc geometry during zoom. The color scale uses `d3.scaleOrdinal` and `d3.interpolateRainbow`, and data loads asynchronously via the Observable `require` API.

Mmobssite
90% match
Loading thumbnail…

Sunburst

A zoomable sunburst chart visualizes the hierarchical flare dataset, showing nested categories as concentric rings where each arc's angular width represents its value. The visualization collapses or expands levels when a user clicks on an arc or the central circle, with smooth transitions animating the radial layout. Built with D3 v5, the code uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute the layout, while `transition.attrTween` and `d3.interpolate` animate arc geometry during zoom. The color scale uses `d3.scaleOrdinal` and `d3.interpolateRainbow`, and data loads asynchronously via the Observable `require` API.

Mmobssite
90% match
Loading thumbnail…

Sunburst

This interactive sunburst chart visualizes the hierarchical structure of the Flare software project, using arc size to represent the relative quantity of nodes within each category. Built with D3 v3 and the d3Kit framework, the visualization employs `d3.layout.partition` and `d3.svg.arc` to generate the rings, with colors assigned by category name. Clicking any arc triggers a zoom animation via `transition.attrTween`, which smoothly interpolates the scale domains to focus on the selected subtree. The chart auto-resizes to maintain its aspect ratio and supports mouse events for additional interactivity.

TThanaporn-sk
90% 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
89% match
Loading thumbnail…

Sunburst

A sunburst diagram uses nested arcs to display the hierarchical structure of the Flare software package, with each node’s angular and radial extent encoding its data size. The visualization, built with d3.v4 and the d3Kit framework, supports click-to-zoom animations that smoothly interpolate the radial and angular scales via `arcTweenZoom` and `transition.attrTween`. Colors are assigned using `d3.scaleOrdinal` with the `schemeCategory20` palette, and hover interactions dispatch custom mouse events through d3Kit’s dispatcher.

TThanaporn-sk
88% match
Loading thumbnail…

Sunburst Partition

A sunburst diagram displays the hierarchical structure of the Flare dataset, with the root at the center and leaves on the circumference. The visualization uses a radial layout where the angle of each arc encodes the value of the corresponding node. The code employs `d3.layout.partition` and `d3.svg.arc` to compute and draw the arcs, with color assigned by the `category20c` scale. A radio button toggles between sizing arcs by node size or by leaf count, triggering a smooth animated transition via `attrTween` and `d3.interpolate`.

Mmbostock
88% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive sunburst diagram shows the hierarchical structure of the Flare dataset, with each ring segment representing a category and its value. Users can click on any segment to zoom in and focus on that branch, while clicking the central circle returns to the parent level. Built with D3 v5, the visualization uses `d3.hierarchy`, `d3.partition`, and animated SVG transitions to smoothly interpolate arc paths and labels via `transition.attrTween`. Data is loaded from the `@observablehq/flare` module, and colors are assigned using `d3.scaleOrdinal` with a quantized rainbow palette.

Ddon-alberto
88% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive sunburst chart displays the hierarchical Flare dataset, where each ring segment represents a node and its angular width encodes the node's value. Clicking a segment zooms into that subtree, smoothly animating the layout using D3 v5’s `d3.partition`, `d3.hierarchy`, and `d3.arc` with `transition.attrTween` for interpolated arc paths. Labels and fill opacity update dynamically, while a central circle returns the view to the root. The visualization is rendered as SVG and uses `d3.scaleOrdinal` with an interpolated rainbow palette.

VVishnu Ch
88% match