Final Project

100%

✓ Published0🌍 Public

Last edited May 20, 2021

Created on May 5, 2021

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.

AI-generated description

Data Visualization Final Project: Quality Assurance Dashboard for Proton Therapy Center

MIT Licensed

Similar vizzes

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

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

77% match

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

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

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

74% match

Loading thumbnail…

DailyQA_version3

This visualization displays daily quality assurance measurements for proton therapy spots, comparing actual recorded values against expected baselines across multiple sessions. The interface uses a diverging color scale from red through yellow to green, applied to deviations in spot position, sigma values, skewness, and intensity. Data is loaded from two CSV files (spots.csv and spots_expected.csv) using d3.csv, and d3.scaleLinear maps the deviation ranges to the color gradients, allowing rapid identification of outliers in the treatment delivery parameters.

Mmauricio-acosta-reyes

74% match

Loading thumbnail…

DailyQA_may2

This visualization presents a radial, pie-chart-style layout for displaying daily quality assurance (QA) parameters in a medical or imaging context. It shows seven data categories—Position X/Y, Sigma X/Y, Skewness X/Y, and Intensity—as equal-sized arc segments arranged around a central point. The code uses React for rendering the SVG, D3’s `pie()` and `arc()` generators to compute and draw the arcs, and `d3.range` to create separator lines between segments. The data is loaded from a TSV file (pie_setup.tsv) containing parameter names and values.

Mmauricio-acosta-reyes

73% match

Loading thumbnail…

Daily QA IP

A radial chart displays daily QA beam parameters as seven equal arc segments, each representing a measurement category such as Position X, Sigma Y, or Intensity. The visualization uses React to render an SVG composed of concentric circles and pie-slice paths, with D3’s `pie` and `arc` generators computing the angular geometry. All segments are currently filled green, with the source data stored in a TSV file listing each parameter’s value. The code defines custom radii for axis labels, data rings, and outer bounds, and draws separating radial lines using D3’s `range`.

Mmauricio-acosta-reyes

72% match