Fork trying to get the donut plot

100%

Fork trying to get the donut plot

✓ Published3🌍 Public

Last edited May 4, 2021

Created on May 3, 2021

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.

AI-generated description

My take on making a smiley Face

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork trying to get the donut plot

A React-based dashboard displays proton therapy quality assurance data as a grid of labeled donut charts, each representing a measured parameter like beam position or intensity. The visualization adapts a smiley-face SVG component into circular gauges, using d3.arc to generate donut paths and d3.pie to compute angles, while a separate area path forms a background panel. All values are hardcoded to one, making it a static prototype of the intended interactive layout.

Ddhruvs47

92% match

Loading thumbnail…

Fork of Fork trying to get the donut plot

This example shows a proton daily quality-assurance dashboard, displaying a grid of measurement parameters alongside three concentric donut-style circles that represent treatment room data. Built with React and D3 v6, the visualization uses SVG rendering to compose the interface, combining custom React components for faces and daily room metrics with D3’s pie and arc generators to construct the donut plots. The code also imports area and line generators to draw tabular and spiral shapes, while the dataset consists of 53 named parameters such as position, sigma, and intensity values.

Bblackbirdsinging

92% match

Loading thumbnail…

Fork of Fork trying to get the donut plot IPIPIPI

This visualization displays a proton daily QA report as a donut chart with multiple labeled segments. Each arc represents a measurement parameter such as PositionX, SigmaY, or Intensity. The SVG rendering uses React components with D3’s `pie` and `arc` generators to create the donut layout, while the `FaceContainer` organizes the overall composition. A background area path and tab-like header frame the chart.

Mmauricio-acosta-reyes

86% match

Loading thumbnail…

It's Coming together

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.

Mmauricio-acosta-reyes

78% match

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

77% match

Loading thumbnail…

Fork of Pie chart for report

This interactive donut chart displays the proportional sizes of five oblasts, with a legend showing each region’s percentage value. A menu allows the user to switch between plotting population, total, COVID, or other data categories, which updates the arc sizes and legend percentages accordingly. The visualization is built with React, rendering SVG paths generated by d3.pie and d3.arc, while d3.scaleOrdinal maps region names to colors. An unused helper embeds d3.interpolateRgb for a color gradient, and the menu responds to click events.

BbeauMarko

73% match

Loading thumbnail…

Fork of Donut

This example displays the current day of the year as a percentage, shown simultaneously in a progress bar, a donut chart, and a semicircular gauge. The three components are rendered as SVG using React, with the `d3.arc` API generating the donut and gauge paths. The progress value is computed from the date using `timeFormat` from d3, and each visualization updates dynamically based on that calculated fraction.

Cckp8

73% match

Loading thumbnail…

Fork of Rendering Data with react and D3

A donut chart displays all CSS named colors as equal-width slices, each filled with its corresponding hex value. The visualization uses d3.pie to compute slice angles, d3.arc to generate SVG paths, and React hooks (useState, useEffect) to fetch and render data from a CSV of named colors. ReactDOM mounts the SVG output, which is drawn with d3.v6 within a React component.

MMark Mburu

72% match