5.0 LSS Dashboard

100%

5.0 LSS Dashboard

✓ Published0🌍 Public

Last edited Apr 30, 2021

Created on Apr 9, 2021

This dashboard compares a control chart with a capability analysis histogram to assess process stability. The left panel displays a line chart of the selected phase, including the average and control limits, with special cause rules highlighting out-of-control points in red. The right panel shows a histogram with an overlaid normal distribution, depicting short-term (ST) and long-term (LT) process capability lines. Users adjust the mean and standard deviation via sliders, which recalculates the data. The visualization uses React for components and D3 (v6) for SVG, scales, axes, and rendering.

AI-generated description

Loading data with d3 and using react

MIT Licensed

Similar vizzes

Loading thumbnail…

React D3 Conditional Line Chart Practice - Tires R-Chart

This React and D3 line chart displays tire manufacturing quality control data as an R-chart, plotting sample ranges against upper and lower control limits (UCL and LCL). Conditionally colored circles mark each point as green, red, or amber based on whether values exceed the UCL threshold of 29.3383 or fall below the LCL of 0. The chart uses d3.scaleLinear for both axes, d3.line for the connected path and control limit lines, and d3.csv to load data from a local CSV file. SVG rendering displays axis ticks, dashed boundary lines, and hover tooltips.

AAndre J Denais

64% match

Loading thumbnail…

React D3 Conditional Line Chart Practice - SFO Temp X-Bar

This React and D3 v6 example renders a statistical process control chart of San Francisco’s mean temperatures by year, using data from a local CSV file. The SVG visualization plots a connected line of sample means, with points conditionally colored green, amber, or red based on whether they fall within, below, or above the control limits (LCL and UCL). It overlays dashed lines for the upper and lower control limits and includes axis components built with `d3.scaleTime`, `d3.scaleLinear`, and custom React components.

AAndre J Denais

63% match

Loading thumbnail…

Linechart Version 5

This interactive visualization lets users explore temperature data over time through either a line chart or an area chart, with dropdown menus to select axes and a grouping variable that triggers a color legend. The charts are rendered as SVG with D3 v5, using scales like `scaleTime` and `scaleLinear`, axes from `axisBottom` and `axisLeft`, and a tooltip that updates on mouse movement. A slider adjusts point opacity, a number input changes line width, and a button toggles between chart types.

SSchmittYannic

63% match

Loading thumbnail…

Dashboard

This dashboard presents a scatterplot comparing pairs of weather variables, such as temperature and humidity, from a dataset that includes daily records. Users select the x and y variables from dropdown menus to change the visualization. The chart is rendered as an SVG using D3 v5, with D3’s scale and axis components generating the grid and tick marks. The surrounding layout uses CSS to position header panels and the plot area.

Eeourm20

62% match

Loading thumbnail…

Making Axes

This interactive chart, built with React and D3.js, traces how a numeric value changes over time, with data points colored by threshold—green below 50, amber between 50 and 75, and red above 75. Dashed reference lines at 50 and 75 mark these risk zones, and hovering over a circle reveals the exact percentage. The visualization uses a time-scaled x-axis and a linear y-axis, rendering an SVG connected scatter plot from CSV data.

JJamesHop31

62% match

Loading thumbnail…

Process Change Visualization

This interactive application lets users explore process changes through a central visualization and two specialized inspectors. The main visualization and the activity and drift inspectors are accessed via prominent buttons on the landing page, with the overall layout styled through a fixed-position CSS. Built with D3.js (v5) and rendered as an SVG, the application's core `index.js` script manipulates the SVG canvas by setting its dimensions and appending a rounded rectangle. The interface provides navigation but does not reveal the underlying data or the specific visual encodings of the process changes themselves.

NNikki-gea

61% match

Loading thumbnail…

React D3 Conditional Line Chart Practice

A time-series line chart tracks a risk value as a percentage over monthly intervals from 2015 to 2016, with each data point colored by a conditional threshold: green below 50, amber between 50 and 75, and red above 75. Dashed reference lines mark the 50% and 75% boundaries. Built with React and D3 v6, the visualization uses `scaleTime` and `scaleLinear` for axes, `d3.line()` for the connecting path, and `d3.csv` to load the data from points.csv. SVG circles render each point, with hover tooltips showing the exact value via the `<title>` element.

AAndre J Denais

61% match

Loading thumbnail…

React D3 Conditional Line Chart Practice - Tires X-Bar

This example shows sample mean values across 20 sequential samples as a connected scatter plot, with points colored green, amber, or red based on whether they fall within or outside the control limits of 17.5037 and 40.8296. Dashed lines mark the upper and lower control limits, and hovering over a point reveals its exact sample mean value in a tooltip. The visualization uses React with D3 v6, employing `d3.scaleLinear` for both axes, `d3.line` for the connected path and limit lines, and CSS classes for conditional point coloring. Data is loaded from a CSV file using `d3.csv`.

AAndre J Denais

61% match