SPC Icons

100%

✓ Published0🌍 Public

Last edited Dec 22, 2020

Created on Dec 22, 2020

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.

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

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.

AAdil Zeshan

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

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

67% 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…

Icons on the side of a scatter plot

Eight colored dot icons sit in a vertical strip on the left edge of a scatter plot, each linked by a connector line to a corresponding circle arranged in a vertical line at the center of the chart. A button labeled “MOVE” triggers a `d3.transition` that animates the circles from the centered, one-dimensional arrangement into a two-dimensional scatter plot with random x and y coordinates, while the icons remain fixed as a legend. The visualization uses D3 v4 with SVG elements, including markers for arrowheads, and demonstrates how a categorical axis can be represented by icons placed perpendicular to the plot’s main axes.

PPatrick Wojda

66% match