sunburst react

100%

sunburst react

✓ Published1🌍 Public

Last edited Jan 3, 2022

Created on Dec 29, 2021

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.

AI-generated description

Boilerplate code for a React + D3 visualization with:

CDN links for React, ReactDOM, and D3
Basic React boilerplate
Variables for dimensions and margins
A VizContainer component that:
- Abstracts SVG/group container elements
- Follows the margin convention
- Show the margins, which can be easily removed by deleting the showMargins={true} prop

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of sunburst react

This sunburst visualization displays hierarchical data from a CSV file containing publication metadata, showing the relationship between publication years, predicate types, and PMIDs. The visualization uses D3's partition layout and arc generator to create the radial layout, with slices colored according to the d3.scaleOrdinal color scale using schemeTableau10. React manages the component lifecycle through useEffect and useRef hooks, while D3 handles the SVG rendering of paths and labels, with a tooltip appearing on mouseover events to display additional date information.

MMark Lam

87% 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.

苏苏巨亮

82% match

Loading thumbnail…

Fork of 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.

Jjimmyjs1607

82% match

Loading thumbnail…

test d3js https://observablehq.com/@d3/zoomable-sunburst

A zoomable sunburst diagram visualizes hierarchical data from the flare.json dataset, with arcs colored by top-level category and sized by numeric value. Clicking a node transitions the view, zooming and rotating to expand that branch while hiding others. The code uses d3.hierarchy, d3.partition, and d3.arc to compute geometry, with d3.scaleOrdinal and d3.interpolateRainbow for colors. Transitions are animated via d3.transition and transition.attrTween, updating arc paths and labels as the focus changes.

Jjsoudeer

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

81% match

Loading thumbnail…

Sunburst

Mmobssite

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

80% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This D3 v5 zoomable sunburst visualizes a hierarchical dataset, where clicking on a ring segment zooms in to reveal that branch as the new root. The visualization uses a radial partition layout, with arc segments representing nodes and their sizes proportional to values. Implemented with D3’s `d3.hierarchy`, `d3.partition`, and `d3.arc` APIs, it renders as an interactive SVG with smooth 750-millisecond transitions. Node colors derive from a quantized rainbow scale, and labels rotate along the arcs, with click handlers on parent circles enabling navigation. The data originates from the Observable “flare” library, which is loaded asynchronously.

MMohammad Jabr

79% match