xMR chart

100%

✓ Published1🌍 Public

Last edited May 4, 2021

Created on May 3, 2021

This example demonstrates an xMR control chart, a statistical process control tool that plots individual data points and their moving ranges over time. It uses a dataset of monthly measurements (from April 2017 to June 2020) to identify the first point where the process goes out of statistical control. The chart computes the mean and average moving range from the first 12 points, then applies Western Electric rules (two points beyond 2 sigma, or three points beyond 1 sigma) to detect the breakpoint. The visualization is built with D3 v6’s `select`, `csv`, and `mean` functions for data loading and calculation.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

xMR char calc v2

This visualization plots 39 monthly data points and computes control limits using a moving range approach. It identifies breakpoints where the process shifts, applying three rules: points exceeding 2.66 times the average moving range, two of three points beyond 1.98 sigma, and seven consecutive points above the mean. The code uses d3.csv, d3.mean, and array methods to calculate lower and upper bounds, rendering the series with D3 v6.

AAnimesh Nautiyal

87% match

Loading thumbnail…

xMR char calc v3 -- changing initial condition for mr avg

This visualization demonstrates a statistical process control chart that calculates upper and lower control limits for a time series dataset using an XMR (moving range) method with a dynamic initial condition. The code, written in D3 v6, loads data from a CSV file and computes moving ranges, averages, and breakpoints to detect shifts in the process. It uses D3’s `csv`, `mean`, `sum`, and `select` APIs, while the custom functions `calculateMR`, `calculateMinimum`, and `calculateBreakPoint` implement the control limit logic. The chart updates as the initial condition for the moving average changes, revealing how early data points influence the bounds.

AAnimesh Nautiyal

85% match

Loading thumbnail…

XmR

This example demonstrates an XmR control chart—a statistical process control tool—by loading a CSV dataset of numeric measurements and computing the moving range between consecutive values. The visualization itself is not yet rendered; instead, the code focuses on data preprocessing using `d3.csv` and `d3.mean` to parse and log the raw values and their absolute differences. The D3 v6 library fetches data from a GitHub Gist, while a minimal HTML page sets up a blank canvas with oversized text styling, leaving the chart implementation open for future steps.

AAnimesh Nautiyal

80% match

Loading thumbnail…

Fork of xMR char calc v3 -- changing initial condition for mr avg

This fork of the xMR char calculator v3 alters the initial condition for the moving range average, demonstrating how control chart bounds shift under different starting assumptions. It computes upper and lower bounds using a moving range formula, segmenting data into 12-point windows and detecting breakpoints where values exceed sigma thresholds. The visualization relies on D3 v6’s `select`, `csv`, `mean`, and `sum` APIs, with the dataset embedded as an array in the code. A line chart would typically display the bounds, though the current script only logs the calculated arrays to the console.

SShweta-tech

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

58% match

Loading thumbnail…

Moving average & st.dev. with outliers

A D3.js visualization plots 100 random integers as points, with a steel-blue moving average line computed over a 10-point window via the custom `sma` function. Red points mark outliers where the distance from the moving average exceeds the rolling standard deviation, calculated by the `standardDeviation` function. The chart also renders a semi-transparent standard-deviation band around the average using D3's area and line generators. The raw data array appears as small monospace text at the top, while the SVG output is generated with d3.scaleLinear, d3.randomIrwinHall, and d3.curveCatmullRomOpen.

PPatrick Wojda

56% match

Loading thumbnail…

simple line chart from dataset

A simple line chart visualizes a small dataset of seven monthly values from January to July 2016. The chart shows a fluctuating trend, with values rising from 10 to 50 before dropping back to 10. The visualization uses D3 v4 with SVG rendering, employing `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` to construct the path, while `d3.json` loads the data from `dataset.json`. Axis labels display formatted dates, and the final value is annotated with a text element.

LLRobergeon

56% match

Loading thumbnail…

Median PM2.5 daily concentration

This line chart visualizes median PM2.5 daily concentration across months, with a smooth curve connecting data points. The y-axis measures concentration levels, while the x-axis represents months from January through December. Built with D3 v5, the code uses `scaleLinear`, `scaleTime`, `axisLeft`, `axisBottom`, and `line` with `curveBasis` to generate the SVG path. Data is loaded from a CSV file hosted on GitHub Gist, and the chart includes styled grid lines and axis labels. The rendering approach uses an SVG element with margins defining the plotting area.

Llibramanju

56% match