Coin A (Fair)

Flips: ${flips}

Heads: ${headsA} (${fmtPct(pA)})

Tails: ${flips - headsA}

`); statBoxB.html(`

Coin B (Unknown Bias)

Flips: ${flips}

Heads: ${headsB} (${fmtPct(pB)})

Tails: ${flips - headsB}

`); if (lastA !== null && lastB !== null) { lastFlipBox.text( `Last flip → Coin A: ${lastA}, Coin B: ${lastB}` ); } else { lastFlipBox.text(""); } // inference text if (flips < 10) { inferenceBox.text( "Not enough flips yet to say much. Short runs can look very lopsided just by chance." ); } else { const delta = pB - 0.5; const absDelta = Math.abs(delta); if (absDelta < 0.03) { inferenceBox.text( "So far Coin B looks roughly similar to a fair coin. With more flips, any hidden bias would become clearer." ); } else if (absDelta < 0.08) { inferenceBox.text( "Coin B is starting to drift away from 50%. This might be noise or a slight bias—more flips will make the trend clearer." ); } else { const est = (pB * 100).toFixed(1); inferenceBox.text( `Coin B now looks biased: it lands on heads about ${est} of the time based on the flips so far.` ); } } } // -------------------------------------------------- // Chart redraw // -------------------------------------------------- function redrawChart() { svg.selectAll("*").remove(); if (dataA.length === 0) { // axes baseline const x = d3.scaleLinear().domain([0, 1]).range([margin.left, width - margin.right]); const y = d3.scaleLinear().domain([0, 1]).range([height - margin.bottom, margin.top]); svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).ticks(2).tickFormat(d3.format("d"))) .selectAll("text").style("font-size", "10px").style("fill", COLOR_AXIS); svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(3).tickFormat(d => (d * 100) + "%")) .selectAll("text").style("font-size", "10px").style("fill", COLOR_AXIS); return; } const maxN = dataA[dataA.length - 1].n; const x = d3.scaleLinear() .domain([1, maxN]) .range([margin.left, width - margin.right]); const y = d3.scaleLinear() .domain([0, 1]) .range([height - margin.bottom, margin.top]); // Axes const xAxis = d3.axisBottom(x) .ticks(6) .tickFormat(d3.format("d")); const yAxis = d3.axisLeft(y) .ticks(5) .tickFormat(d => (d * 100).toFixed(0) + "%"); svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(xAxis) .selectAll("text") .style("font-size", "10px") .style("fill", COLOR_AXIS); svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(yAxis) .selectAll("text") .style("font-size", "10px") .style("fill", COLOR_AXIS); // horizontal 50% reference line svg.append("line") .attr("x1", margin.left) .attr("x2", width - margin.right) .attr("y1", y(0.5)) .attr("y2", y(0.5)) .attr("stroke", "rgba(255,255,255,0.25)") .attr("stroke-dasharray", "4,3") .attr("stroke-width", 1); svg.append("text") .attr("x", width - margin.right - 4) .attr("y", y(0.5) - 4) .attr("text-anchor", "end") .attr("font-size", 9) .attr("fill", "rgba(255,255,255,0.6)") .text("50%"); // line generators const lineGen = d3.line() .x(d => x(d.n)) .y(d => y(d.p)) .curve(d3.curveMonotoneX); svg.append("path") .datum(dataA) .attr("fill", "none") .attr("stroke", COLOR_A) .attr("stroke-width", 2) .attr("d", lineGen); svg.append("path") .datum(dataB) .attr("fill", "none") .attr("stroke", COLOR_B) .attr("stroke-width", 2) .attr("d", lineGen); } // -------------------------------------------------- // Flip logic // -------------------------------------------------- function runFlips(count) { let lastA = null; let lastB = null; for (let i = 0; i < count; i++) { const aHead = Math.random() < 0.5; const bHead = Math.random() < biasB; lastA = aHead ? "Heads" : "Tails"; lastB = bHead ? "Heads" : "Tails"; flips++; if (aHead) headsA++; if (bHead) headsB++; const pA = headsA / flips; const pB = headsB / flips; dataA.push({ n: flips, p: pA }); dataB.push({ n: flips, p: pB }); } updateStats(lastA, lastB); redrawChart(); } function resetAll() { flips = 0; headsA = 0; headsB = 0; dataA = []; dataB = []; lastFlipBox.text(""); updateStats(null, null); redrawChart(); } // -------------------------------------------------- // Buttons wiring // -------------------------------------------------- btnGroup.append("button") .attr("class", "btn btn-sm btn-primary") .text("Flip Once") .on("click", () => runFlips(1)); btnGroup.append("button") .attr("class", "btn btn-sm btn-outline-light") .text("Flip 50") .on("click", () => runFlips(50)); btnGroup.append("button") .attr("class", "btn btn-sm btn-outline-light") .text("Flip 200") .on("click", () => runFlips(200)); btnGroup.append("button") .attr("class", "btn btn-sm btn-outline-light") .text("Reset") .on("click", resetAll); let autoInterval = null; btnGroup.append("button") .attr("class", "btn btn-sm btn-warning") .text("Auto Flip") .on("click", function () { const btn = d3.select(this); if (autoInterval) { clearInterval(autoInterval); autoInterval = null; btn.text("Auto Flip"); } else { btn.text("Stop"); autoInterval = setInterval(() => runFlips(1), 100); } }); // -------------------------------------------------- // Initial render // -------------------------------------------------- resetAll(); })();

Connected Topic(s):

Markov Chain

Related Topic(s):