2b:null 2c:["$","title",null,{"children":"A brief history of Speed of Light calculation | Allen Q | Observable"}] 31:Tb23,speedOfLightData = [ { year: 1600, experimenter: "Galileo", method: "Lanterns", value: null, uncertainty: null, note: '"fast"', type: "qualitative" }, { year: 1676, experimenter: "Rømer", method: "Jovian moon occultation", value: 215000, uncertainty: null, type: "measurement" }, { year: 1729, experimenter: "Bradley", method: "Aberration of light", value: 301000, uncertainty: null, type: "measurement" }, { year: 1849, experimenter: "Fizeau", method: "Spinning slotted wheel", value: 315300, uncertainty: null, type: "measurement" }, { year: 1879, experimenter: "Michelson", method: "Rotating mirror", value: 299910, uncertainty: 50, type: "measurement" }, { year: 1889, experimenter: "Rosa", method: "Capacities method", value: 300000, uncertainty: 800, type: "measurement" }, { year: 1890, experimenter: "Comstock", method: "18 star pairs", value: 300560, uncertainty: 170, type: "measurement" }, { year: 1898, experimenter: "Perot/Fabry", method: "Electrometric method", value: 299730, uncertainty: 300, type: "measurement" }, { year: 1906, experimenter: "Rosa/Dorsey", method: "Electrical method", value: 299803, uncertainty: 10, type: "measurement" }, { year: 1923, experimenter: "Mercier", method: "Electrical measurements", value: 299700, uncertainty: 30, type: "measurement" }, { year: 1926, experimenter: "Michelson/Birge", method: "Interferometer", value: 299798, uncertainty: 15, type: "measurement" }, { year: 1928, experimenter: "Karolus/Mittelstaedt", method: "Kerr cell shutter", value: 299778, uncertainty: 10, type: "measurement" }, { year: 1932, experimenter: "Pease/Pearson", method: "Interferometer", value: 299774, uncertainty: 10, type: "measurement" }, { year: 1947, experimenter: "Essen/Gordon-Smith", method: "Microwave cavity", value: 299792, uncertainty: 3, type: "measurement" }, { year: 1958, experimenter: "Froome", method: "Interferometer", value: 299792.50, uncertainty: 0.1, type: "measurement" }, { year: 1973, experimenter: "Evenson", method: "Laser method", value: 299792.467, uncertainty: 0.0011, type: "measurement" }, { year: 1978, experimenter: "Woods/Shotton/Rowley", method: "Laser method", value: 299792.4588, uncertainty: 0.0002, type: "measurement" }, { year: 1983, experimenter: "International", method: "Definition", value: 299792.458, uncertainty: 0, type: "definition" } ]32:T51a,speedOfLightModel = { const reference = 299792.458; const rows = speedOfLightData.map( d => { if ( d.value == null ) { return { ...d, error: null, relativeErrorPpm: null, lower: null, upper: null }; } const error = d.value - reference; const relativeErrorPpm = error / reference * 1e6; const lower = d.uncertainty == null ? null : d.value - d.uncertainty; const upper = d.uncertainty == null ? null : d.value + d.uncertainty; return { ...d, error, relativeErrorPpm, lower, upper }; } ); return { reference, rows, quantitative: rows.filter( d => d.value != null ), withUncertainty: rows.filter( d => d.value != null && d.uncertainty != null ), qualitative: rows.filter( d => d.value == null ) }; }33:Tb60,cLightEnriched = { const familyColors = { "Astronomical": "#2f7fb9", "Optical / Mechanical": "#0b5f85", "Electrical": "#00a0b0", "Interferometry": "#3d8f73", "Microwave": "#8f6bb3", "Laser": "#f08a24", "Definition": "#d9487d", "Qualitative": "#64748b", "Other": "#64748b" }; function familyOf(d) { if (d.type === "definition") { return "Definition"; } if (d.type === "qualitative") { return "Qualitative"; } const method = (d.method || "") .toLowerCase(); if ( method.includes("jovian") || method.includes("aberration") || method.includes("star") ) { return "Astronomical"; } if ( method.includes("wheel") || method.includes("mirror") || method.includes("kerr") ) { return "Optical / Mechanical"; } if ( method.includes("electrical") || method.includes("electrometric") || method.includes("capacities") ) { return "Electrical"; } if ( method.includes("interferometer") ) { return "Interferometry"; } if ( method.includes("microwave") ) { return "Microwave"; } if ( method.includes("laser") ) { return "Laser"; } return "Other"; } function decimalsOf(value) { if (value == null) return 0; const s = String(value); return s.includes(".") ? s.split(".")[1].length : 0; } function formatExact(value) { if (value == null) return "n/a"; const decimals = decimalsOf(value); return value.toLocaleString( "en-US", { minimumFractionDigits: decimals, maximumFractionDigits: decimals } ); } const rows = speedOfLightModel.rows .map(d => { const family = familyOf(d); return { ...d, id: `${d.year}-${d.experimenter}`, family, color: familyColors[family], formattedValue: formatExact(d.value), formattedUncertainty: d.uncertainty == null ? "Unknown" : d.uncertainty === 0 ? "0" : `±${formatExact(d.uncertainty)}`, formattedError: d.error == null ? "n/a" : `${d.error >= 0 ? "+" : ""}${d.error.toLocaleString("en-US", { maximumFractionDigits: 6 })}` }; }) .sort((a, b) => a.year - b.year); const keyLabels = new Set([ "1676-Rømer", "1729-Bradley", "1849-Fizeau", "1879-Michelson", "1947-Essen/Gordon-Smith", "1958-Froome", "1973-Evenson", "1978-Woods/Shotton/Rowley", "1983-International" ]); return { rows, familyColors, keyLabels, reference: speedOfLightModel.reference, formatExact }; }34:T5fe3,speedOfLightHistoryExplorer = { const control = cLightControls; const model = cLightEnriched; const showLabels = control.labels === "Show key labels"; const showReference = control.reference === "Show reference line"; // ============================================================ // FILTER BY VIEW // ============================================================ function filterRows() { if ( control.era === "Full history (1600-1983)" ) { return model.rows; } if ( control.era === "Measurement era (1676-1983)" ) { return model.rows.filter( d => d.year >= 1676 ); } if ( control.era === "Modern era (1947-1983)" ) { return model.rows.filter( d => d.year >= 1947 ); } return model.rows.filter( d => d.year >= 1879 ); } const rows = filterRows(); const quantitative = rows.filter( d => d.value != null ); const qualitative = rows.filter( d => d.value == null ); // ============================================================ // SELECTED POINT // ============================================================ let selected = quantitative.find( d => d.year === 1973 ) || quantitative.at(-1); // ============================================================ // SMART FORMATTERS // ============================================================ function formatTick(value, span) { if (span < 0.02) { return d3.format(",.4f")(value); } if (span < 1) { return d3.format(",.3f")(value); } if (span < 50) { return d3.format(",.2f")(value); } if (span < 1000) { return d3.format(",.1f")(value); } return d3.format(",.0f")(value); } function formatPPM(value) { if (value == null) return "n/a"; return `${value >= 0 ? "+" : ""}${value.toFixed(3)} ppm`; } // ============================================================ // DIMENSIONS // ============================================================ const outerW = Math.max( 980, width ); const mainW = outerW; const mainH = 470; const lensH = 210; const margin = { top: 70, right: 40, bottom: 60, left: 105 }; // ============================================================ // DOM CONTAINER // ============================================================ const container = html`

`; const mainHost = container.querySelector(".main-chart"); const lensHost = container.querySelector(".lens-chart"); const detailCard = container.querySelector(".detail-card"); const legendCard = container.querySelector(".legend-card"); const tooltip = container.querySelector(".floating-tooltip"); // ============================================================ // MAIN SVG // ============================================================ const svg = d3.create("svg") .attr("viewBox", [0, 0, mainW, mainH]) .style("width", "100%") .style("height", "auto") .style("display", "block"); // Background panel svg.append("rect") .attr("x", 0) .attr("y", 0) .attr("width", mainW) .attr("height", mainH) .attr("rx", 18) .attr("fill", "#fbfdfe") .attr("stroke", "#d8e4ea"); // ============================================================ // SCALES // ============================================================ const xExtent = d3.extent(rows, d => d.year); const xPad = control.era === "Full history (1600-1983)" ? 12 : 6; const x = d3.scaleLinear() .domain([ xExtent[0] - xPad, xExtent[1] + xPad ]) .range([ margin.left, mainW - margin.right ]); const yCandidates = quantitative.flatMap( d => d.uncertainty != null ? [ d.value, d.lower ?? d.value, d.upper ?? d.value ] : [d.value] ); const yMin = d3.min(yCandidates); const yMax = d3.max(yCandidates); const span = yMax - yMin; const pad = span < 0.02 ? 0.01 : span < 1 ? span * 0.25 : span < 100 ? span * 0.18 : span * 0.10; const y = d3.scaleLinear() .domain([ yMin - pad, yMax + pad ]) .nice() .range([ mainH - margin.bottom, margin.top ]); const plotLeft = margin.left; const plotRight = mainW - margin.right; const plotTop = margin.top; const plotBottom = mainH - margin.bottom; // ============================================================ // TITLE AND SUBTITLE // ============================================================ svg.append("text") .attr("x", mainW / 2) .attr("y", 36) .attr("text-anchor", "middle") .attr("font-size", 32) .attr("font-weight", 700) .attr("fill", "#68afc2") .text("Speed of Light"); svg.append("text") .attr("x", mainW / 2) .attr("y", 58) .attr("text-anchor", "middle") .attr("font-size", 12.5) .attr("fill", "#5b7280") .text("Reported values and associated measurement uncertainties"); // ============================================================ // GRID // ============================================================ svg.append("g") .selectAll("line.grid-y") .data(y.ticks(7)) .join("line") .attr("x1", plotLeft) .attr("x2", plotRight) .attr("y1", d => y(d)) .attr("y2", d => y(d)) .attr("stroke", "#78b9ca") .attr("stroke-width", 1) .attr("opacity", 0.7); const xTicks = control.era === "Full history (1600-1983)" ? d3.ticks( Math.ceil((xExtent[0] - xPad) / 50) * 50, Math.floor((xExtent[1] + xPad) / 50) * 50, 7 ) : x.ticks(6); svg.append("g") .selectAll("line.grid-x") .data(xTicks) .join("line") .attr("x1", d => x(d)) .attr("x2", d => x(d)) .attr("y1", plotTop) .attr("y2", plotBottom) .attr("stroke", "#78b9ca") .attr("stroke-width", 1) .attr("opacity", 0.7); // ============================================================ // REFERENCE LINE // ============================================================ if (showReference) { svg.append("line") .attr("x1", plotLeft) .attr("x2", plotRight) .attr("y1", y(model.reference)) .attr("y2", y(model.reference)) .attr("stroke", "#d9487d") .attr("stroke-width", 2) .attr("stroke-dasharray", "8,5") .attr("opacity", 0.95); svg.append("text") .attr("x", plotRight) .attr("y", y(model.reference) - 9) .attr("text-anchor", "end") .attr("font-size", 11) .attr("font-weight", 700) .attr("fill", "#d9487d") .text("Reference c = 299,792.458 km/s"); } // ============================================================ // AXES // ============================================================ const yAxis = d3.axisLeft(y) .ticks(7) .tickFormat( d => formatTick(d, span) ); const xAxis = d3.axisBottom(x) .tickValues(xTicks) .tickFormat(d3.format("d")); svg.append("g") .attr("transform", `translate(${plotLeft},0)`) .call(yAxis) .call(g => g.selectAll("text") .attr("fill", "#68afc2") .attr("font-size", 12) .attr("font-weight", 700)) .call(g => g.selectAll("path,line") .attr("stroke", "#68afc2") .attr("stroke-width", 1.2)); svg.append("g") .attr("transform", `translate(0,${plotBottom})`) .call(xAxis) .call(g => g.selectAll("text") .attr("fill", "#68afc2") .attr("font-size", 12) .attr("font-weight", 700)) .call(g => g.selectAll("path,line") .attr("stroke", "#68afc2") .attr("stroke-width", 1.2)); svg.append("text") .attr("x", mainW / 2) .attr("y", mainH - 14) .attr("text-anchor", "middle") .attr("font-size", 16) .attr("font-weight", 700) .attr("fill", "#68afc2") .text("Year"); svg.append("text") .attr("transform", "rotate(-90)") .attr("x", -mainH / 2) .attr("y", 28) .attr("text-anchor", "middle") .attr("font-size", 16) .attr("font-weight", 700) .attr("fill", "#68afc2") .text("Speed (km/s)"); // ============================================================ // MARKS GROUP // ============================================================ const marks = svg.append("g"); const entries = marks.selectAll("g.entry") .data(quantitative, d => d.id) .join("g") .attr("class", "entry") .style("cursor", "pointer") .on("mouseenter", function(event, d) { selected = d; updateSelection(); updateDetailPanel(); renderLens(); showTooltip(event, d); }) .on("mousemove", function(event, d) { showTooltip(event, d); }) .on("mouseleave", function() { hideTooltip(); }) .on("click", function(event, d) { selected = d; updateSelection(); updateDetailPanel(); renderLens(); }); // Uncertainty bars entries.filter(d => d.uncertainty != null && d.uncertainty > 0) .append("line") .attr("class", "uncertainty") .attr("x1", d => x(d.year)) .attr("x2", d => x(d.year)) .attr("y1", d => y(d.lower)) .attr("y2", d => y(d.upper)) .attr("stroke", "#0b5f85") .attr("stroke-width", 2.2) .attr("opacity", 0.85); entries.filter(d => d.uncertainty != null && d.uncertainty > 0) .append("line") .attr("class", "cap-top") .attr("x1", d => x(d.year) - 4) .attr("x2", d => x(d.year) + 4) .attr("y1", d => y(d.upper)) .attr("y2", d => y(d.upper)) .attr("stroke", "#0b5f85") .attr("stroke-width", 2.2) .attr("opacity", 0.85); entries.filter(d => d.uncertainty != null && d.uncertainty > 0) .append("line") .attr("class", "cap-bottom") .attr("x1", d => x(d.year) - 4) .attr("x2", d => x(d.year) + 4) .attr("y1", d => y(d.lower)) .attr("y2", d => y(d.lower)) .attr("stroke", "#0b5f85") .attr("stroke-width", 2.2) .attr("opacity", 0.85); // Halo entries.filter(d => d.type === "measurement") .append("circle") .attr("class", "halo") .attr("cx", d => x(d.year)) .attr("cy", d => y(d.value)) .attr("r", 10) .attr("fill", "#0b5f85") .attr("opacity", 0); // Measurement points entries.filter(d => d.type === "measurement") .append("circle") .attr("class", "point") .attr("cx", d => x(d.year)) .attr("cy", d => y(d.value)) .attr("r", 5.8) .attr("fill", d => d.color) .attr("stroke", "white") .attr("stroke-width", 1.5); // 1983 definition as diamond entries.filter(d => d.type === "definition") .append("path") .attr("class", "diamond") .attr( "d", d3.symbol() .type(d3.symbolDiamond) .size(140) ) .attr( "transform", d => `translate(${x(d.year)},${y(d.value)})` ) .attr("fill", d => d.color) .attr("stroke", "white") .attr("stroke-width", 1.5); // ============================================================ // GALILEO ANNOTATION // ============================================================ const galileo = qualitative.find( d => d.experimenter === "Galileo" ); if (galileo) { const gx = x(galileo.year); const gy = plotTop + 30; svg.append("circle") .attr("cx", gx) .attr("cy", gy) .attr("r", 4.8) .attr("fill", "white") .attr("stroke", "#64748b") .attr("stroke-width", 2); svg.append("text") .attr("x", gx + 8) .attr("y", gy - 6) .attr("font-size", 11) .attr("fill", "#64748b") .attr("font-weight", 700) .text('Galileo'); svg.append("text") .attr("x", gx + 8) .attr("y", gy + 11) .attr("font-size", 10.5) .attr("fill", "#64748b") .text('Lanterns, qualitative result: "fast"'); } // ============================================================ // KEY LABELS // ============================================================ if (showLabels) { const labelOffsets = { "1676-Rømer": [8, -12], "1729-Bradley": [8, -12], "1849-Fizeau": [8, -12], "1879-Michelson": [8, 16], "1947-Essen/Gordon-Smith": [8, -12], "1958-Froome": [8, -12], "1973-Evenson": [8, -12], "1978-Woods/Shotton/Rowley": [8, -12], "1983-International": [8, 16] }; const labelData = quantitative.filter( d => model.keyLabels.has(d.id) ); svg.append("g") .selectAll("text.key-label") .data(labelData) .join("text") .attr("class", "key-label") .attr("x", d => x(d.year) + (labelOffsets[d.id]?.[0] ?? 8)) .attr("y", d => y(d.value) + (labelOffsets[d.id]?.[1] ?? -10)) .attr("font-size", 10.5) .attr("fill", "#355163") .attr("font-weight", 700) .text(d => d.experimenter); } // ============================================================ // TOOLTIP // ============================================================ function showTooltip(event, d) { tooltip.style.opacity = 1; tooltip.innerHTML = `

${d.year} · ${d.experimenter}

Method: ${d.method}

Reported c: ${d.formattedValue} km/s

Uncertainty: ${d.formattedUncertainty}${d.uncertainty === 0 ? " km/s" : d.uncertainty == null ? "" : " km/s"}

`; const [mx, my] = d3.pointer(event, container); tooltip.style.left = `${mx + 18}px`; tooltip.style.top = `${my + 10}px`; } function hideTooltip() { tooltip.style.opacity = 0; } // ============================================================ // DETAIL PANEL // ============================================================ function updateDetailPanel() { if (!selected) return; detailCard.innerHTML = `

${selected.experimenter}

${selected.year} · ${selected.family}

Method: ${selected.method}

Reported c: ${selected.formattedValue} km/s

Uncertainty: ${selected.formattedUncertainty}${selected.uncertainty === 0 ? " km/s" : selected.uncertainty == null ? "" : " km/s"}

Error from reference: ${selected.formattedError} km/s

Relative error: ${formatPPM(selected.relativeErrorPpm)}

Type: ${selected.type}

Click any point to lock the selection. Hover to inspect a measurement quickly.

`; } // ============================================================ // LEGEND // ============================================================ const usedFamilies = Array.from( new Set( quantitative.map(d => d.family) ) ); legendCard.innerHTML = `

Method family

`; const legendList = html`

`; usedFamilies.forEach(family => { const row = html`

${family}

`; legendList.append(row); }); legendCard.append(legendList); // ============================================================ // SELECTION STYLES // ============================================================ function updateSelection() { entries.each(function(d) { const isSelected = selected && d.id === selected.id; d3.select(this) .selectAll(".uncertainty,.cap-top,.cap-bottom") .attr("stroke", isSelected ? "#073b56" : "#0b5f85") .attr("stroke-width", isSelected ? 2.8 : 2.2) .attr("opacity", isSelected ? 1 : 0.82); d3.select(this) .selectAll(".halo") .attr("opacity", isSelected ? 0.16 : 0) .attr("r", isSelected ? 11.5 : 10); d3.select(this) .selectAll(".point") .attr("r", isSelected ? 7.2 : 5.8) .attr("stroke-width", isSelected ? 2 : 1.5); d3.select(this) .selectAll(".diamond") .attr("transform", `translate(${x(d.year)},${y(d.value)}) scale(${isSelected ? 1.18 : 1})`); }); } // ============================================================ // LENS CHART // ============================================================ function renderLens() { lensHost.replaceChildren(); if (!selected) return; const lensW = mainW; const margin2 = { top: 38, right: 36, bottom: 48, left: 90 }; const lensSvg = d3.create("svg") .attr("viewBox", [0, 0, lensW, lensH]) .style("width", "100%") .style("height", "auto") .style("display", "block"); lensSvg.append("rect") .attr("x", 0) .attr("y", 0) .attr("width", lensW) .attr("height", lensH) .attr("rx", 16) .attr("fill", "#ffffff") .attr("stroke", "#d8e4ea"); lensSvg.append("text") .attr("x", margin2.left) .attr("y", 24) .attr("font-size", 15) .attr("font-weight", 700) .attr("fill", "#0b5f85") .text(`Selected measurement: ${selected.year} · ${selected.experimenter}`); const uncertainty = selected.uncertainty; let halfSpan; if (uncertainty == null) { halfSpan = Math.max( 20, Math.abs(selected.error ?? 0) * 0.30 ); } else if (uncertainty === 0) { halfSpan = 0.01; } else { halfSpan = Math.max( uncertainty * 6, 0.002 ); } const lower = uncertainty == null ? selected.value - halfSpan : selected.value - halfSpan; const upper = uncertainty == null ? selected.value + halfSpan : selected.value + halfSpan; const lx = d3.scaleLinear() .domain([lower, upper]) .range([margin2.left, lensW - margin2.right]); const ly = d3.scaleLinear() .domain([0, 1]) .range([lensH - margin2.bottom, margin2.top]); lensSvg.append("g") .selectAll("line.grid") .data(lx.ticks(6)) .join("line") .attr("x1", d => lx(d)) .attr("x2", d => lx(d)) .attr("y1", margin2.top) .attr("y2", lensH - margin2.bottom) .attr("stroke", "#e5eef2"); lensSvg.append("line") .attr("x1", margin2.left) .attr("x2", lensW - margin2.right) .attr("y1", ly(0.5)) .attr("y2", ly(0.5)) .attr("stroke", "#78b9ca") .attr("stroke-width", 1.2); if ( model.reference >= lower && model.reference <= upper ) { lensSvg.append("line") .attr("x1", lx(model.reference)) .attr("x2", lx(model.reference)) .attr("y1", margin2.top) .attr("y2", lensH - margin2.bottom) .attr("stroke", "#d9487d") .attr("stroke-width", 2) .attr("stroke-dasharray", "6,4"); lensSvg.append("text") .attr("x", lx(model.reference)) .attr("y", margin2.top - 8) .attr("text-anchor", "middle") .attr("font-size", 10.5) .attr("font-weight", 700) .attr("fill", "#d9487d") .text("reference"); } else { const direction = model.reference < lower ? "below" : "above"; lensSvg.append("text") .attr("x", lensW - margin2.right) .attr("y", margin2.top - 8) .attr("text-anchor", "end") .attr("font-size", 10.5) .attr("fill", "#d9487d") .text(`reference is ${direction} this zoom window`); } if (uncertainty != null && uncertainty > 0) { lensSvg.append("line") .attr("x1", lx(selected.value - uncertainty)) .attr("x2", lx(selected.value + uncertainty)) .attr("y1", ly(0.5)) .attr("y2", ly(0.5)) .attr("stroke", "#0b5f85") .attr("stroke-width", 5) .attr("stroke-linecap", "round"); lensSvg.append("line") .attr("x1", lx(selected.value - uncertainty)) .attr("x2", lx(selected.value - uncertainty)) .attr("y1", ly(0.35)) .attr("y2", ly(0.65)) .attr("stroke", "#0b5f85") .attr("stroke-width", 2.5); lensSvg.append("line") .attr("x1", lx(selected.value + uncertainty)) .attr("x2", lx(selected.value + uncertainty)) .attr("y1", ly(0.35)) .attr("y2", ly(0.65)) .attr("stroke", "#0b5f85") .attr("stroke-width", 2.5); } lensSvg.append("circle") .attr("cx", lx(selected.value)) .attr("cy", ly(0.5)) .attr("r", 7) .attr("fill", selected.color) .attr("stroke", "white") .attr("stroke-width", 1.8); lensSvg.append("g") .attr("transform", `translate(0,${lensH - margin2.bottom})`) .call( d3.axisBottom(lx) .ticks(6) .tickFormat( d => formatTick(d, upper - lower) ) ) .call(g => g.selectAll("text") .attr("font-size", 10.5) .attr("fill", "#486270")) .call(g => g.selectAll("path,line") .attr("stroke", "#9fb8c4")); lensSvg.append("text") .attr("x", lensW / 2) .attr("y", lensH - 10) .attr("text-anchor", "middle") .attr("font-size", 11.5) .attr("fill", "#5b7280") .text("Zoomed inspection of the selected reported value and its uncertainty interval"); lensHost.append(lensSvg.node()); } // ============================================================ // INITIAL RENDER // ============================================================ updateSelection(); updateDetailPanel(); renderLens(); mainHost.append(svg.node()); return container; }35:T84a8,speedOfLightErrorExplorer = { const model = cLightEnriched; const errorControls = cErrorControls; const historyControls = cLightControls; const showUncertainty = errorControls.uncertainty === "Show uncertainty"; const showLabels = errorControls.labels === "Show key labels"; // ============================================================ // FILTER USING THE SAME HISTORICAL VIEW // AS THE MAIN CHART // ============================================================ function filterRows() { if ( historyControls.era === "Full history (1600-1983)" ) { return model.rows; } if ( historyControls.era === "Measurement era (1676-1983)" ) { return model.rows.filter( d => d.year >= 1676 ); } if ( historyControls.era === "Modern era (1947-1983)" ) { return model.rows.filter( d => d.year >= 1947 ); } return model.rows.filter( d => d.year >= 1879 ); } const rows = filterRows(); const data = rows.filter( d => d.error != null ); // ============================================================ // DIMENSIONS // ============================================================ const W = Math.max( 980, width ); const H = 570; const margin = { top: 76, right: 50, bottom: 72, left: 100 }; const plotLeft = margin.left; const plotRight = W - margin.right; const plotTop = margin.top; const plotBottom = H - margin.bottom; // ============================================================ // SELECTED MEASUREMENT // ============================================================ let selected = data.find( d => d.year === 1958 ) ?? data.at(-1); // ============================================================ // X SCALE // ============================================================ const xExtent = d3.extent( rows, d => d.year ); const xPad = historyControls.era === "Full history (1600-1983)" ? 12 : 6; const x = d3 .scaleLinear() .domain([ xExtent[0] - xPad, xExtent[1] + xPad ]) .range([ plotLeft, plotRight ]); // ============================================================ // ERROR EXTENT // // Include the full uncertainty intervals. // ============================================================ const errorValues = data.flatMap( d => { if ( d.uncertainty == null ) { return [ d.error ]; } return [ d.error, d.error - d.uncertainty, d.error + d.uncertainty ]; } ); const maxAbs = Math.max( d3.max( errorValues, d => Math.abs(d) ) ?? 1, 0.001 ); // ============================================================ // Y SCALE // ============================================================ let y; if ( errorControls.scale === "Symlog" ) { // The constant controls the linear zone // around zero. y = d3 .scaleSymlog() .constant( 0.01 ) .domain([ -maxAbs * 1.15, maxAbs * 1.15 ]) .range([ plotBottom, plotTop ]); } else { y = d3 .scaleLinear() .domain([ -maxAbs * 1.08, maxAbs * 1.08 ]) .nice() .range([ plotBottom, plotTop ]); } // ============================================================ // FORMAT ERROR VALUES // ============================================================ function formatError( value ) { const abs = Math.abs(value); if ( abs >= 1000 ) { return ( d3.format(",.0f")( value ) ); } if ( abs >= 10 ) { return ( d3.format(",.1f")( value ) ); } if ( abs >= 0.1 ) { return ( d3.format(",.2f")( value ) ); } if ( abs >= 0.001 ) { return ( d3.format(",.4f")( value ) ); } return ( d3.format(".2e")( value ) ); } // ============================================================ // CONTAINER // ============================================================ const container = html`

How to read this graph

0 km/s is the modern reference value.

Points above zero reported a value that was too high.

Points below zero reported a value that was too low.

Vertical segments show reported uncertainty.

`; const mainHost = container.querySelector( ".error-main" ); const zoomHost = container.querySelector( ".error-zoom" ); const details = container.querySelector( ".error-details" ); const tooltip = container.querySelector( ".error-tooltip" ); // ============================================================ // SVG // ============================================================ const svg = d3 .create("svg") .attr( "viewBox", [0, 0, W, H] ) .style( "width", "100%" ) .style( "height", "auto" ) .style( "display", "block" ); // ============================================================ // PANEL // ============================================================ svg .append("rect") .attr( "width", W ) .attr( "height", H ) .attr( "rx", 18 ) .attr( "fill", "#fbfdfe" ) .attr( "stroke", "#d8e4ea" ); // ============================================================ // TITLE // ============================================================ svg .append("text") .attr( "x", W / 2 ) .attr( "y", 34 ) .attr( "text-anchor", "middle" ) .attr( "font-size", 27 ) .attr( "font-weight", 700 ) .attr( "fill", "#68afc2" ) .text( "Error in Historical Measurements of c" ); svg .append("text") .attr( "x", W / 2 ) .attr( "y", 56 ) .attr( "text-anchor", "middle" ) .attr( "font-size", 12.5 ) .attr( "fill", "#5b7280" ) .text( "Reported value − 299,792.458 km/s" ); // ============================================================ // POSITIVE / NEGATIVE BACKGROUND // ============================================================ svg .append("rect") .attr( "x", plotLeft ) .attr( "y", plotTop ) .attr( "width", plotRight - plotLeft ) .attr( "height", y(0) - plotTop ) .attr( "fill", "#fef3f2" ) .attr( "opacity", 0.32 ); svg .append("rect") .attr( "x", plotLeft ) .attr( "y", y(0) ) .attr( "width", plotRight - plotLeft ) .attr( "height", plotBottom - y(0) ) .attr( "fill", "#eff6ff" ) .attr( "opacity", 0.38 ); // ============================================================ // Y TICKS // ============================================================ let yTicks; if ( errorControls.scale === "Symlog" ) { const candidates = [ -100000, -10000, -1000, -100, -10, -1, -0.1, -0.01, -0.001, 0, 0.001, 0.01, 0.1, 1, 10, 100, 1000, 10000, 100000 ]; yTicks = candidates.filter( d => d >= -maxAbs * 1.15 && d <= maxAbs * 1.15 ); } else { yTicks = y.ticks(8); } // ============================================================ // GRID // ============================================================ svg .append("g") .selectAll("line") .data( yTicks ) .join("line") .attr( "x1", plotLeft ) .attr( "x2", plotRight ) .attr( "y1", d => y(d) ) .attr( "y2", d => y(d) ) .attr( "stroke", d => d === 0 ? "#d9487d" : "#cbdde5" ) .attr( "stroke-width", d => d === 0 ? 2.5 : 1 ) .attr( "opacity", d => d === 0 ? 1 : 0.75 ); const xTicks = x.ticks(7); svg .append("g") .selectAll("line") .data( xTicks ) .join("line") .attr( "x1", d => x(d) ) .attr( "x2", d => x(d) ) .attr( "y1", plotTop ) .attr( "y2", plotBottom ) .attr( "stroke", "#d9e7ed" ) .attr( "opacity", 0.7 ); // ============================================================ // ZERO LABELS // ============================================================ svg .append("text") .attr( "x", plotRight - 5 ) .attr( "y", y(0) - 9 ) .attr( "text-anchor", "end" ) .attr( "font-size", 11 ) .attr( "font-weight", 700 ) .attr( "fill", "#d9487d" ) .text( "Perfect agreement with reference" ); svg .append("text") .attr( "x", plotLeft + 8 ) .attr( "y", plotTop + 16 ) .attr( "font-size", 10.5 ) .attr( "fill", "#a34848" ) .text( "Reported too high" ); svg .append("text") .attr( "x", plotLeft + 8 ) .attr( "y", plotBottom - 10 ) .attr( "font-size", 10.5 ) .attr( "fill", "#426a92" ) .text( "Reported too low" ); // ============================================================ // AXES // ============================================================ svg .append("g") .attr( "transform", `translate(${plotLeft},0)` ) .call( d3 .axisLeft(y) .tickValues( yTicks ) .tickFormat( formatError ) ) .call( g => g .selectAll("text") .attr( "fill", "#5f96a7" ) .attr( "font-size", 11.5 ) .attr( "font-weight", 700 ) ) .call( g => g .selectAll( "path,line" ) .attr( "stroke", "#68afc2" ) ); svg .append("g") .attr( "transform", `translate(0,${plotBottom})` ) .call( d3 .axisBottom(x) .ticks(7) .tickFormat( d3.format("d") ) ) .call( g => g .selectAll("text") .attr( "fill", "#5f96a7" ) .attr( "font-size", 11.5 ) .attr( "font-weight", 700 ) ) .call( g => g .selectAll( "path,line" ) .attr( "stroke", "#68afc2" ) ); // ============================================================ // AXIS LABELS // ============================================================ svg .append("text") .attr( "x", W / 2 ) .attr( "y", H - 18 ) .attr( "text-anchor", "middle" ) .attr( "font-size", 15 ) .attr( "font-weight", 700 ) .attr( "fill", "#68afc2" ) .text( "Year" ); svg .append("text") .attr( "transform", "rotate(-90)" ) .attr( "x", -H / 2 ) .attr( "y", 25 ) .attr( "text-anchor", "middle" ) .attr( "font-size", 15 ) .attr( "font-weight", 700 ) .attr( "fill", "#68afc2" ) .text( "Error from reference (km/s)" ); // ============================================================ // MEASUREMENTS // ============================================================ const entries = svg .append("g") .selectAll("g.measurement") .data( data, d => d.id ) .join("g") .attr( "class", "measurement" ) .style( "cursor", "pointer" ); // ============================================================ // UNCERTAINTY SEGMENTS // ============================================================ if ( showUncertainty ) { const uncertaintyData = data.filter( d => d.uncertainty != null && d.uncertainty > 0 ); const u = entries.filter( d => uncertaintyData.includes(d) ); u .append("line") .attr( "class", "uncertainty" ) .attr( "x1", d => x(d.year) ) .attr( "x2", d => x(d.year) ) .attr( "y1", d => y( d.error - d.uncertainty ) ) .attr( "y2", d => y( d.error + d.uncertainty ) ) .attr( "stroke", "#0b5f85" ) .attr( "stroke-width", 2.1 ) .attr( "opacity", 0.82 ); u .append("line") .attr( "class", "cap-low" ) .attr( "x1", d => x(d.year) - 4 ) .attr( "x2", d => x(d.year) + 4 ) .attr( "y1", d => y( d.error - d.uncertainty ) ) .attr( "y2", d => y( d.error - d.uncertainty ) ) .attr( "stroke", "#0b5f85" ) .attr( "stroke-width", 2 ); u .append("line") .attr( "class", "cap-high" ) .attr( "x1", d => x(d.year) - 4 ) .attr( "x2", d => x(d.year) + 4 ) .attr( "y1", d => y( d.error + d.uncertainty ) ) .attr( "y2", d => y( d.error + d.uncertainty ) ) .attr( "stroke", "#0b5f85" ) .attr( "stroke-width", 2 ); } // ============================================================ // SELECTION HALOS // ============================================================ entries .append("circle") .attr( "class", "halo" ) .attr( "cx", d => x(d.year) ) .attr( "cy", d => y(d.error) ) .attr( "r", 11 ) .attr( "fill", d => d.color ) .attr( "opacity", 0 ); // ============================================================ // POINTS // ============================================================ entries .filter( d => d.type !== "definition" ) .append("circle") .attr( "class", "point" ) .attr( "cx", d => x(d.year) ) .attr( "cy", d => y(d.error) ) .attr( "r", 5.8 ) .attr( "fill", d => d.color ) .attr( "stroke", "white" ) .attr( "stroke-width", 1.5 ); // ============================================================ // 1983 DEFINITION // ============================================================ entries .filter( d => d.type === "definition" ) .append("path") .attr( "class", "definition" ) .attr( "d", d3 .symbol() .type( d3.symbolDiamond ) .size( 145 ) ) .attr( "transform", d => `translate( ${x(d.year)}, ${y(d.error)} )` ) .attr( "fill", d => d.color ) .attr( "stroke", "white" ) .attr( "stroke-width", 1.5 ); // ============================================================ // KEY LABELS // ============================================================ if ( showLabels ) { const keyYears = new Set([ 1879, 1906, 1947, 1958, 1973, 1978, 1983 ]); svg .append("g") .selectAll("text") .data( data.filter( d => keyYears.has( d.year ) ) ) .join("text") .attr( "x", d => x(d.year) + 8 ) .attr( "y", d => y(d.error) - 10 ) .attr( "font-size", 10.5 ) .attr( "font-weight", 700 ) .attr( "fill", "#385766" ) .text( d => d.experimenter ); } // ============================================================ // TOOLTIP // ============================================================ function showTooltip( event, d ) { tooltip.style.opacity = 1; tooltip.innerHTML = `

${d.year} · ${d.experimenter}

Reported: ${d.formattedValue} km/s

Error: ${d.formattedError} km/s

Uncertainty: ${d.formattedUncertainty} ${ d.uncertainty == null ? "" : " km/s" }

${ d.relativeErrorPpm == null ? "" : `Relative error: ${d.relativeErrorPpm >= 0 ? "+" : ""} ${d.relativeErrorPpm.toFixed(3)} ppm` }

`; const [ px, py ] = d3.pointer( event, container ); tooltip.style.left = `${px + 16}px`; tooltip.style.top = `${py + 12}px`; } // ============================================================ // DETAILS PANEL // ============================================================ function updateDetails() { if ( !selected ) { return; } const direction = selected.error > 0 ? "above" : selected.error < 0 ? "below" : "exactly on"; const containsReference = selected.uncertainty != null && ( selected.error - selected.uncertainty ) <= 0 && ( selected.error + selected.uncertainty ) >= 0; details.innerHTML = `

${selected.experimenter}

${selected.year} · ${selected.method}

Reported c
${selected.formattedValue} km/s

Error from reference
${selected.formattedError} km/s
${ direction === "exactly on" ? "Exact reference value." : `The reported value lies ${direction} the reference.` }

Uncertainty
${ selected.uncertainty == null ? "Unknown" : selected.uncertainty === 0 ? "0 km/s" : `±${model.formatExact( selected.uncertainty )} km/s` } ${ selected.uncertainty != null && selected.uncertainty > 0 ? `
${ containsReference ? "The uncertainty interval includes the reference value." : "The uncertainty interval does not include the reference value." } ` : "" }

Relative error
${ selected.relativeErrorPpm == null ? "n/a" : `${ selected.relativeErrorPpm >= 0 ? "+" : "" }${selected.relativeErrorPpm.toFixed(4)} ppm` }

`; } // ============================================================ // SELECTION // ============================================================ function updateSelection() { entries.each( function(d) { const active = selected && d.id === selected.id; d3 .select(this) .select(".halo") .attr( "opacity", active ? 0.18 : 0 ) .attr( "r", active ? 12 : 11 ); d3 .select(this) .select(".point") .attr( "r", active ? 7.1 : 5.8 ); d3 .select(this) .selectAll( ".uncertainty,.cap-low,.cap-high" ) .attr( "stroke-width", active ? 2.8 : 2.1 ) .attr( "opacity", active ? 1 : 0.82 ); } ); } // ============================================================ // LOCAL ZOOM / UNCERTAINTY INSPECTOR // ============================================================ function renderZoom() { zoomHost.replaceChildren(); if ( !selected ) { return; } const ZW = W; const ZH = 215; const zm = { top: 45, right: 40, bottom: 52, left: 105 }; const zsvg = d3 .create("svg") .attr( "viewBox", [0,0,ZW,ZH] ) .style( "width", "100%" ) .style( "height", "auto" ); zsvg .append("rect") .attr( "width", ZW ) .attr( "height", ZH ) .attr( "rx", 16 ) .attr( "fill", "#ffffff" ) .attr( "stroke", "#d8e4ea" ); zsvg .append("text") .attr( "x", zm.left ) .attr( "y", 25 ) .attr( "font-size", 15 ) .attr( "font-weight", 700 ) .attr( "fill", "#0b5f85" ) .text( `${selected.year} · ${selected.experimenter}: local error inspection` ); let halfSpan; if ( selected.uncertainty == null ) { halfSpan = Math.max( Math.abs( selected.error ) * 0.25, 1 ); } else if ( selected.uncertainty === 0 ) { halfSpan = 0.005; } else { halfSpan = Math.max( selected.uncertainty * 4, Math.abs( selected.error ) * 0.12, 0.001 ); } const zx = d3 .scaleLinear() .domain([ selected.error - halfSpan, selected.error + halfSpan ]) .range([ zm.left, ZW - zm.right ]); const lineY = 105; // baseline zsvg .append("line") .attr( "x1", zm.left ) .attr( "x2", ZW - zm.right ) .attr( "y1", lineY ) .attr( "y2", lineY ) .attr( "stroke", "#d5e4ea" ); // reference zero if visible if ( 0 >= zx.domain()[0] && 0 <= zx.domain()[1] ) { zsvg .append("line") .attr( "x1", zx(0) ) .attr( "x2", zx(0) ) .attr( "y1", 52 ) .attr( "y2", 145 ) .attr( "stroke", "#d9487d" ) .attr( "stroke-width", 2 ) .attr( "stroke-dasharray", "6,4" ); zsvg .append("text") .attr( "x", zx(0) ) .attr( "y", 47 ) .attr( "text-anchor", "middle" ) .attr( "font-size", 10.5 ) .attr( "font-weight", 700 ) .attr( "fill", "#d9487d" ) .text( "reference" ); } // uncertainty if ( selected.uncertainty != null && selected.uncertainty > 0 ) { zsvg .append("line") .attr( "x1", zx( selected.error - selected.uncertainty ) ) .attr( "x2", zx( selected.error + selected.uncertainty ) ) .attr( "y1", lineY ) .attr( "y2", lineY ) .attr( "stroke", "#0b5f85" ) .attr( "stroke-width", 7 ) .attr( "stroke-linecap", "round" ); } // reported error zsvg .append("circle") .attr( "cx", zx( selected.error ) ) .attr( "cy", lineY ) .attr( "r", 8 ) .attr( "fill", selected.color ) .attr( "stroke", "white" ) .attr( "stroke-width", 2 ); zsvg .append("text") .attr( "x", zx( selected.error ) ) .attr( "y", lineY - 18 ) .attr( "text-anchor", "middle" ) .attr( "font-size", 11 ) .attr( "font-weight", 700 ) .attr( "fill", "#0b5f85" ) .text( `${selected.formattedError} km/s` ); zsvg .append("g") .attr( "transform", `translate(0,${ZH - zm.bottom})` ) .call( d3 .axisBottom(zx) .ticks(7) .tickFormat( formatError ) ) .call( g => g .selectAll("text") .attr( "font-size", 10.5 ) .attr( "fill", "#486270" ) ); zsvg .append("text") .attr( "x", ZW / 2 ) .attr( "y", ZH - 10 ) .attr( "text-anchor", "middle" ) .attr( "font-size", 11 ) .attr( "fill", "#64748b" ) .text( "Error from the modern reference value (km/s)" ); zoomHost.append( zsvg.node() ); } // ============================================================ // INTERACTIONS // ============================================================ entries .on( "mouseenter", function( event, d ) { selected = d; updateSelection(); updateDetails(); renderZoom(); showTooltip( event, d ); } ) .on( "mousemove", function( event, d ) { showTooltip( event, d ); } ) .on( "mouseleave", () => { tooltip.style.opacity = 0; } ) .on( "click", function( event, d ) { selected = d; updateSelection(); updateDetails(); renderZoom(); } ); // ============================================================ // INITIAL STATE // ============================================================ updateSelection(); updateDetails(); renderZoom(); mainHost.append( svg.node() ); return container; }36:[] 2f:{"id":"9074e1eaca63a043","slug":null,"title":"A brief history of Speed of Light calculation","thumbnail":"8533c8b1073b2ac9df99d86222dc7d150bf233bf28fc147b21657399ac1cdd15","access_level":"public","create_time":"$D2026-09-01T16:14:25.846Z","update_time":"$D2026-09-01T16:34:34.034Z","view_time":null,"first_public_time":"$D2026-09-01T16:14:25.846Z","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":41,"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":"team","id":"9b777312fea6dc77","login":"allen-q","name":"Allen Q","avatar_url":"https://avatars-next.observableusercontent.com/f32293ffdef37fc20c657b7076e05c45826631edaf56406066aec07922e29316","tier":"starter_2024","role":"editor"},{"type":"individual","id":"a8a0f4ea11d88ae6","login":"allen-q","name":"Allen Q","avatar_url":"https://avatars-next.observableusercontent.com/f32293ffdef37fc20c657b7076e05c45826631edaf56406066aec07922e29316","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"A brief history of Speed of Light calculation","cells":[{"id":0,"value":"# A brief history of Speed of Light calculation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"viewof cLightControls = Inputs.form({\n era: Inputs.select(\n [\n \"Precision era (1879-1983)\",\n \"Modern era (1947-1983)\",\n \"Measurement era (1676-1983)\",\n \"Full history (1600-1983)\"\n ],\n {\n label: \"View\",\n value: \"Precision era (1879-1983)\"\n }\n ),\n\n labels: Inputs.select(\n [\"Show key labels\", \"Hide key labels\"],\n {\n label: \"Annotations\",\n value: \"Show key labels\"\n }\n ),\n\n reference: Inputs.select(\n [\"Show reference line\", \"Hide reference line\"],\n {\n label: \"Reference\",\n value: \"Show reference line\"\n }\n )\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"## Historical Error in measurements","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":36,"value":"viewof cErrorControls = Inputs.form({\n\n scale: Inputs.select(\n [\n \"Symlog\",\n \"Linear\"\n ],\n {\n label: \"Error scale\",\n value: \"Symlog\"\n }\n ),\n\n uncertainty: Inputs.select(\n [\n \"Show uncertainty\",\n \"Hide uncertainty\"\n ],\n {\n label: \"Uncertainty intervals\",\n value: \"Show uncertainty\"\n }\n ),\n\n labels: Inputs.select(\n [\n \"Show key labels\",\n \"Hide key labels\"\n ],\n {\n label: \"Annotations\",\n value: \"Show key labels\"\n }\n )\n\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1"}} 30:"$2f:body"