2b:null 2c:["$","title",null,{"children":"Accuracy and Precision | Allen Q | Observable"}] 31:Ta70,measurementData = { const { trueLength, resolution, bias, precision, trials } = measurementSettings; // ============================================================ // DETERMINISTIC RANDOM GENERATOR // ============================================================ let seed = 123456789; function random() { seed = ( seed * 1664525 + 1013904223 ) % 4294967296; return ( seed / 4294967296 ); } // ============================================================ // NORMAL RANDOM NUMBER // Box-Muller transform // ============================================================ function normalRandom() { let u1 = Math.max( random(), 1e-12 ); let u2 = random(); return ( Math.sqrt( -2 * Math.log(u1) ) * Math.cos( 2 * Math.PI * u2 ) ); } // ============================================================ // IDEAL READING OF MIS-CALIBRATED RULER // // +1% bias means the ruler tends to read 1% high. // ============================================================ const calibrationFactor = 1 + bias / 100; const idealReading = trueLength * calibrationFactor; // ============================================================ // REPEATED MEASUREMENTS // ============================================================ const measurements = d3.range(trials) .map( i => { const noisyReading = idealReading + normalRandom() * precision; const measured = Math.round( noisyReading / resolution ) * resolution; return { trial: i + 1, measured, error: measured - trueLength, absoluteError: Math.abs( measured - trueLength ) }; } ); const mean = d3.mean( measurements, d => d.measured ); const sd = measurements.length > 1 ? d3.deviation( measurements, d => d.measured ) : 0; const meanError = mean - trueLength; return { trueLength, resolution, bias, precision, trials, calibrationFactor, idealReading, measurements, mean, sd: sd ?? 0, meanError }; }32:T4a80,measurementVisualizer = { const data = measurementData; // ============================================================ // DIMENSIONS // ============================================================ const W = Math.max( 700, width ); const H = 500; const margin = { left: 70, right: 55, top: 50, bottom: 60 }; // Give some space beyond the object. const domainMax = Math.max( 15, data.trueLength * 1.18 ); // ============================================================ // CONTAINER // ============================================================ const container = html`

`; // ============================================================ // SVG // ============================================================ const svg = d3 .create("svg") .attr( "viewBox", [0, 0, W, H] ) .style( "display", "block" ) .style( "width", "100%" ) .style( "height", "auto" ) .style( "background", "#ffffff" ); // ============================================================ // CLIP AREA // ============================================================ svg .append("defs") .append("clipPath") .attr( "id", "measurement-clip" ) .append("rect") .attr( "x", margin.left ) .attr( "y", 20 ) .attr( "width", W - margin.left - margin.right ) .attr( "height", H - 70 ); // ============================================================ // BASE SCALE // ============================================================ const baseScale = d3 .scaleLinear() .domain( [0, domainMax] ) .range( [ margin.left, W - margin.right ] ); // ============================================================ // GROUPS // ============================================================ const plot = svg .append("g") .attr( "clip-path", "url(#measurement-clip)" ); const rulerGroup = plot .append("g"); const objectGroup = plot .append("g"); const measurementGroup = plot .append("g"); const axisGroup = svg .append("g"); // ============================================================ // VERTICAL POSITIONS // ============================================================ const rulerY = 205; const objectY = 285; const measurementsY = 345; // ============================================================ // RULER READING -> TRUE PHYSICAL POSITION // // If ruler reads high by +1%: // // displayed 10 cm corresponds physically // to less than 10 cm. // ============================================================ function readingToPhysical( reading ) { return ( reading / data.calibrationFactor ); } // ============================================================ // CURRENT ZOOM TRANSFORM // ============================================================ let currentTransform = d3.zoomIdentity; // ============================================================ // DRAW // ============================================================ function render( transform ) { currentTransform = transform; const x = transform .rescaleX( baseScale ); // ========================================================== // CLEAR // ========================================================== rulerGroup .selectAll("*") .remove(); objectGroup .selectAll("*") .remove(); measurementGroup .selectAll("*") .remove(); axisGroup .selectAll("*") .remove(); // ========================================================== // OBJECT // ========================================================== objectGroup .append("line") .attr( "x1", x(0) ) .attr( "x2", x( data.trueLength ) ) .attr( "y1", objectY ) .attr( "y2", objectY ) .attr( "stroke", "#111827" ) .attr( "stroke-width", 8 ) .attr( "stroke-linecap", "round" ); // Start objectGroup .append("line") .attr( "x1", x(0) ) .attr( "x2", x(0) ) .attr( "y1", objectY - 18 ) .attr( "y2", objectY + 18 ) .attr( "stroke", "#111827" ) .attr( "stroke-width", 2 ); // True endpoint objectGroup .append("line") .attr( "x1", x( data.trueLength ) ) .attr( "x2", x( data.trueLength ) ) .attr( "y1", rulerY - 25 ) .attr( "y2", measurementsY + 40 ) .attr( "stroke", "#2563eb" ) .attr( "stroke-width", 2 ) .attr( "stroke-dasharray", "5,4" ); objectGroup .append("text") .attr( "x", x( data.trueLength ) ) .attr( "y", objectY + 31 ) .attr( "text-anchor", "middle" ) .attr( "font-size", 12 ) .attr( "font-weight", 700 ) .attr( "fill", "#2563eb" ) .text( `True length = ${data.trueLength.toFixed(2)} cm` ); // ========================================================== // RULER BODY // ========================================================== rulerGroup .append("rect") .attr( "x", x(0) ) .attr( "y", rulerY - 45 ) .attr( "width", Math.max( 0, x(domainMax) - x(0) ) ) .attr( "height", 58 ) .attr( "fill", "#f8fafc" ) .attr( "stroke", "#64748b" ); // ========================================================== // RULER TICKS // ========================================================== const maxReading = domainMax * data.calibrationFactor; const nTicks = Math.ceil( maxReading / data.resolution ); for ( let i = 0; i <= nTicks; i++ ) { const reading = i * data.resolution; const physical = readingToPhysical( reading ); const px = x( physical ); const major = Math.abs( reading - Math.round(reading) ) < data.resolution * 0.1; const half = !major && Math.abs( reading * 2 - Math.round( reading * 2 ) ) < 0.001; const tickHeight = major ? 35 : half ? 25 : 17; rulerGroup .append("line") .attr( "x1", px ) .attr( "x2", px ) .attr( "y1", rulerY - 45 ) .attr( "y2", rulerY - 45 + tickHeight ) .attr( "stroke", "#334155" ) .attr( "stroke-width", major ? 1.4 : 0.8 ); if ( major ) { rulerGroup .append("text") .attr( "x", px ) .attr( "y", rulerY + 4 ) .attr( "text-anchor", "middle" ) .attr( "font-size", 11 ) .attr( "fill", "#334155" ) .text( Math.round( reading ) ); } } rulerGroup .append("text") .attr( "x", x(0) ) .attr( "y", rulerY - 58 ) .attr( "font-size", 12 ) .attr( "font-weight", 700 ) .attr( "fill", "#334155" ) .text( `Ruler · resolution ${data.resolution} cm` ); // ========================================================== // FIRST MEASUREMENT // ========================================================== const first = data.measurements[0]; const measuredPhysical = readingToPhysical( first.measured ); measurementGroup .append("line") .attr( "x1", x( measuredPhysical ) ) .attr( "x2", x( measuredPhysical ) ) .attr( "y1", rulerY - 5 ) .attr( "y2", measurementsY + 28 ) .attr( "stroke", "#dc2626" ) .attr( "stroke-width", 2 ); measurementGroup .append("text") .attr( "x", x( measuredPhysical ) ) .attr( "y", measurementsY + 44 ) .attr( "text-anchor", "middle" ) .attr( "font-size", 11 ) .attr( "font-weight", 700 ) .attr( "fill", "#dc2626" ) .text( `Measured = ${first.measured.toFixed(2)} cm` ); // ========================================================== // ERROR BRACKET // ========================================================== const trueX = x( data.trueLength ); const measuredX = x( measuredPhysical ); const bracketY = 245; measurementGroup .append("line") .attr( "x1", trueX ) .attr( "x2", measuredX ) .attr( "y1", bracketY ) .attr( "y2", bracketY ) .attr( "stroke", "#dc2626" ) .attr( "stroke-width", 3 ); measurementGroup .append("line") .attr( "x1", trueX ) .attr( "x2", trueX ) .attr( "y1", bracketY - 7 ) .attr( "y2", bracketY + 7 ) .attr( "stroke", "#dc2626" ); measurementGroup .append("line") .attr( "x1", measuredX ) .attr( "x2", measuredX ) .attr( "y1", bracketY - 7 ) .attr( "y2", bracketY + 7 ) .attr( "stroke", "#dc2626" ); measurementGroup .append("text") .attr( "x", ( trueX + measuredX ) / 2 ) .attr( "y", bracketY - 10 ) .attr( "text-anchor", "middle" ) .attr( "font-size", 11 ) .attr( "fill", "#dc2626" ) .text( `error = ${first.error >= 0 ? "+" : ""}${first.error.toFixed(2)} cm` ); // ========================================================== // REPEATED MEASUREMENTS // ========================================================== data.measurements .forEach( (m, i) => { const physical = readingToPhysical( m.measured ); measurementGroup .append("circle") .attr( "cx", x( physical ) ) .attr( "cy", measurementsY + (i % 2) * 15 ) .attr( "r", 4 ) .attr( "fill", "#f59e0b" ) .attr( "stroke", "white" ) .attr( "stroke-width", 1 ) .append("title") .text( `Trial ${m.trial} Measured: ${m.measured.toFixed(2)} cm Error: ${m.error.toFixed(2)} cm` ); } ); // ========================================================== // PHYSICAL POSITION AXIS // ========================================================== axisGroup .attr( "transform", `translate(0, ${H - margin.bottom})` ) .call( d3 .axisBottom(x) .ticks(10) .tickFormat( d => `${d} cm` ) ); axisGroup .selectAll("text") .attr( "font-size", 10 ); } // ============================================================ // ZOOM // ============================================================ const zoom = d3 .zoom() .scaleExtent( [1, 80] ) .translateExtent([ [ margin.left, 0 ], [ W - margin.right, H ] ]) .extent([ [ margin.left, 0 ], [ W - margin.right, H ] ]) .on( "zoom", event => { render( event.transform ); } ); svg.call( zoom ); // ============================================================ // INITIAL DRAW // ============================================================ render( d3.zoomIdentity ); // ============================================================ // ZOOM TO ENDPOINT // ============================================================ container .querySelector( ".zoom-end" ) .addEventListener( "click", () => { const k = 18; const targetX = baseScale( data.trueLength ); const center = ( margin.left + W - margin.right ) / 2; const tx = center - k * targetX; const transform = d3 .zoomIdentity .translate( tx, 0 ) .scale( k ); svg .transition() .duration( 750 ) .call( zoom.transform, transform ); } ); // ============================================================ // RESET VIEW // ============================================================ container .querySelector( ".reset" ) .addEventListener( "click", () => { svg .transition() .duration( 600 ) .call( zoom.transform, d3.zoomIdentity ); } ); // ============================================================ // SUMMARY // ============================================================ const summary = container.querySelector( ".summary" ); const accuracyClass = Math.abs( data.meanError ) < data.resolution ? "High" : "Reduced"; const precisionClass = data.sd <= data.resolution ? "High" : "Reduced"; summary.innerHTML = ` True length: ${data.trueLength.toFixed(2)} cm · Mean measured length: ${data.mean.toFixed(3)} cm
Mean error: ${ data.meanError >= 0 ? "+" : "" } ${data.meanError.toFixed(3)} cm · Measurement spread: σ = ${data.sd.toFixed(3)} cm

Accuracy: ${accuracyClass} · Precision: ${precisionClass}

Blue line = true endpoint. Red line = first measured endpoint. Orange dots = repeated measurements.
Scroll to zoom, drag horizontally to explore, or use Zoom to endpoint. `; // ============================================================ // ADD SVG // ============================================================ container .querySelector( ".chart" ) .append( svg.node() ); return container; }33:T9e5,apData = { const { trueValue, bias, sigma, trials } = apSettings; // ============================================================ // DETERMINISTIC RANDOM GENERATOR // ============================================================ let seed = 987654321; function random() { seed = ( seed * 1664525 + 1013904223 ) % 4294967296; return ( seed / 4294967296 ); } // ============================================================ // NORMAL DISTRIBUTION // Box-Muller transform // ============================================================ function normalRandom() { const u1 = Math.max( random(), 1e-12 ); const u2 = random(); return ( Math.sqrt( -2 * Math.log(u1) ) * Math.cos( 2 * Math.PI * u2 ) ); } // ============================================================ // ONE-DIMENSIONAL MEASUREMENTS // ============================================================ const measurements = d3.range(trials) .map( i => { const value = trueValue + bias + sigma * normalRandom(); return { trial: i + 1, value, error: value - trueValue }; } ); const mean = d3.mean( measurements, d => d.value ); const sd = d3.deviation( measurements, d => d.value ) ?? 0; const meanError = mean - trueValue; // ============================================================ // 2D CLOUD FOR PEDAGOGICAL VISUALIZATION // // x = measurement error // y = visual jitter using same random spread // ============================================================ seed = 123456; const cloud = d3.range(trials) .map( i => { const x = bias + sigma * normalRandom(); const y = sigma * normalRandom(); return { trial: i + 1, x, y }; } ); return { trueValue, bias, sigma, trials, measurements, cloud, mean, sd, meanError }; }34:T1f69,accuracyPrecisionCases = { // ============================================================ // DIMENSIONS // ============================================================ const W = Math.max( 760, width ); const H = 620; const cellW = W / 2; const cellH = H / 2; // ============================================================ // CASE DEFINITIONS // ============================================================ const cases = [ { title: "High Accuracy · Low Precision", bias: 0, sigma: 0.42, col: 0, row: 0 }, { title: "High Accuracy · High Precision", bias: 0, sigma: 0.10, col: 1, row: 0 }, { title: "Low Accuracy · Low Precision", bias: 0.65, sigma: 0.42, col: 0, row: 1 }, { title: "Low Accuracy · High Precision", bias: 0.65, sigma: 0.10, col: 1, row: 1 } ]; // ============================================================ // RANDOM GENERATOR // ============================================================ let seed = 246813579; function random() { seed = ( seed * 1664525 + 1013904223 ) % 4294967296; return ( seed / 4294967296 ); } function normalRandom() { const u1 = Math.max( random(), 1e-12 ); const u2 = random(); return ( Math.sqrt( -2 * Math.log(u1) ) * Math.cos( 2 * Math.PI * u2 ) ); } // ============================================================ // SVG // ============================================================ const svg = d3 .create("svg") .attr( "viewBox", [0, 0, W, H] ) .style( "width", "100%" ) .style( "height", "auto" ); // ============================================================ // DRAW EACH CASE // ============================================================ for ( const c of cases ) { const cx = c.col * cellW + cellW / 2; const cy = c.row * cellH + cellH / 2 + 25; const radius = Math.min( cellW, cellH ) * 0.29; const scale = d3 .scaleLinear() .domain( [-1.4, 1.4] ) .range( [-radius, radius] ); // ---------------------------------------------------------- // PANEL SEPARATOR // ---------------------------------------------------------- if ( c.col === 1 ) { svg .append("line") .attr( "x1", cellW ) .attr( "x2", cellW ) .attr( "y1", 15 ) .attr( "y2", H - 15 ) .attr( "stroke", "#e2e8f0" ); } if ( c.row === 1 ) { svg .append("line") .attr( "x1", 15 ) .attr( "x2", W - 15 ) .attr( "y1", cellH ) .attr( "y2", cellH ) .attr( "stroke", "#e2e8f0" ); } // ---------------------------------------------------------- // TITLE // ---------------------------------------------------------- svg .append("text") .attr( "x", cx ) .attr( "y", c.row * cellH + 34 ) .attr( "text-anchor", "middle" ) .attr( "font-size", 15 ) .attr( "font-weight", 700 ) .attr( "fill", "#1f2937" ) .text( c.title ); // ---------------------------------------------------------- // TARGET RINGS // ---------------------------------------------------------- [1, 0.75, 0.5, 0.25] .forEach( f => { svg .append("circle") .attr( "cx", cx ) .attr( "cy", cy ) .attr( "r", radius * f ) .attr( "fill", "none" ) .attr( "stroke", "#cbd5e1" ) .attr( "stroke-width", 1.2 ); } ); // ---------------------------------------------------------- // TRUE VALUE // ---------------------------------------------------------- svg .append("line") .attr( "x1", cx - 10 ) .attr( "x2", cx + 10 ) .attr( "y1", cy ) .attr( "y2", cy ) .attr( "stroke", "#2563eb" ) .attr( "stroke-width", 2.5 ); svg .append("line") .attr( "x1", cx ) .attr( "x2", cx ) .attr( "y1", cy - 10 ) .attr( "y2", cy + 10 ) .attr( "stroke", "#2563eb" ) .attr( "stroke-width", 2.5 ); // ---------------------------------------------------------- // POINT CLOUD // ---------------------------------------------------------- const points = d3.range(22) .map( () => ({ x: c.bias + c.sigma * normalRandom(), y: c.sigma * normalRandom() }) ); svg .append("g") .selectAll("circle") .data( points ) .join("circle") .attr( "cx", d => cx + scale(d.x) ) .attr( "cy", d => cy + scale(d.y) ) .attr( "r", 5 ) .attr( "fill", "#f59e0b" ) .attr( "fill-opacity", 0.72 ) .attr( "stroke", "white" ) .attr( "stroke-width", 0.8 ); // ---------------------------------------------------------- // MEAN POSITION // ---------------------------------------------------------- const meanX = d3.mean( points, d => d.x ); const meanY = d3.mean( points, d => d.y ); const mx = cx + scale( meanX ); const my = cy + scale( meanY ); svg .append("line") .attr( "x1", mx - 7 ) .attr( "x2", mx + 7 ) .attr( "y1", my - 7 ) .attr( "y2", my + 7 ) .attr( "stroke", "#dc2626" ) .attr( "stroke-width", 2.2 ); svg .append("line") .attr( "x1", mx + 7 ) .attr( "x2", mx - 7 ) .attr( "y1", my - 7 ) .attr( "y2", my + 7 ) .attr( "stroke", "#dc2626" ) .attr( "stroke-width", 2.2 ); } return svg.node(); }35:T2a6a,accuracyPrecisionExplorer = { const data = apData; // ============================================================ // DIMENSIONS // ============================================================ const W = Math.max( 720, width ); const H = 560; const cx = W / 2; const cy = 275; const radius = Math.min( W * 0.30, 210 ); // ============================================================ // SCALE // ============================================================ const maxExtent = Math.max( 1, Math.abs( data.bias ) + data.sigma * 3 ); const scale = d3 .scaleLinear() .domain( [ -maxExtent, maxExtent ] ) .range( [ -radius, radius ] ); // ============================================================ // CONTAINER // ============================================================ const container = html`

Accuracy & Precision Explorer

The center represents the true value. The red × marks the mean measurement.

`; // ============================================================ // SVG // ============================================================ const svg = d3 .create("svg") .attr( "viewBox", [0, 0, W, H] ) .style( "width", "100%" ) .style( "height", "auto" ); // ============================================================ // TARGET RINGS // ============================================================ [1, 0.75, 0.5, 0.25] .forEach( f => { svg .append("circle") .attr( "cx", cx ) .attr( "cy", cy ) .attr( "r", radius * f ) .attr( "fill", "none" ) .attr( "stroke", "#cbd5e1" ) .attr( "stroke-width", 1.3 ); } ); // ============================================================ // AXES THROUGH TRUE VALUE // ============================================================ svg .append("line") .attr( "x1", cx - radius ) .attr( "x2", cx + radius ) .attr( "y1", cy ) .attr( "y2", cy ) .attr( "stroke", "#e2e8f0" ); svg .append("line") .attr( "x1", cx ) .attr( "x2", cx ) .attr( "y1", cy - radius ) .attr( "y2", cy + radius ) .attr( "stroke", "#e2e8f0" ); // ============================================================ // TRUE VALUE SYMBOL // ============================================================ svg .append("circle") .attr( "cx", cx ) .attr( "cy", cy ) .attr( "r", 7 ) .attr( "fill", "white" ) .attr( "stroke", "#2563eb" ) .attr( "stroke-width", 3 ); svg .append("circle") .attr( "cx", cx ) .attr( "cy", cy ) .attr( "r", 2.5 ) .attr( "fill", "#2563eb" ); svg .append("text") .attr( "x", cx ) .attr( "y", cy - 16 ) .attr( "text-anchor", "middle" ) .attr( "font-size", 11 ) .attr( "font-weight", 700 ) .attr( "fill", "#2563eb" ) .text( "True value" ); // ============================================================ // MEASUREMENT CLOUD // ============================================================ const points = data.cloud; svg .append("g") .selectAll("circle") .data( points ) .join("circle") .attr( "cx", d => cx + scale(d.x) ) .attr( "cy", d => cy + scale(d.y) ) .attr( "r", 5.5 ) .attr( "fill", "#f59e0b" ) .attr( "fill-opacity", 0.72 ) .attr( "stroke", "white" ) .attr( "stroke-width", 1 ) .append("title") .text( d => `Measurement ${d.trial} Error component: ${d.x.toFixed(3)}` ); // ============================================================ // CLOUD MEAN // ============================================================ const meanX = d3.mean( points, d => d.x ); const meanY = d3.mean( points, d => d.y ); const meanScreenX = cx + scale(meanX); const meanScreenY = cy + scale(meanY); // ============================================================ // BIAS ARROW // ============================================================ svg .append("line") .attr( "x1", cx ) .attr( "y1", cy ) .attr( "x2", meanScreenX ) .attr( "y2", meanScreenY ) .attr( "stroke", "#dc2626" ) .attr( "stroke-width", 2 ) .attr( "stroke-dasharray", "5,4" ); // ============================================================ // MEAN SYMBOL // ============================================================ svg .append("line") .attr( "x1", meanScreenX - 8 ) .attr( "x2", meanScreenX + 8 ) .attr( "y1", meanScreenY - 8 ) .attr( "y2", meanScreenY + 8 ) .attr( "stroke", "#dc2626" ) .attr( "stroke-width", 2.5 ); svg .append("line") .attr( "x1", meanScreenX + 8 ) .attr( "x2", meanScreenX - 8 ) .attr( "y1", meanScreenY - 8 ) .attr( "y2", meanScreenY + 8 ) .attr( "stroke", "#dc2626" ) .attr( "stroke-width", 2.5 ); svg .append("text") .attr( "x", meanScreenX ) .attr( "y", meanScreenY - 15 ) .attr( "text-anchor", "middle" ) .attr( "font-size", 11 ) .attr( "font-weight", 700 ) .attr( "fill", "#dc2626" ) .text( "Mean" ); // ============================================================ // ±1σ VISUAL CIRCLE // ============================================================ const sigmaRadius = Math.abs( scale( data.sigma ) - scale(0) ); svg .append("circle") .attr( "cx", meanScreenX ) .attr( "cy", meanScreenY ) .attr( "r", sigmaRadius ) .attr( "fill", "#f59e0b" ) .attr( "fill-opacity", 0.07 ) .attr( "stroke", "#f59e0b" ) .attr( "stroke-width", 1.5 ) .attr( "stroke-dasharray", "4,4" ); // ============================================================ // BIAS LABEL // ============================================================ svg .append("text") .attr( "x", ( cx + meanScreenX ) / 2 ) .attr( "y", ( cy + meanScreenY ) / 2 - 8 ) .attr( "text-anchor", "middle" ) .attr( "font-size", 11 ) .attr( "fill", "#dc2626" ) .text( `bias ≈ ${data.bias >= 0 ? "+" : ""}${data.bias.toFixed(2)}` ); // ============================================================ // SUMMARY METRICS // ============================================================ const accuracyScore = Math.abs( data.meanError ); const precisionScore = data.sd; const accuracyLabel = accuracyScore <= data.sigma * 0.5 ? "High" : accuracyScore <= data.sigma * 1.5 ? "Moderate" : "Low"; const precisionLabel = precisionScore <= 0.10 ? "High" : precisionScore <= 0.25 ? "Moderate" : "Low"; const summary = container.querySelector( ".ap-summary" ); summary.innerHTML = ` True value: ${data.trueValue.toFixed(2)} · Mean measurement: ${data.mean.toFixed(3)}
Mean error: ${ data.meanError >= 0 ? "+" : "" } ${data.meanError.toFixed(3)} · Standard deviation: σ = ${data.sd.toFixed(3)}

Accuracy: ${accuracyLabel} · Precision: ${precisionLabel}

Interpretation: Accuracy depends on how close the mean is to the true value . Precision depends on how tightly the measurements cluster around their mean. `; // ============================================================ // ADD SVG // ============================================================ container .querySelector( ".ap-chart" ) .append( svg.node() ); return container; }36:[] 2f:{"id":"b1ae03af7e2aa24b","slug":null,"title":"Accuracy and Precision","thumbnail":"984649d9a94512ac6adbd3fd37f383668970c65e4d60021ce74032f11cabbf55","access_level":"public","create_time":"$D2026-08-31T15:44:06.283Z","update_time":"$D2026-09-01T14:17:30.709Z","view_time":null,"first_public_time":"$D2026-08-31T15:46:25.802Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"9b777312fea6dc77","login":"allen-q","name":"Allen Q","avatar_url":"https://avatars-next.observableusercontent.com/f32293ffdef37fc20c657b7076e05c45826631edaf56406066aec07922e29316","tier":"starter_2024"},"version":27,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a8a0f4ea11d88ae6","login":"allen-q","name":"Allen Q","avatar_url":"https://avatars-next.observableusercontent.com/f32293ffdef37fc20c657b7076e05c45826631edaf56406066aec07922e29316","tier":null}],"members":[{"type":"individual","id":"a8a0f4ea11d88ae6","login":"allen-q","name":"Allen Q","avatar_url":"https://avatars-next.observableusercontent.com/f32293ffdef37fc20c657b7076e05c45826631edaf56406066aec07922e29316","tier":null,"role":"editor"},{"type":"team","id":"9b777312fea6dc77","login":"allen-q","name":"Allen Q","avatar_url":"https://avatars-next.observableusercontent.com/f32293ffdef37fc20c657b7076e05c45826631edaf56406066aec07922e29316","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Accuracy and Precision","cells":[{"id":0,"value":"# Accuracy and Precision","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"viewof measurementSettings = Inputs.form({\n trueLength: Inputs.range(\n [5, 20],\n {\n label: \"True object length (cm)\",\n value: 12.73,\n step: 0.01\n }\n ),\n\n resolution: Inputs.select(\n [1, 0.5, 0.2, 0.1, 0.05, 0.01],\n {\n label: \"Ruler resolution (cm)\",\n value: 0.1,\n format: d => `${d} cm`\n }\n ),\n\n bias: Inputs.range(\n [-3, 3],\n {\n label: \"Calibration bias (%)\",\n value: 0.4,\n step: 0.1\n }\n ),\n\n precision: Inputs.range(\n [0, 0.3],\n {\n label: \"Repeatability σ (cm)\",\n value: 0.05,\n step: 0.01\n }\n ),\n\n trials: Inputs.range(\n [1, 20],\n {\n label: \"Repeated measurements\",\n value: 8,\n step: 1\n }\n )\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"viewof apSettings = Inputs.form({\n\n trueValue: Inputs.number(\n {\n label: \"True value\",\n value: 12.73,\n step: 0.01\n }\n ),\n\n bias: Inputs.range(\n [-1.0, 1.0],\n {\n label: \"Systematic bias\",\n value: 0.25,\n step: 0.01\n }\n ),\n\n sigma: Inputs.range(\n [0.01, 0.60],\n {\n label: \"Random spread σ\",\n value: 0.08,\n step: 0.01\n }\n ),\n\n trials: Inputs.range(\n [5, 50],\n {\n label: \"Measurements\",\n value: 20,\n step: 1\n }\n )\n\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1"}} 30:"$2f:body"