DailyQA_may2

100%

✓ Published1🌍 Public

Last edited May 2, 2021

Created on May 2, 2021

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.

AI-generated description

Daily QA Visualization in progress.

MIT Licensed

Similar vizzes

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

89% match

Loading thumbnail…

Fork of DailyQA_may2

This example shows a static donut chart displaying five categorical values as colored slices with black outlines and partial opacity. The chart is rendered in an SVG generated with D3 v6, using `d3.pie()` and `d3.arc()` to compute slice geometry and `d3.scaleOrdinal()` for the categorical color scale. Dummy data is hardcoded in the script, and the visualization is centered within a fixed 450×450 pixel canvas. The code forks from a DailyQA project and includes no interactivity or animation.

Mmauricio-acosta-reyes

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

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

77% match

Loading thumbnail…

Testing Pie Chart

This interactive dashboard combines a pie chart, bar chart, and line chart to display categorical and time-based data. The pie chart animates its inner radius using D3’s arc generators and transitions, with slices labeled by category. The line and bar charts use D3 scales, axes, and SVG paths to render trends and comparisons. All visualizations are built with D3 v2 and React, using SVG for rendering and animation.

Ssrinivasjavvadi

74% match

Loading thumbnail…

Dataviz 6 - Visualizing data with React and D3

This example visualizes CSS named colors from a remote CSV dataset as a radial burst of colored arcs arranged in a pie chart. The SVG rendering is powered by React, which maps each data row to a `<path>` element, while D3’s `pie` and `arc` utilities compute the angular segments. The chart’s center-aligned arcs use the data’s “RGB hex value” field for fill colors, and the interface initially displays a loading state before the data arrives.

RRyAlpha

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

74% match

Loading thumbnail…

Pie

This example shows a radial burst of colored arcs, each representing a CSS named color from a dataset loaded via `d3.csv`. The visualization renders a full circle of pie slices with no gaps, using React to manage state and render SVG paths. It leverages `d3.pie` to compute arc angles and `d3.arc` to generate the path geometry, with each slice filled using the color’s hexadecimal value from the data. The code demonstrates a hybrid approach where D3 handles data loading and calculations while React handles the DOM updates.

SStarkerRegen

73% match