xMR char calc v2

100%

xMR char calc v2

✓ Published1🌍 Public

Last edited May 4, 2021

Created on May 4, 2021

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

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

88% match

Loading thumbnail…

xMR chart

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.

AAnimesh Nautiyal

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

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

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

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

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

57% match

Loading thumbnail…

multiline with threshold

The chart shows trends in free sugar intake across age groups over four time periods, with a red-shaded region marking values above a 12% threshold and a dashed line at that cutoff. Each line represents a demographic category, encoded as an SVG path using d3.line and d3.scalePoint for the time axis. The threshold overlay is drawn with a linearGradient that transitions from blue to red based on y-position, while the data lines are stroke-filled using that same gradient reference. The source CSV is parsed via d3.csv, and axes are rendered with d3.axisBottom and d3.axisLeft.

PPatrick Wojda

57% match