2b:null 2c:["$","title",null,{"children":"E. coli Central Dogma | Niko | Observable"}] 31:T40f3,viewof viz = { // ──────────────────────────────────────────────────────────────────────────── // Central Dogma — SAME UI & NUMBERS; sizing fixed so everything fits the box. // Key change: the canvas auto-sizes to the remaining space using flex, // and a ResizeObserver recomputes layout so nothing gets cut off. // Container size var VIEW_W = 900, VIEW_H = 1000; var PADDING = 50, BORDER = 2, GAP = 20; // Biology-ish defaults var RNAP_SPEED_NT_S = 40; // nt/s var RIBO_SPEED_AA_S = 20; // aa/s var GENE_LEN_NT = 1500; // nt var TRANSCRIPTION_INIT_S = 0.2; // /s var TRANSLATION_INIT_S = 0.05; // /mRNA/s var MRNA_HALF_LIFE_MIN = 5; // min var PROT_HALF_LIFE_MIN = 60; // min var SPEED_MULTIPLIER = 1.0; // × speed // ──────────────────────────────────────────────────────────────────────────── // DOM (same controls/legend/stats; container layout changed) var div = html`

`; var controls = html`

Speed × ${SPEED_MULTIPLIER.toFixed(2)} RNAP (nt/s) ${RNAP_SPEED_NT_S} Tx init (/s) ${TRANSCRIPTION_INIT_S.toFixed(2)} mRNA t½ (min) ${MRNA_HALF_LIFE_MIN} Ribo (aa/s) ${RIBO_SPEED_AA_S} Gene (nt) ${GENE_LEN_NT} Tl init (/mRNA/s) ${TRANSLATION_INIT_S.toFixed(2)} Prot t½ (min) ${PROT_HALF_LIFE_MIN}

`; var stats = html`

Live — RNAPs: 0, mRNAs: 0, ribosomes: 0, proteins: 0 • Totals — mRNA made: 0, decayed: 0; protein made: 0, decayed: 0

`; var legend = html`

RNAP mRNA Ribosome Protein

`; // Stage FLEXES to fill remaining space. var stage = html`

`; // Canvas is sized programmatically to match stage's inner box. var canvas = DOM.canvas(10, 10); canvas.style.imageRendering = "crisp-edges"; canvas.style.display = "block"; stage.append(canvas); // Append in order so the stage gets the leftover height div.append(controls, stats, stage, legend); // ──────────────────────────────────────────────────────────────────────────── // Layout / coordinates ( recomputed on resize) var ctx = canvas.getContext("2d"); var W = 0, H = 0; var yDNA = 0, yMRNA = 0, yPROT = 0, xL = 0, xR = 0, genePx = 0; function computeLayout() { // Fit canvas to stage's current content box. // Subtract 1px margins to avoid right/bottom anti-alias cutoffs. const w = Math.max(900, Math.floor(stage.clientWidth)); const h = Math.max(550, Math.floor(stage.clientHeight)); if (w !== W || h !== H) { W = canvas.width = w; H = canvas.height = h; } // Pack three lanes tightly const TOP_MARGIN = 20; const BOTTOM_MARGIN = 20; const usableH = Math.max(50, H - TOP_MARGIN - BOTTOM_MARGIN); // Three centers equally spaced within usableH: const laneGap = Math.floor(usableH / 2); // distance between centers (2 gaps for 3 lanes) yDNA = TOP_MARGIN; yMRNA = TOP_MARGIN + laneGap; yPROT = TOP_MARGIN + 1.5 * laneGap; // Horizontal margins; enough to keep circles within bounds xL = Math.max(12, Math.round(W * 0.06)); xR = Math.min(W - 12, Math.round(W * 0.94)); genePx = Math.max(10, xR - xL); } function ntToX(nt) { return xL + (nt / GENE_LEN_NT) * genePx; } function aaToX(aa) { return xL + (aa / Math.max(1, Math.floor(GENE_LEN_NT / 3))) * genePx; } // ──────────────────────────────────────────────────────────────────────────── // Simulation state var rnap = []; // { pos_nt } var mrnas = []; // { _id, age, len_nt, y_jitter } var ribos = []; // { mrna_id, pos_aa } var prots = []; // { age, x, y } var total_mrna_made = 0, total_mrna_decayed = 0; var total_protein_made = 0, total_protein_decayed = 0; var playing = true; var last = performance.now(); // Stochastic helpers (UNCHANGED) function poisson_event(rate_per_s, dt_s) { return Math.random() < 1 - Math.exp(-rate_per_s * dt_s); } function decay_prob(half_life_min, dt_s) { if (half_life_min <= 0) return 0; var tau = (half_life_min * 60) / Math.log(2); return 1 - Math.exp(-dt_s / tau); } // Controls wiring (UNCHANGED) var el = { spd: controls.querySelector("#spd"), spdVal: controls.querySelector("#spdVal"), rnap: controls.querySelector("#rnap"), rnapVal: controls.querySelector("#rnapVal"), txi: controls.querySelector("#txi"), txiVal: controls.querySelector("#txiVal"), mrnaHL: controls.querySelector("#mrnaHL"), mrnaHLVal: controls.querySelector("#mrnaHLVal"), ribo: controls.querySelector("#ribo"), riboVal: controls.querySelector("#riboVal"), tli: controls.querySelector("#tli"), tliVal: controls.querySelector("#tliVal"), gene: controls.querySelector("#gene"), geneVal: controls.querySelector("#geneVal"), protHL: controls.querySelector("#protHL"), protHLVal: controls.querySelector("#protHLVal"), play: controls.querySelector("#play"), reset: controls.querySelector("#reset"), s_live_rnap: stats.querySelector("#live_rnap"), s_live_mrna: stats.querySelector("#live_mrna"), s_live_ribo: stats.querySelector("#live_ribo"), s_live_prot: stats.querySelector("#live_prot"), s_tot_mrna: stats.querySelector("#tot_mrna"), s_dec_mrna: stats.querySelector("#dec_mrna"), s_tot_prot: stats.querySelector("#tot_prot"), s_dec_prot: stats.querySelector("#dec_prot") }; function refreshLabels() { el.spdVal.textContent = (+el.spd.value).toFixed(2); el.rnapVal.textContent = el.rnap.value; el.txiVal.textContent = (+el.txi.value).toFixed(2); el.mrnaHLVal.textContent = el.mrnaHL.value; el.riboVal.textContent = el.ribo.value; el.tliVal.textContent = (+el.tli.value).toFixed(2); el.geneVal.textContent = el.gene.value; el.protHLVal.textContent = el.protHL.value; } refreshLabels(); el.spd.oninput = el.rnap.oninput = el.txi.oninput = el.mrnaHL.oninput = el.ribo.oninput = el.tli.oninput = el.gene.oninput = el.protHL.oninput = refreshLabels; el.play.onclick = () => { playing = !playing; el.play.textContent = playing ? "Pause" : "Play"; if (playing) { last = performance.now(); requestAnimationFrame(tick); } }; el.reset.onclick = () => { rnap.length = 0; mrnas.length = 0; ribos.length = 0; prots.length = 0; total_mrna_made = 0; total_mrna_decayed = 0; total_protein_made = 0; total_protein_decayed = 0; drawStatic(); drawDynamic(); updateStats(); }; // ──────────────────────────────────────────────────────────────────────────── // Drawing (UNCHANGED visuals; bounds checks ensure no cutoffs) function drawStatic() { ctx.clearRect(0, 0, W, H); // DNA track ctx.strokeStyle = "#555"; ctx.lineWidth = 4; ctx.beginPath(); ctx.moveTo(xL, yDNA); ctx.lineTo(xR, yDNA); ctx.stroke(); // mRNA dashed guide ctx.strokeStyle = "#bbb"; ctx.lineWidth = 2; ctx.setLineDash([6, 6]); ctx.beginPath(); ctx.moveTo(xL, yMRNA); ctx.lineTo(xR, yMRNA); ctx.stroke(); ctx.setLineDash([]); // Protein pool baseline ctx.strokeStyle = "#eee"; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(30, yPROT); ctx.lineTo(W - 10, yPROT); ctx.stroke(); // Labels ctx.fillStyle = "#333"; ctx.font = "12px system-ui, sans-serif"; ctx.fillText("DNA (gene)", xL, yDNA - 8); ctx.fillText("mRNA (multiple per gene)", xL, yMRNA - 8); ctx.fillText("Proteins (pool)", 60, yPROT - 8); } function drawDynamic() { // RNAPs for (var i = 0; i < rnap.length; i++) { var x = ntToX(rnap[i].pos_nt); var R = 6, marginX = 2; x = Math.max(xL + marginX, Math.min(xR - marginX, x)); ctx.fillStyle = "#2ecc71"; ctx.beginPath(); ctx.arc(x, yDNA, R, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = "#277e55"; ctx.stroke(); } // mRNAs + ribosomes for (var m = 0; m < mrnas.length; m++) { var mo = mrnas[m]; var y = yMRNA + mo.y_jitter; y = Math.max(yMRNA - 10, Math.min(yMRNA + 10, y)); // keep inside lane ctx.strokeStyle = "#f39c12"; ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(xL, y); ctx.lineTo(xR, y); ctx.stroke(); for (var j = 0; j < ribos.length; j++) { var ro = ribos[j]; if (ro.mrna_id !== mo._id) continue; var rx = aaToX(ro.pos_aa); var rR = 5, margin = 2; rx = Math.max(xL + margin, Math.min(xR - margin, rx)); ctx.fillStyle = "#3498db"; ctx.beginPath(); ctx.arc(rx, y, rR, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = "#246b96"; ctx.stroke(); } } // Proteins — confine to pool area and away from edges for (var p = 0; p < prots.length; p++) { var pr = prots[p]; var r = 3, margin = 4; var px = Math.max(margin, Math.min(W - margin, pr.x)); var pyTop = yPROT + 12, pyBottom = H - margin; var py = Math.max(pyTop, Math.min(pyBottom, pr.y)); ctx.fillStyle = "#9b59b6"; ctx.beginPath(); ctx.arc(px, py, r, 0, Math.PI * 2); ctx.fill(); } } function updateStats() { el.s_live_rnap.textContent = rnap.length; el.s_live_mrna.textContent = mrnas.length; el.s_live_ribo.textContent = ribos.length; el.s_live_prot.textContent = prots.length; el.s_tot_mrna.textContent = total_mrna_made.toLocaleString(); el.s_dec_mrna.textContent = total_mrna_decayed.toLocaleString(); el.s_tot_prot.textContent = total_protein_made.toLocaleString(); el.s_dec_prot.textContent = total_protein_decayed.toLocaleString(); } // ──────────────────────────────────────────────────────────────────────────── // Simulation (UNCHANGED) function step(dt_s) { var spd = +el.spd.value; var rnap_speed = +el.rnap.value * spd; var ribo_speed = +el.ribo.value * spd; var tx_init = +el.txi.value * spd; var tl_init = +el.tli.value * spd; GENE_LEN_NT = +el.gene.value; var mrna_decay_p = decay_prob(+el.mrnaHL.value, dt_s * spd); var prot_decay_p = decay_prob(+el.protHL.value, dt_s * spd); if (poisson_event(tx_init, dt_s)) rnap.push({ pos_nt: 0 }); for (var i = rnap.length - 1; i >= 0; i--) { var o = rnap[i]; o.pos_nt += rnap_speed * dt_s; if (o.pos_nt >= GENE_LEN_NT) { mrnas.push({ _id: Math.random().toString(36).slice(2), age: 0, len_nt: GENE_LEN_NT, y_jitter: (Math.random() - 0.5) * 10 }); total_mrna_made++; rnap.splice(i, 1); } } for (var mi = mrnas.length - 1; mi >= 0; mi--) { var mobj = mrnas[mi]; mobj.age += dt_s * spd; if (Math.random() < mrna_decay_p) { for (var rbi = ribos.length - 1; rbi >= 0; rbi--) { if (ribos[rbi].mrna_id === mobj._id) ribos.splice(rbi, 1); } mrnas.splice(mi, 1); total_mrna_decayed++; } } for (var mi2 = 0; mi2 < mrnas.length; mi2++) { if (poisson_event(tl_init, dt_s)) ribos.push({ mrna_id: mrnas[mi2]._id, pos_aa: 0 }); } var gene_len_aa = Math.max(1, Math.floor(GENE_LEN_NT / 3)); for (var ri = ribos.length - 1; ri >= 0; ri--) { var rb = ribos[ri]; rb.pos_aa += ribo_speed * dt_s; if (rb.pos_aa >= gene_len_aa) { var margin = 14, px = margin + Math.random() * (W - 2 * margin); var pyTop = yPROT + 12, pyBottom = H - margin; var py = pyTop + Math.random() * Math.max(10, pyBottom - pyTop); prots.push({ age: 0, x: px, y: py }); total_protein_made++; ribos.splice(ri, 1); } } for (var pi = prots.length - 1; pi >= 0; pi--) { if (Math.random() < prot_decay_p) { prots.splice(pi, 1); total_protein_decayed++; } } } // ──────────────────────────────────────────────────────────────────────────── // Animation + Resize handling function tick(now) { if (!playing) return; var dt = (now - last) / 1000; if (dt > 0.1) dt = 0.1; last = now; step(dt); drawStatic(); drawDynamic(); updateStats(); requestAnimationFrame(tick); } // Recompute canvas size & lane positions whenever the stage changes size. var ro = new ResizeObserver(() => { computeLayout(); // Redraw immediately on resiz drawStatic(); drawDynamic(); updateStats(); }); ro.observe(stage); // recompute once right away computeLayout(); // Init drawStatic(); drawDynamic(); updateStats(); requestAnimationFrame(tick); // Clean up observer if the cell is invalidated invalidation.then(() => ro.disconnect()); return div; }32:[] 2f:{"id":"df05bc355b907fab","slug":null,"title":"E. coli Central Dogma","thumbnail":"1e6e2ddb41fc59b0e15609cee435db7c2df00772dae2ffababe4c19d71b23296","access_level":"public","create_time":"$D2025-08-16T17:46:48.865Z","update_time":"$D2025-08-16T18:18:41.696Z","view_time":null,"first_public_time":"$D2025-08-16T17:46:48.865Z","has_unpublished_edits":null,"fork":{"id":"6d9b33b8aeef2ad7","slug":null,"title":"The Remarkable Speed of DNA Replication","owner":{"id":"91bfe08cf53266a9","login":"nikodata","name":"Niko"}},"stars":1,"starred":false,"owner":{"type":"team","id":"91bfe08cf53266a9","login":"nikodata","name":"Niko","avatar_url":"https://avatars-next.observableusercontent.com/098f884db2223bef0607a4832dbbfebdb1b8f6232fe9c9c9a0732dd401bfa2fb","tier":"starter_2024","bio":""},"version":68,"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":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"E. coli Central Dogma","cells":[{"id":0,"value":"# _E. coli_ Central Dogma","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"