Skip to main content
SimilarExport ZIP
100%

It's Coming together

✓ Published1🌍 Public
Mmauricio-acosta-reyes
Last edited May 5, 2021
Created on May 5, 2021

A radial chart renders proton therapy quality assurance data as a colorful donut, with each of 55 segments representing a distinct measurement parameter. Built with React and rendered as SVG, it uses D3's `pie` and `arc` functions to compute segment geometry and `scaleOrdinal` with `schemeCategory10` for color mapping. The chart is composed through a custom face-like layout, combining pie chart segments with circular background elements.

AI-generated description

My take on making a smiley Face

MIT Licensed

Similar vizzes

Loading thumbnail…

Final Project

This final project presents a quality assurance dashboard for a proton therapy center, displaying the status of multiple beam parameters across three large donut charts. Each ring segment represents a specific measurement spot or energy level, with parameter names labeled along curved paths. The visualization is built with React and D3 v6, using `d3.pie` and `d3.arc` to generate the SVG donut segments, while custom path generators position the labels. Data is loaded from a CSV file containing spot-by-spot measurement values, rendered as green arcs.

Mmauricio-acosta-reyes
83% match
Loading thumbnail…

cleaned up trial

A radial donut chart visualizes 53 beam parameters on a circular layout, with each parameter represented as an equal segment in a donut ring surrounding a yellow smiley face. The SVG rendering combines React components for modular structure and D3 v6 APIs for arc generation and pie layout. The face component draws circles for eyes and a mouth arc, while the surrounding donut uses d3.arc() and d3.pie() to encode categorical data from the parameters array.

Mmauricio-acosta-reyes
81% match
Loading thumbnail…

Data Visualization with D3 and React

A radial burst of CSS named colors is rendered as a single pie chart, with each color occupying a wedge of equal size. D3 loads the dataset via `csv` and computes the layout with `pie`, while `arc` generates the SVG path shapes. React manages the component state and renders the resulting `path` elements, with each fill set from the `RGB hex value` column. The visualization splits the full width into a circular layout centered on a 960×500 SVG canvas.

AAngel Lam
78% match
Loading thumbnail…

Rendering data with React & D3

A radial burst of CSS named colors, rendered as a pie chart where each slice represents a distinct color. The visualization loads color data from a CSV file via D3's `csv` utility, then uses React's `useState` and `useEffect` hooks to fetch and manage the data. D3's `pie` and `arc` functions compute the slice geometry, while React maps each data point to an SVG `<path>` element with the color's hex value as its fill. The view is centered with a `transform` translation, and a loading message appears before data arrives.

WWolfgang
78% match
Loading thumbnail…

2: Rendering data with React and D3

A radial burst chart displays CSS named colors as a full circle of pie slices, each colored by its corresponding RGB hex value, with data loaded from a GitHub CSV file. Built with React and D3 v7, the visualization uses the `csv` function to fetch and parse data, `pie` to compute angles, and `arc` to generate SVG paths. React manages the loading state and renders the SVG, while D3 handles the geometry and layout.

HHumanistic Quality Management
78% match
Loading thumbnail…

Rendering Data with React and D3

A radial burst of 148 named CSS colors, each rendered as a wedge of a pie chart, displays the dataset’s full hue spectrum. The visualization loads data from a CSV file via `d3.csv`, then uses `d3.pie()` and `d3.arc()` to compute the angles and paths. React’s `useState` and `useEffect` manage the asynchronous data fetching, while each `<path>` element’s `fill` is set directly from the row’s `RGB hex value` property. The SVG is centered with a `<g>` transform, and the chart initially shows a loading message before rendering.

MMaciek Sitkowski
78% match
Loading thumbnail…

Fork trying to get the donut plot

This interactive proton therapy dashboard displays daily quality-assurance metrics across multiple treatment rooms, with each metrics value shown as a colored donut chart segment. The visualization combines a React-based smiley face component with a D3 pie chart, rendered as SVG elements. Each donut segment represents one of 54 machine parameters (position, sigma, skewness, intensity), with green fill indicating within-tolerance readings. The dashboard uses D3's arc and pie generators to construct the donut plots, while React components manage the circular layout, including background circles and daily single-room displays.

Mmauricio-acosta-reyes
78% match
Loading thumbnail…

Rendering data with React & D3

A radial burst of CSS named colors is rendered as an SVG pie chart, with each slice colored by its RGB hex value from a CSV dataset loaded via `d3.csv`. React manages the component state and lifecycle, while D3's `pie` and `arc` generators compute the slice angles and paths. The chart uses `ReactDOM.render` to mount the SVG, and D3 v7 and React 17 are loaded from CDNs.

LLove Wessman
78% match