viewof drift = { const container = d3.create("div").style("font-family", "sans-serif"); // ── State ──────────────────────────────────────────── const S = { p0: 0.6, runs: 3, N: 100, steps: 200, t: 0, playing: false, finished: false, rand: [], trajs: [] }; const margin = { top: 42, right: 30, bottom: 8, left: 65 }; const totalH = 526; const sliderGap = 60; const colors = d3.schemeTableau10; const numInputW = 80; let hasAutoPlayed = false; // ── Top inputs ─────────────────────────────────────── const inputBar = container.append("div") .style("display", "flex").style("gap", "28px").style("padding", "0 0 10px") .style("align-items", "center").style("flex-wrap", "wrap") .style("font-size", "13px").style("color", "#444"); function mkSlider(par, label, val, min, max, step, sliderW, scale, onChange) { const wrap = par.append("div").style("display","inline-flex").style("align-items","center").style("gap","8px"); wrap.append("span").style("font-weight","600").text(label); const num = wrap.append("input").attr("type","number") .attr("min", min).attr("max", max).attr("step", step).property("value", val) .style("width", numInputW + "px").style("padding","3px 6px") .style("border","1px solid #ccc").style("border-radius","3px") .style("font-size","13px").style("font-family","inherit"); const slider = wrap.append("input").attr("type","range") .attr("min", scale === "log" ? Math.log10(min) : min) .attr("max", scale === "log" ? Math.log10(max) : max) .attr("step", scale === "log" ? 0.01 : step) .property("value", scale === "log" ? Math.log10(val) : val) .style("width", sliderW + "px").style("accent-color", "#4484ce"); slider.on("input", function() { let v = +this.value; if (scale === "log") v = Math.round(Math.pow(10, v)); v = Math.max(min, Math.min(max, scale === "log" ? v : +v.toFixed(6))); num.property("value", v); onChange(v); }); num.on("change", function() { let v = Math.max(min, Math.min(max, +this.value)); num.property("value", v); slider.property("value", scale === "log" ? Math.log10(v) : v); onChange(v); }); return { slider, num }; } function mkNumInp(par, label, val, min, max, step) { const wrap = par.append("div").style("display","inline-flex").style("align-items","center").style("gap","6px"); wrap.append("span").style("font-weight","600").text(label); const inp = wrap.append("input").attr("type","number").attr("min",min).attr("max",max).attr("step",step).property("value",val) .style("width", numInputW + "px").style("padding","3px 6px") .style("border","1px solid #ccc").style("border-radius","3px") .style("font-size","13px").style("font-family","inherit"); return inp; } const freqCtrl = mkSlider(inputBar, "Starting Frequency", S.p0, 0, 1, 0.01, 120, "linear", v => { S.p0 = v; compute(); render(); }); const runsInp = mkNumInp(inputBar, "Runs", S.runs, 1, 50, 1); const popCtrl = mkSlider(inputBar, "Population (2N)", S.N, 10, 10000, 1, 120, "log", v => { S.N = v; compute(); render(); }); const stepsCtrl = mkSlider(inputBar, "Steps", S.steps, 100, 10000, 1, 120, "log", v => { S.steps = v; if (S.t > S.steps) S.t = S.steps; // Update play state based on new position if (S.t >= S.steps) { S.playing = false; S.finished = true; } else { S.finished = false; } compute(); render(); }); inputBar.append("button") .text("Recalculate") .style("padding", "4px 12px").style("border", "1px solid #ccc").style("border-radius", "3px") .style("background", "#f5f5f5").style("font-size", "13px").style("font-family", "inherit") .style("cursor", "pointer").style("font-weight", "600").style("color", "#444") .on("click", () => { S.rand = []; compute(); render(); }); // ── SVG ────────────────────────────────────────────── const svg = container.append("svg").attr("height", totalH + sliderGap + 20); svg.append("defs").append("clipPath").attr("id","drift-clip").append("rect").attr("id","drift-clip-r"); const xS = d3.scaleLinear(), yS = d3.scaleLinear().domain([0,1]); // Time slider row — created first so it is behind the chart scrub overlay const sldrG = svg.append("g"); const sldrTrack = sldrG.append("line").attr("stroke","#ddd").attr("stroke-width",4).attr("stroke-linecap","round"); const sldrFill = sldrG.append("line").attr("stroke","#4484ce").attr("stroke-width",4).attr("stroke-linecap","round"); const sldrThumb = sldrG.append("circle").attr("r",8).attr("fill","#4484ce").attr("stroke","#fff").attr("stroke-width",2).style("cursor","pointer"); // Chart group — on top of slider so scrub overlay captures events const chartG = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`); const gridG = chartG.append("g"); const linesG = chartG.append("g").attr("clip-path","url(#drift-clip)"); const xAx = chartG.append("g"), yAx = chartG.append("g"); // Y axis title (horizontal, above axis) const yLabel = chartG.append("text") .attr("text-anchor", "start") .attr("font-size", "13px").attr("font-weight", "600").attr("fill", "#444").attr("font-family", "sans-serif") .text("Allele frequency"); // Extinct / Fixed annotations const extinctLabel = chartG.append("text") .attr("text-anchor", "start") .attr("font-size", "11px").attr("fill", "#000").attr("font-family", "sans-serif") .text("Extinct"); const fixedLabel = chartG.append("text") .attr("text-anchor", "start") .attr("font-size", "11px").attr("fill", "#000").attr("font-family", "sans-serif") .text("Fixed"); // Line at y=1.0 const fixedLine = chartG.append("line") .attr("stroke", "#000").attr("stroke-width", 1); // X axis label const xLabel = chartG.append("text") .attr("text-anchor", "middle") .attr("font-size", "13px").attr("font-weight", "600").attr("fill", "#444").attr("font-family", "sans-serif") .text("Reproduction step"); const scrubOv = chartG.append("rect").attr("fill","transparent").style("cursor","ew-resize"); const dotsG = chartG.append("g"); const startDotG = chartG.append("g").style("cursor","ns-resize"); startDotG.append("circle").attr("r", 50).attr("fill","transparent"); const startDot = startDotG.append("circle").attr("r",7).attr("fill","#000").attr("stroke","#fff").attr("stroke-width",2); // Play button — on top of everything const btnG = svg.append("g").style("cursor","pointer"); btnG.append("circle").attr("r", 24).attr("fill","transparent"); btnG.append("circle").attr("r",15).attr("fill","#555"); const btnIcon = btnG.append("g"); function drawPlay() { btnIcon.selectAll("*").remove(); btnIcon.append("path").attr("d","M-3.5,-6 L-3.5,6 L7,0 Z").attr("fill","#fff"); } function drawPause() { btnIcon.selectAll("*").remove(); btnIcon.append("path").attr("d","M-5,-6h3v12H-5ZM2,-6H5v12H2Z").attr("fill","#fff"); } function drawReplay() { btnIcon.selectAll("*").remove(); const r = 6, g = btnIcon.append("g").attr("transform", "rotate(190)"); const startA = Math.PI * .9, endA = Math.PI * 2.45; const pts = []; for (let i = 0; i <= 40; i++) { const a = startA + (endA - startA) * (i / 40); pts.push([Math.cos(a) * r, Math.sin(a) * r]); } g.append("path").attr("d", d3.line()(pts)) .attr("fill","none").attr("stroke","#fff").attr("stroke-width",2.8).attr("stroke-linecap","round"); const ea = endA; const tx = Math.cos(ea) * r, ty = Math.sin(ea) * r; const ta = ea + Math.PI / 2; const ax = Math.cos(ta), ay = Math.sin(ta); const px = -ay, py = ax; g.append("polygon") .attr("points", [[tx+ax*5,ty+ay*5],[tx+px*4,ty+py*4],[tx-px*4,ty-py*4]].map(p=>p.join(",")).join(" ")) .attr("fill","#fff"); } // ── Math ───────────────────────────────────────────── function normPPF(u) { const a=[0,-39.697,220.946,-275.929,138.358,-30.665,2.507], b=[0,-54.476,161.586,-155.699,66.801,-13.281], c=[0,-.00778,-.32240,-2.40076,-2.54973,4.37466,2.93816], d=[0,.00778,.32247,2.44513,3.75441]; if (u < .02425) { const q=Math.sqrt(-2*Math.log(u)); return(((((c[1]*q+c[2])*q+c[3])*q+c[4])*q+c[5])*q+c[6])/((((d[1]*q+d[2])*q+d[3])*q+d[4])*q+1); } if (u <= .97575) { const q=u-.5,r=q*q; return(((((a[1]*r+a[2])*r+a[3])*r+a[4])*r+a[5])*r+a[6])*q/(((((b[1]*r+b[2])*r+b[3])*r+b[4])*r+b[5])*r+1); } const q=Math.sqrt(-2*Math.log(1-u)); return -(((((c[1]*q+c[2])*q+c[3])*q+c[4])*q+c[5])*q+c[6])/((((d[1]*q+d[2])*q+d[3])*q+d[4])*q+1); } function binPPF(u, n, p) { if (p <= 0) return 0; if (p >= 1) return n; if (n > 60) return Math.max(0, Math.min(n, Math.round(n*p + Math.sqrt(n*p*(1-p)) * normPPF(u)))); let cdf = 0, pr = Math.pow(1-p, n); for (let k = 0; k <= n; k++) { cdf += pr; if (u <= cdf) return k; pr *= (p/(1-p))*((n-k)/(k+1)); } return n; } function ensureRand() { while (S.rand.length < S.runs) S.rand.push([]); for (let r = 0; r < S.runs; r++) while (S.rand[r].length < S.steps) S.rand[r].push(Math.random()); } function compute() { ensureRand(); const tn = 2 * S.N; S.trajs = []; for (let r = 0; r < S.runs; r++) { const tr = [S.p0]; let p = S.p0; for (let i = 0; i < S.steps; i++) { if (p <= 0 || p >= 1) { tr.push(p); continue; } p = binPPF(S.rand[r][i], tn, p) / tn; p = Math.max(0, Math.min(1, p)); tr.push(p); } S.trajs.push(tr); } } // ── Layout & Render ────────────────────────────────── function getW() { return container.node().getBoundingClientRect().width || 800; } function lo() { const W = getW(), cw = W - margin.left - margin.right, ch = totalH - margin.top - margin.bottom; xS.domain([0, S.steps]).range([0, cw]); yS.range([ch, 0]); return { W, cw, ch }; } function render() { const { W, cw, ch } = lo(); svg.attr("width", W); // Extend clip rect upward to allow pixel-offset lines above y=1 to render const clipPad = S.runs * 3 + 20; d3.select("#drift-clip-r").attr("y", -clipPad).attr("width", cw).attr("height", ch + clipPad); xAx.attr("transform", `translate(0,${ch})`).call(d3.axisBottom(xS).ticks(Math.min(10, S.steps / 20))); xAx.select(".domain").attr("stroke", "#ccc"); yAx.call(d3.axisLeft(yS)); yAx.select(".domain").remove(); // remove y axis line, keep ticks // Position labels — left-aligned with y axis title yLabel.attr("x", -margin.left).attr("y", -18); extinctLabel.attr("x", -margin.left).attr("y", yS(0)).attr("dominant-baseline", "middle"); fixedLabel.attr("x", -margin.left).attr("y", yS(1)).attr("dominant-baseline", "middle"); xLabel.attr("x", cw / 2).attr("y", ch + 36); // Line at y=1.0 (darker than grid) fixedLine.attr("x1", 0).attr("x2", cw).attr("y1", yS(1)).attr("y2", yS(1)) .attr("stroke", "#ccc").attr("stroke-width", 1); // Grid lines: darker for 0 and 1, lighter for middle gridG.selectAll("line").data(yS.ticks(10)).join("line") .attr("x1",0).attr("x2",cw).attr("y1",d=>yS(d)).attr("y2",d=>yS(d)) .attr("stroke", d => (d === 0 || d === 1) ? "#ccc" : "#f0f0f0"); const sliderBottomY = totalH + sliderGap + 10 - margin.top; scrubOv.attr("width", cw).attr("height", sliderBottomY); const rd = S.trajs.slice(0, S.runs).map((tr, r) => { let fx = null; let fxVal = null; for (let i = 1; i <= S.steps; i++) { if (tr[i] <= 0 || tr[i] >= 1) { fx = i; fxVal = tr[i]; break; } } const fixed = fx !== null && fx <= S.t; const extinct = fixed && fxVal <= 0; const fixedTop = fixed && fxVal >= 1; // For extinction: line stops at fixation. For fixation at 1: line continues to current t. const lineEnd = extinct ? fx : S.t; const sl = tr.slice(0, lineEnd + 1); // Marker position: at fixation step if fixed, else at current t const markerStep = fixed ? fx : S.t; const markerVal = fixed ? fxVal : sl[sl.length - 1]; // End dot (circle) position: tip of the visible line const endStep = lineEnd; const endVal = sl[sl.length - 1]; return { sl, endStep, endVal, markerStep, markerVal, fixed, extinct, fixedTop, fxStep: fx, r }; }); // Sort fixed-at-1 runs by fixation step to assign stacking offset const fixedTopRuns = rd.filter(d => d.fixedTop).sort((a, b) => a.fxStep - b.fxStep); const fixedTopOffset = new Map(); fixedTopRuns.forEach((d, i) => fixedTopOffset.set(d.r, i)); // Standard line generator const lineGen = d3.line().x((_, i) => xS(i)).y(d => yS(d)); // For fixed-at-1 lines, compute the data-space offset equivalent to the pixel offset // so lines render correctly through the normal yScale pipeline. // We build one path per run, modifying post-fixation values in data space. const lineData = rd.map(d => { if (d.fixedTop) { const pxOffset = fixedTopOffset.get(d.r) * 3; // pixels upward // Convert pixel offset to data-space: at y=1, moving up by pxOffset pixels const offsetVal = yS.invert(yS(1) - pxOffset) - 1; // positive value to add const adjusted = d.sl.map((v, i) => { if (i >= d.fxStep) return v + offsetVal; return v; }); return { seg: adjusted, r: d.r }; } return { seg: d.sl, r: d.r }; }); linesG.selectAll("path").data(lineData, d => d.r).join("path") .attr("fill","none") .attr("stroke", d => colors[d.r % 10]) .attr("stroke-width", 2) .attr("stroke-opacity", .8) .attr("d", d => lineGen(d.seg)); // End markers — draw X markers first, then circles sorted by fixation order const endMarkers = dotsG.selectAll("g.end-marker").data(rd, d => d.r); const endEnter = endMarkers.enter().append("g").attr("class","end-marker"); const endMerge = endEnter.merge(endMarkers); endMarkers.exit().remove(); endMerge.each(function(d) { const g = d3.select(this); g.selectAll("*").remove(); const c = colors[d.r % 10]; if (d.fixed) { // X marker at the fixation point (no offset, true position) const mx = xS(d.markerStep), my = yS(d.markerVal); const s = 4.5; g.append("line").attr("x1",mx-s).attr("y1",my-s).attr("x2",mx+s).attr("y2",my+s) .attr("stroke","#fff").attr("stroke-width",6).attr("stroke-linecap","round"); g.append("line").attr("x1",mx+s).attr("y1",my-s).attr("x2",mx-s).attr("y2",my+s) .attr("stroke","#fff").attr("stroke-width",6).attr("stroke-linecap","round"); g.append("line").attr("x1",mx-s).attr("y1",my-s).attr("x2",mx+s).attr("y2",my+s) .attr("stroke",c).attr("stroke-width",2.5).attr("stroke-linecap","round"); g.append("line").attr("x1",mx+s).attr("y1",my-s).attr("x2",mx-s).attr("y2",my+s) .attr("stroke",c).attr("stroke-width",2.5).attr("stroke-linecap","round"); // For fixed-at-1 lines that continue, also draw end circle with offset if (d.fixedTop && d.endStep > d.fxStep) { const offset = -(fixedTopOffset.get(d.r) * 3); const ex = xS(d.endStep), ey = yS(d.endVal) + offset; g.append("circle").attr("cx",ex).attr("cy",ey) .attr("r",5).attr("fill",c).attr("stroke","#fff").attr("stroke-width",1.5); } } else { // Running: circle at end of line const ex = xS(d.endStep), ey = yS(d.endVal); g.append("circle").attr("cx",ex).attr("cy",ey) .attr("r",5).attr("fill",c).attr("stroke","#fff").attr("stroke-width",1.5); } }); // Raise fixed-at-1 end markers in reverse fixation order (first fixed = on top) fixedTopRuns.slice().reverse().forEach(d => { dotsG.selectAll("g.end-marker") .filter(dd => dd.r === d.r) .raise(); }); startDotG.attr("transform", `translate(${xS(0)},${yS(S.p0)})`); startDotG.raise(); const sy = totalH + sliderGap; sldrG.attr("transform", `translate(${margin.left},${sy})`); sldrTrack.attr("x1",0).attr("x2",cw); sldrFill.attr("x1",0).attr("x2",xS(S.t)); sldrThumb.attr("cx", xS(S.t)); btnG.attr("transform", `translate(${margin.left / 2},${sy})`); btnG.raise(); if (S.finished) drawReplay(); else if (S.playing) drawPause(); else drawPlay(); } // ── Interactions ───────────────────────────────────── function setT(x) { const { cw } = lo(); S.t = Math.max(0, Math.min(S.steps, Math.round(xS.invert(Math.max(0, Math.min(cw, x)))))); S.finished = S.t >= S.steps; render(); } function stop() { S.playing = false; } startDotG.call(d3.drag() .on("drag", function(event) { const [, py] = d3.pointer(event, chartG.node()); const rawVal = yS.invert(py); S.p0 = Math.round(Math.max(0, Math.min(1, rawVal)) * 100) / 100; freqCtrl.num.property("value", S.p0); freqCtrl.slider.property("value", S.p0); compute(); render(); }) ); scrubOv.call(d3.drag().on("start", e => { stop(); setT(e.x); }).on("drag", e => setT(e.x))); sldrThumb.call(d3.drag().on("start", () => stop()).on("drag", e => setT(e.x))); sldrG.on("mousedown", function(e) { if (e.target === sldrThumb.node()) return; stop(); setT(d3.pointer(e, sldrG.node())[0]); }); btnG.on("click", () => { if (S.finished) { S.t = 0; S.finished = false; S.playing = true; } else { S.playing = !S.playing; } render(); if (S.playing) anim(); }); runsInp.on("change", function() { S.runs = Math.max(1, Math.round(+this.value)); runsInp.property("value", S.runs); compute(); render(); }); // ── Animation ──────────────────────────────────────── let lt = 0; function anim() { if (!S.playing) return; requestAnimationFrame(ts => { if (!S.playing) return; if (ts - lt > 33) { lt = ts; S.t = Math.min(S.t + 1, S.steps); if (S.t >= S.steps) { S.playing = false; S.finished = true; } render(); } if (S.playing) anim(); }); } // ── Auto-play on 50% visibility ────────────────────── const visObs = new IntersectionObserver((entries) => { for (const entry of entries) { if (entry.isIntersecting && !hasAutoPlayed) { hasAutoPlayed = true; visObs.disconnect(); S.playing = true; render(); anim(); } } }, { threshold: 0.5 }); // ── Resize ─────────────────────────────────────────── new ResizeObserver(() => render()).observe(container.node()); // ── Init ───────────────────────────────────────────── compute(); render(); // Start observing visibility after yielding the node requestAnimationFrame(() => visObs.observe(container.node())); yield container.node(); }