Skip to main content
SimilarExport ZIP
100%

React Icons

✓ Published0🌍 Public
110thblock
Last edited Jan 23, 2023
Created on Jan 23, 2023
Forked from SPC 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.

AI-generated description

Statistical Process Control (SPC) Icons

MIT Licensed

Similar vizzes

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
88% 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
84% match
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
83% 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
67% 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
67% match
Loading thumbnail…

Test

This example demonstrates basic SVG shape rendering in a React application, combining a circle, a rectangle, and an icon path from Bootstrap Icons. The SVG elements are drawn directly in the HTML markup, with the rectangle using a pink stroke for visual emphasis. The code also includes Bootstrap Icons styling through the `fill="currentColor"` attribute and viewBox coordinate system. As a minimal starter, it shows how static SVG graphics can be embedded in a React component without additional visualization libraries.

KKatrin Schönborn
66% match
Loading thumbnail…

ICE-6:Rendering Marks and Channels with react & D3

Single-page React app renders six small SVG charts with D3 v5, each demonstrating a distinct mark or channel used in data visualization. Vertical strips show x-position, y-position, size, length, shape, and hue encoding via circles, rectangles, and D3 symbols. The charts use data arrays mapped through D3 selections with `.join()` for bound updates. React manages the container and rendering lifecycle, while individual modules like `xPosition.js` and `size.js` apply channel-specific scales, and `hue.js` uses `schemeCategory10`.

SSANEEM MOHAMMAD
65% match
Loading thumbnail…

Fork of Fork of Random square shapes with react July 4,2022 - 2

A collection of 190 nested square outlines and small circles rendered in SVG, colored with random RGB values and positioned along a logarithmic curve derived from the input number. The React app maps an array of calculated values to custom `My_circle` components, each drawing a square with a dynamic stroke width and a static drop-shadow filter. Using React 16 and D3 v7 solely for SVG selection and attribute setup, the visualization applies `Math.random()` for stroke thickness and color channel values, with the viewport set to 960×500 pixels.

NNita
64% match