Fork of sunburst react

100%

Fork of sunburst react

✓ Published0🌍 Public

Last edited Jan 4, 2022

Created on Jan 3, 2022

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.

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…

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

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

81% match

Loading thumbnail…

Fork of Fork of Rendering Data with React & D3

This example shows a radial burst visualization of CSS named colors, where each color from the dataset is rendered as a wedge-shaped path emanating from the center of an SVG. React manages the component state, using the `useState` and `useEffect` hooks to asynchronously load the CSV data via `d3.csv`. The `d3.pie` function arranges the data into angular segments, while `d3.arc` generates the SVG path geometries for each colored slice. All rendering happens declaratively in React, with D3 serving only to compute the layout and shapes.

Rredeath96

80% match

Loading thumbnail…

Fork of Rendering Data with React & D3

A radial burst chart visualizes CSS named colors as equal-width arcs around a central point, with each arc filled using the color’s RGB hex value. Built with React for the UI and D3 v5 for data loading and geometry, the code uses `d3.csv` to fetch the dataset, `d3.pie` to compute arc angles, and `d3.arc` to generate SVG path commands. The SVG is rendered by React.

SSunbinSong

80% match

Loading thumbnail…

Fork of Fork of Fork of Rendering Data with React & D3

A radial burst visualization of CSS named colors, rendered as an SVG donut chart using React for component structure and D3 utilities for data processing and shape generation. It loads color data from a CSV file via `d3.csv`, then uses `d3.pie` to compute arc angles and `d3.arc` to generate the path geometry, with each slice filled by its corresponding hex value. React's `useState` and `useEffect` hooks manage the asynchronous data loading and re-render the chart once the data arrives.

TtrwMK

80% match

Loading thumbnail…

Fork of Fork of Fork of Rendering Data with React & d3

A radial burst of CSS named colors, rendered as a pie chart where each wedge represents one color from a dataset loaded via `d3.csv`. The React component uses the `useEffect` hook to fetch the data, then `d3.pie` and `d3.arc` compute the wedge geometry, which React renders as SVG `<path>` elements. The fill of each path is set directly from the color’s hex value, creating a full circular spectrum. The visualization demonstrates combining D3’s data-joining utilities with React’s declarative component rendering.

MMd. Jakir Hosen

80% match

Loading thumbnail…

Fork of Rendering Data with React & D3

This example visualizes the CSS named colors dataset as a radial burst, with each color represented by a wedge-shaped slice in a circular SVG layout. The visualization loads data from a CSV file using D3’s `csv` utility, then employs React’s `useState` and `useEffect` to fetch and store the data. React renders each arc using D3’s `arc` and `pie` functions, generating paths filled with the hex values from the dataset. The code runs within an HTML page that imports React 16, ReactDOM, and D3 v5 via CDN.

EEthan Pierce

79% match

Loading thumbnail…

Fork of Fork of Rendering Data with React & D3

A radial burst of colored wedges visualizes CSS named colors, with each wedge representing one color from a CSV dataset loaded via `d3.csv`. The React app uses `useState` and `useEffect` to fetch the data, then renders SVG paths generated by `d3.arc` and `d3.pie`. Each path’s fill is set to the color’s RGB hex value, creating a full circle where adjacent wedges show the color spectrum. The chart spans the entire viewport, centered dynamically, demonstrating React’s component lifecycle managing D3’s geometry utilities.

TtrwMK

79% match