Skip to main content
SimilarExport ZIP
100%

SPC Icons

✓ Published1🌍 Public
AAdil Zeshan
Last edited Dec 22, 2020
Created on Dec 21, 2020
Forked from SPC Icons

A collection of circular SVG icons encodes Statistical Process Control (SPC) states, including pass, fail, erratic, random, and high/low variation outcomes. Each icon combines a colored ring, a letter label, and a simple line chart rendered with D3’s `line` and `curveBasis` functions. React components compose reusable elements like borders, target lines, and plot lines, with props for width, height, and performance (improvement or concern) that adjust stroke colors dynamically. The icons are displayed in a responsive flex layout.

AI-generated description

Statistical Process Control (SPC) Icons

MIT Licensed

Similar vizzes

Loading thumbnail…

SPC Icons

Six circular SPC icons encode process control states: pass, fail, erratic, random, high, and low variation. Each icon combines a colored border, letter, and trend line, with high and low icons accepting a `performance` prop to switch between improvement and concern colors. Built with React and rendered as SVG, the icons use D3 line generators and basis curves for the erratic paths, plus SVG markers to highlight data points.

AAdil Zeshan
94% match
Loading thumbnail…

SPC Icons

Six reusable React icons visualize statistical process control concepts, with pass, fail, and erratic assurance icons shown as circular badges containing a letter and a smoothed d3 curve line. Variation icons display line charts with markers, where the high and low icons accept a performance prop to toggle between improvement and concern colors. The SVG components are composed from small modular files that compute coordinates from width and height props.

NNita
93% match
Loading thumbnail…

React Icons

Six React icon components visualize Statistical Process Control outcomes: Pass, Fail, and Erratic assurance states, plus High, Low, and Random variation patterns. Icons use SVG circles, letters, and D3 line paths with curveBasis to draw process trends. High and Low icons accept a performance prop for improvement or concern styling. The example renders eight icons at 200 by 200 pixels each, demonstrating reusable, parameterized icon components built with React and D3 for SVG rendering.

110thblock
84% match
Loading thumbnail…

[bug fix] SPC Icons

This example demonstrates a bug fix for SVG markers defined within `<defs>` elements, showing two variations of a "High" SPC icon with different performance states: improvement (blue) and concern (orange). The React components use d3’s `line` function to draw plot lines with circular markers applied via `marker-start`, `marker-mid`, and `marker-end` attributes. The fix ensures markers inherit the correct fill color from their parent definitions, rendering distinct colored endpoints for each performance state.

CCurran Kelleher
78% match
Loading thumbnail…

Pseudo Visualizations

Three identical blue-and-white swirl icons are arranged in a vertical column, each rendered as a set of curved SVG paths with a shared CSS style. The icons resemble a stylized recycling or motion symbol, with each path stroke outlined in white on a transparent background. The page uses plain HTML and inline SVG, with no JavaScript or React framework logic present despite the metadata listing. The drawing relies entirely on hardcoded path coordinates and CSS classes for styling.

MmyN3RD
69% match
Loading thumbnail…

SPAC Interactive Color Legend

This interactive scatterplot displays CSS named colors as a radial burst, with a color legend that highlights matching data points on hover. The visualization uses D3 utilities for data loading and scales (scaleLinear, scaleOrdinal, extent, max), while React components render the SVG marks, axes, and interactive legend. Users can select different attributes from dropdown menus to change the x and y axes, and hovering over a legend item fades non-matching points to 30% opacity. The data comes from a CSV file loaded asynchronously via D3’s csv function.

Ppnlinyz
69% match
Loading thumbnail…

Icons on the side of a scatter plot

A scatter plot with eight colored dots moves from a vertical line to a two-axis layout, drawing curved paths behind each point. Each dot leaves a circular icon on the axis edge, showing how points transition between dimensional configurations. Built with d3.v4, the animation uses SVG transition methods on circles and paths to interpolate positions, axes, and curved arcs. The random data is generated inline, with a palette of ten colors and a fixed plot field.

PPatrick Wojda
66% match
Loading thumbnail…

Fork of SPAC_ Interactive Color Legend

A React and D3.js scatter plot visualizes SPAC performance, plotting current price against annualized return for each company. Circles are sized by market cap and colored by sector through an ordinal color scale. Users can hover over the interactive color legend to highlight points from a specific sector while dimming the rest. Data comes from a CSV file loaded via `d3.csv`, with all marks rendered as SVG circles.

Aayonghosh2003
66% match