2b:null 2c:["$","title",null,{"children":"The Remarkable Speed of DNA Replication | Niko | Observable"}] 31:T18b0,viewof viz = { // Fixed-size viewport (no growing, no scrolling inside the widget) var VIEW_W = 900, VIEW_H = 620; // Grid config (lower ROWS/COLS for fewer squares) var ROWS = 250, COLS = 200; // 250 * 200 = 50,000 target cells var REPLICATION_RATE = 600; // bases per second (E. coli) var MUTATION_RATE = 1e-8; // 1 in 100,000,000 per base var CELL = Math.max( 1, Math.floor(Math.min((VIEW_W - 2) / COLS, (VIEW_H - 80) / ROWS)) ); var WIDTH = Math.min(VIEW_W - 2, COLS * CELL); var HEIGHT = Math.min(VIEW_H - 80, ROWS * CELL); var TOTAL = ROWS * COLS; // DOM (fixed size; no growth) var div = html`

`; var controls = html`

Speed × 1.0

`; // Canvas sits in a fixed-height holder so nothing pushes layout around. var stage = html`

`; var canvas = DOM.canvas(WIDTH, HEIGHT); canvas.style.imageRendering = "pixelated"; canvas.style.display = "block"; canvas.style.background = "#f0f0f0"; stage.append(canvas); // Footer (fixed height) var legend = html`

Replicated Mutation

`; div.append(controls, stage, legend); // 2D context & helpers var ctx = canvas.getContext("2d"); function paintBackground() { ctx.fillStyle = "#f0f0f0"; ctx.fillRect(0, 0, WIDTH, HEIGHT); } function drawCell(index, fill) { var r = (index / COLS) | 0; var c = index % COLS; // If ROWS*COLS exceeds visible area due to rounding, clip silently: if (r >= ROWS || c >= COLS) return; ctx.fillStyle = fill; ctx.fillRect(c * CELL, r * CELL, CELL, CELL); } // Per-grid progress (resets when grid completes): var replicatedInGrid = 0; var mutationsInGrid = 0; // Cumulative totals (do NOT reset when grid cycles): var totalReplicated = 0; var totalMutations = 0; var cycles = 0; var playing = true; var last = performance.now(); // Controls var speedEl = controls.querySelector("#speed"); var speedValEl = controls.querySelector("#speedVal"); var statusEl = controls.querySelector("#status"); var playBtn = controls.querySelector("#playpause"); var resetBtn = controls.querySelector("#reset"); // Init background paintBackground(); function updateStatus() { var pct = (replicatedInGrid / TOTAL) * 100; // Keep the string short to avoid stretching; use thousands short form. function short(n) { if (n >= 1e9) return (n / 1e9).toFixed(2) + "B"; if (n >= 1e6) return (n / 1e6).toFixed(2) + "M"; if (n >= 1e3) return (n / 1e3).toFixed(2) + "k"; return String(n); } statusEl.textContent = `Run ${cycles} • Grid ${pct.toFixed( 1 )}% • Total: ${short(totalReplicated)} bases, ${short( totalMutations )} muts`; } // ──────────────────────────────────────────────────────────────────────────── // Controls speedEl.addEventListener("input", () => { speedValEl.textContent = (+speedEl.value).toFixed(1); }); playBtn.addEventListener("click", () => { playing = !playing; playBtn.textContent = playing ? "Pause" : "Play"; if (playing) { last = performance.now(); requestAnimationFrame(tick); } }); resetBtn.addEventListener("click", () => { playing = false; playBtn.textContent = "Play"; replicatedInGrid = 0; mutationsInGrid = 0; totalReplicated = 0; totalMutations = 0; cycles = 0; paintBackground(); updateStatus(); }); // ──────────────────────────────────────────────────────────────────────────── // Main loop function tick(now) { if (!playing) return; var dt = (now - last) / 1000; // seconds last = now; var rate = REPLICATION_RATE * +speedEl.value; var remaining = TOTAL - replicatedInGrid; var increment = Math.min((rate * dt) | 0, remaining); // To avoid visual stutter on tiny CELL, batch paint using fillRect (already batched). for (var k = 0; k < increment; k++) { var idx = replicatedInGrid + k; if (Math.random() < MUTATION_RATE) { drawCell(idx, "#e74c3c"); // red mutationsInGrid++; totalMutations++; } else { drawCell(idx, "#2ecc71"); // green } } replicatedInGrid += increment; totalReplicated += increment; // When full, auto-cycle the grid WITHOUT changing the container size. if (replicatedInGrid >= TOTAL) { cycles++; replicatedInGrid = 0; mutationsInGrid = 0; paintBackground(); } updateStatus(); requestAnimationFrame(tick); } // Kick off updateStatus(); requestAnimationFrame(tick); return div; }32:[] 2f:{"id":"6d9b33b8aeef2ad7","slug":null,"title":"The Remarkable Speed of DNA Replication","thumbnail":"eb491132ad8b1f5746d7863962a72ca361db16056f4b421ba806a39ce9a784d7","access_level":"public","create_time":"$D2025-08-10T00:42:00.383Z","update_time":"$D2025-08-10T01:05:45.310Z","view_time":null,"first_public_time":"$D2025-08-10T00:42:00.383Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"91bfe08cf53266a9","login":"nikodata","name":"Niko","avatar_url":"https://avatars-next.observableusercontent.com/098f884db2223bef0607a4832dbbfebdb1b8f6232fe9c9c9a0732dd401bfa2fb","tier":"starter_2024","bio":""},"version":22,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"103b6e09e2305a61","login":"nikodata","name":"Niko","avatar_url":"https://avatars-next.observableusercontent.com/098f884db2223bef0607a4832dbbfebdb1b8f6232fe9c9c9a0732dd401bfa2fb","tier":null,"bio":""}],"members":[{"type":"individual","id":"103b6e09e2305a61","login":"nikodata","name":"Niko","avatar_url":"https://avatars-next.observableusercontent.com/098f884db2223bef0607a4832dbbfebdb1b8f6232fe9c9c9a0732dd401bfa2fb","tier":null,"role":"editor"},{"type":"team","id":"91bfe08cf53266a9","login":"nikodata","name":"Niko","avatar_url":"https://avatars-next.observableusercontent.com/098f884db2223bef0607a4832dbbfebdb1b8f6232fe9c9c9a0732dd401bfa2fb","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"The Remarkable Speed of DNA Replication","cells":[{"id":0,"value":"# The Remarkable Speed of DNA Replication","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 30:"$2f:body"