Fork of Fork trying to get the donut plot

100%

Fork of Fork trying to get the donut plot

✓ Published0🌍 Public

Last edited May 13, 2021

Created on May 13, 2021

Forked from 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.

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

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

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

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

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

79% match

Loading thumbnail…

Fork of Donut

A fork of a donut chart, this example displays the current day of the year as a percentage of the total days in the year. The visualization renders a semi-circular progress gauge using D3’s `arc` generator, with a gray background arc and an orange foreground arc that advances as the year progresses. The code calculates the progress by dividing the day-of-year by the total days, using D3’s `timeFormat`. Built with React and rendered as SVG, the gauge includes a centered text label showing the rounded percentage.

Ddriftcafe

79% match

Loading thumbnail…

Fork of HTML Starter

This example shows a donut chart displaying six data categories labeled District A through F, with values assigned as static data in a d3 array. The visualization uses `d3.arc` to create the donut shape with an inner radius of 40 and outer radius derived from the viewport, and `d3.pie` to compute the angles for each segment. The chart is rendered as an SVG appended to the body, with each slice filled in steelblue and white strokes, while custom text labels are positioned using `arc.centroid` and rotated based on the slice’s start and end angles. The color scale `d3.scaleOrdinal` defines a range but is not used for slice fills in the code.

Vvipin kumar paikra

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

78% match