Fork of Fork trying to get the donut plot IPIPIPI

100%

Fork of Fork trying to get the donut plot IPIPIPI

✓ Published2🌍 Public

Last edited May 4, 2021

Created on May 4, 2021

Forked from Fork trying to get the donut plot

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.

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

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

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

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

80% match

Loading thumbnail…

Fork of Pie chart

A donut chart displays the distribution of survey respondents across different age groups, with each segment colored distinctly and labeled with its corresponding value. Legends on the right identify each age group and its member count. The visualization uses D3 v5’s `pie` and `arc` generators to compute segment paths, `scaleOrdinal` for color mapping, and `format` for number formatting. Data is fetched as CSV from a GitHub gist, and the SVG is rendered within a React component.

VVineela Reddy

80% match

Loading thumbnail…

Fork of Donut Chart v2

This donut chart displays proportional data from a JSON file (data.json) with country names and numeric sums, rendered as an SVG using D3.js v4. The visualization uses a pie layout with a half-radius inner hole and divergent color scheme from d3-scale-chromatic. Labels are positioned outside the arcs using polyline connectors and text elements, with the arc generator determining slice geometry and outerArc handling label placement. The example demonstrates D3’s modular approach to building interactive, data-driven graphics.

MMaeva B

80% match

Loading thumbnail…

Fork of Fork of loading data w/ react and d3

A pie chart displays the proportional distribution of named colors, using their RGB hex values for the fill color of each slice. The chart is built with React, which manages the asynchronous loading of a CSV file via `d3.csv` and conditional rendering, while ReactDOM mounts the component. The geometric layout and slice drawing rely on the D3 modules `d3.arc` and `d3.pie`, which compute the arc paths for each data row. The example demonstrates a minimal integration of D3’s data-processing and shape-generation functions within a React component structure, rendered as an SVG graphic.

SSamuele Greco

79% match

Loading thumbnail…

Fork of Pie chart in React & D3 - 1st attempt

A donut chart in React and D3 renders four slices with a teal-to-black color gradient, generated by `d3.interpolateRgb` and drawn using `d3.pie` and `d3.arc`. React components (`Slice`) map over the pie data to produce SVG `<path>` elements within a centered `<g>` transform. A separate, commented-out `Check` component demonstrates a linear sequence of gradient rectangles using the same interpolation approach.

LLeon Cheng

78% match