25:["$","title",null,{"children":"3D Genetic RNA Codon 4x4x4 Cube | Lao | Observable"}] 49:T8188,chart = { fonts; const textOffsetY = 3; // vertical nudge (px) for centering text on all canvas textures const maxWidth = 800; // maximum width of the chart in px const topCrop = 0.10; // fraction of the top of the square view to crop away const fogPadding = 15; // extra fog distance beyond the cube's front and back const shellOpacity = 0.08; // opacity of shell polygons facing straight at the camera const shellHighlightOpacity = 0.4; // same, for the hovered amino acid group's shell const shellSideOpacityMultiplier = 3; // side-on polygons get this many times the facing opacity const shellSideFalloff = 2; // curve of the center-to-side blend (higher = thinner opaque rim) const shellGridSize = 1.0; // marching cubes resolution for shells (smaller = smoother but slower) const shellThickness = 2.8; // distance from codons/connections where the shell surface sits const shellExpansion = 8; // padding around each group's bounds when building its shell const shellSmoothIterations = 3; // passes of surface smoothing on the shells (0 = none) const shellSmoothStrength = 0.5; // how far each smoothing pass moves vertices (0–1) const labelPaddingX = 20; // horizontal padding (px) around amino acid label text, ~matches codon plates const labelHighlightTextColor = '#ffffff'; // text color of a hovered amino acid label const axisLineOffset = 3; // distance of axis lines from the cube edge const axisLabelOffset = 2; // distance of axis labels beyond their axis line const axisFadeSpeed = 0.15; // how fast axis labels fade when switching edges (0–1) const tapThreshold = 10; // max finger movement in px that still counts as a tap const tapTime = 300; // max touch duration in ms that still counts as a tap const visibilityMargin = '100px'; // how far off-screen the chart starts/stops animating let width = Math.min(window.innerWidth, maxWidth); let fullHeight = width; let height = Math.round(fullHeight * (1 - topCrop)); const container = DOM.element('div'); container.style.width = width + 'px'; container.style.height = height + 'px'; const scene = new THREE.Scene(); scene.background = new THREE.Color(0xffffff); const cubeHalfDiag = Math.sqrt(3) * 18; scene.fog = new THREE.Fog(0xffffff, 50, 175); const camera = new THREE.PerspectiveCamera(45, width / fullHeight, 1, 1000); camera.setViewOffset(width, fullHeight, 0, Math.round(fullHeight * topCrop), width, height); camera.position.set(30, 40, 85); // starting camera position camera.lookAt(0, 0, 0); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(width, height); container.appendChild(renderer.domElement); const controls = new THREE.OrbitControls(camera, renderer.domElement); controls.enableZoom = true; controls.enablePan = false; controls.enableRotate = true; controls.enableDamping = true; controls.dampingFactor = 0.2; // rotation inertia (lower = longer glide) controls.rotateSpeed = 0.15; // drag rotation sensitivity controls.zoomSpeed = 2; controls.minDistance = 40; // closest zoom controls.maxDistance = 150; // farthest zoom controls.autoRotate = true; controls.autoRotateSpeed = .05; // idle spin speed function handleResize(newWidth) { newWidth = Math.min(newWidth, maxWidth); if (newWidth !== width) { width = newWidth; fullHeight = width; height = Math.round(fullHeight * (1 - topCrop)); container.style.width = width + 'px'; container.style.height = height + 'px'; renderer.setSize(width, height); camera.aspect = width / fullHeight; camera.setViewOffset(width, fullHeight, 0, Math.round(fullHeight * topCrop), width, height); camera.updateProjectionMatrix(); } } const resizeObserver = new ResizeObserver(() => { const newWidth = container.parentElement ? container.parentElement.clientWidth : window.innerWidth; handleResize(newWidth); }); resizeObserver.observe(container); const onWindowResize = () => { const newWidth = container.parentElement ? container.parentElement.clientWidth : window.innerWidth; handleResize(newWidth); }; window.addEventListener('resize', onWindowResize); invalidation.then(() => { stopAnimation(); visibilityObserver.disconnect(); resizeObserver.disconnect(); window.removeEventListener('resize', onWindowResize); renderer.dispose(); }); let lastWheelTime = 0; renderer.domElement.addEventListener('wheel', (event) => { const now = Date.now(); const timeDelta = now - lastWheelTime; lastWheelTime = now; const isTrackpad = Math.abs(event.deltaY) < 50 && timeDelta < 50; controls.zoomSpeed = isTrackpad ? 1 : 2; // zoom speed for trackpad : mouse wheel }, { passive: false }); const toHex = color => `#${color.toString(16).padStart(6, '0')}`; function createCodonTexture(codon, color, highlightMask = [false, false, false]) { const canvas = document.createElement('canvas'); const boxSize = 70; canvas.width = boxSize * 3; canvas.height = boxSize; const ctx = canvas.getContext('2d'); const allHighlighted = highlightMask[0] && highlightMask[1] && highlightMask[2]; ctx.fillStyle = allHighlighted ? '#000000' : toHex(color); ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.font = '600 52px "Atkinson Hyperlegible Mono", sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; for (let i = 0; i < 3; i++) { if (highlightMask[i] && !allHighlighted) { ctx.fillStyle = '#000000'; ctx.fillRect(i * boxSize, 0, boxSize, boxSize); } const x = boxSize / 2 + i * boxSize; const y = canvas.height / 2 + textOffsetY; ctx.strokeStyle = '#ffffff'; ctx.lineWidth = 2; ctx.strokeText(codon[i], x, y); ctx.fillStyle = '#ffffff'; ctx.fillText(codon[i], x, y); } return new THREE.CanvasTexture(canvas); } function createLabelTexture(text, color, highlighted = false) { const font = '800 52px "Atkinson Hyperlegible Mono", sans-serif'; const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); ctx.font = font; canvas.width = Math.ceil(ctx.measureText(text).width + labelPaddingX * 2); canvas.height = 70; ctx.fillStyle = highlighted ? toHex(color) : '#ffffff'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = highlighted ? labelHighlightTextColor : toHex(color); ctx.font = font; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(text, canvas.width / 2, canvas.height / 2 + textOffsetY); return new THREE.CanvasTexture(canvas); } function createAxisLabelTexture(text, highlightColor = null) { const canvas = document.createElement('canvas'); const boxSize = 70; canvas.width = boxSize * 3; canvas.height = boxSize; const ctx = canvas.getContext('2d'); const highlighted = highlightColor !== null; if (highlighted) { ctx.fillStyle = toHex(highlightColor); ctx.fillRect(0, 0, canvas.width, canvas.height); } ctx.fillStyle = highlighted ? '#ffffff' : '#000000'; ctx.font = '600 52px "Atkinson Hyperlegible Mono", sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(text, canvas.width / 2, canvas.height / 2 + textOffsetY); return new THREE.CanvasTexture(canvas); } const labelPlateWidth = texture => (texture.image.width / texture.image.height) * config.plateHeight; const axisLabelText = (base, position) => ['_', '_', '_'].map((c, i) => (i === position ? base : c)).join(' '); const textureCache = new Map(); const axisSpanTextureCache = new Map(); function axisSpanTexture(mesh, color) { const key = `${mesh.userData.base}-${mesh.userData.position}-${color}`; if (!axisSpanTextureCache.has(key)) { axisSpanTextureCache.set(key, createAxisLabelTexture(axisLabelText(mesh.userData.base, mesh.userData.position), color)); } return axisSpanTextureCache.get(key); } function textureFor(d, mask) { if (!mask.some(Boolean)) return d.originalTexture; const key = `${d.codon}-${mask.join('')}`; if (!textureCache.has(key)) { textureCache.set(key, createCodonTexture(d.codon, d.color, mask)); } return textureCache.get(key); } const codonData = []; const codonMeshes = []; const axisLabelMeshes = []; for (let i = 0; i < 4; i++) { for (let j = 0; j < 4; j++) { for (let k = 0; k < 4; k++) { const codon = config.bases[i] + config.bases[j] + config.bases[k]; const info = config.geneticCode[codon]; const position = new THREE.Vector3( (i - 1.5) * config.spacing, (j - 1.5) * config.spacing, (k - 1.5) * config.spacing ); const texture = createCodonTexture(codon, info.color); const mesh = new THREE.Mesh( new THREE.PlaneGeometry(config.plateWidth, config.plateHeight), new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide, transparent: true }) ); mesh.position.copy(position); mesh.userData.kind = 'codon'; mesh.userData.index = codonData.length; codonData.push({ codon, position, baseIndices: [i, j, k], color: info.color, aa: info.aa, mesh, originalTexture: texture }); codonMeshes.push(mesh); scene.add(mesh); } } } const transparentMeshes = []; const aaConnections = {}; const aaLines = []; for (let i = 0; i < codonData.length; i++) { for (let j = i + 1; j < codonData.length; j++) { const d1 = codonData[i]; const d2 = codonData[j]; if (d1.aa !== d2.aa) continue; const diffSum = Math.abs(d1.baseIndices[0] - d2.baseIndices[0]) + Math.abs(d1.baseIndices[1] - d2.baseIndices[1]) + Math.abs(d1.baseIndices[2] - d2.baseIndices[2]); if (diffSum === 1) { const geometry = new THREE.BufferGeometry().setFromPoints([d1.position, d2.position]); const line = new THREE.Line(geometry, new THREE.LineBasicMaterial({ color: d1.color, linewidth: 1 })); line.userData.aminoAcid = d1.aa; scene.add(line); aaLines.push(line); if (!aaConnections[d1.aa]) aaConnections[d1.aa] = []; aaConnections[d1.aa].push({ start: d1.position, end: d2.position }); } } } function vertexInterp(isolevel, p1, p2, valp1, valp2) { if (Math.abs(isolevel - valp1) < 0.00001) return p1.clone(); if (Math.abs(isolevel - valp2) < 0.00001) return p2.clone(); if (Math.abs(valp1 - valp2) < 0.00001) return p1.clone(); const mu = (isolevel - valp1) / (valp2 - valp1); return new THREE.Vector3( p1.x + mu * (p2.x - p1.x), p1.y + mu * (p2.y - p1.y), p1.z + mu * (p2.z - p1.z) ); } function distanceToLineSegment(point, start, end) { const line = new THREE.Vector3().subVectors(end, start); const len = line.length(); if (len === 0) return point.distanceTo(start); const t = Math.max(0, Math.min(1, new THREE.Vector3().subVectors(point, start).dot(line) / (len * len) )); const projection = new THREE.Vector3().copy(start).add(line.multiplyScalar(t)); return point.distanceTo(projection); } const cubeEdges = [[0, 1], [1, 2], [2, 3], [3, 0], [4, 5], [5, 6], [6, 7], [7, 4], [0, 4], [1, 5], [2, 6], [3, 7]]; function marchingCubes(codonPositions, color, connections, gridSize, threshold) { const bounds = { min: new THREE.Vector3(Infinity, Infinity, Infinity), max: new THREE.Vector3(-Infinity, -Infinity, -Infinity) }; codonPositions.forEach(pos => { bounds.min.min(pos); bounds.max.max(pos); }); bounds.min.subScalar(shellExpansion); bounds.max.addScalar(shellExpansion); const fieldAt = corner => { let minDist = Infinity; codonPositions.forEach(pos => { minDist = Math.min(minDist, corner.distanceTo(pos)); }); connections.forEach(conn => { minDist = Math.min(minDist, distanceToLineSegment(corner, conn.start, conn.end)); }); return minDist; }; const vertices = []; for (let x = bounds.min.x; x < bounds.max.x; x += gridSize) { for (let y = bounds.min.y; y < bounds.max.y; y += gridSize) { for (let z = bounds.min.z; z < bounds.max.z; z += gridSize) { const cubeCorners = [ new THREE.Vector3(x, y, z), new THREE.Vector3(x + gridSize, y, z), new THREE.Vector3(x + gridSize, y, z + gridSize), new THREE.Vector3(x, y, z + gridSize), new THREE.Vector3(x, y + gridSize, z), new THREE.Vector3(x + gridSize, y + gridSize, z), new THREE.Vector3(x + gridSize, y + gridSize, z + gridSize), new THREE.Vector3(x, y + gridSize, z + gridSize) ]; const values = cubeCorners.map(fieldAt); let cubeIndex = 0; for (let i = 0; i < 8; i++) { if (values[i] < threshold) cubeIndex |= (1 << i); } const edgeMask = marchingCubesData.edgeTable[cubeIndex]; if (edgeMask === 0) continue; const vertList = []; cubeEdges.forEach(([a, b], e) => { if (edgeMask & (1 << e)) { vertList[e] = vertexInterp(threshold, cubeCorners[a], cubeCorners[b], values[a], values[b]); } }); const tri = marchingCubesData.triTable[cubeIndex]; for (let i = 0; tri[i] !== undefined; i += 3) { for (let v = 0; v < 3; v++) { const p = vertList[tri[i + v]]; vertices.push(p.x, p.y, p.z); } } } } } if (vertices.length === 0) return null; let positions = []; const indexByKey = new Map(); const merged = []; for (let i = 0; i < vertices.length; i += 3) { const key = `${Math.round(vertices[i] * 1e4)},${Math.round(vertices[i + 1] * 1e4)},${Math.round(vertices[i + 2] * 1e4)}`; let index = indexByKey.get(key); if (index === undefined) { index = positions.length / 3; indexByKey.set(key, index); positions.push(vertices[i], vertices[i + 1], vertices[i + 2]); } merged.push(index); } const triangles = []; for (let i = 0; i < merged.length; i += 3) { const a = merged[i]; const b = merged[i + 1]; const c = merged[i + 2]; if (a !== b && b !== c && a !== c) triangles.push(a, b, c); } const vertexCount = positions.length / 3; const neighbors = Array.from({ length: vertexCount }, () => new Set()); for (let i = 0; i < triangles.length; i += 3) { const a = triangles[i]; const b = triangles[i + 1]; const c = triangles[i + 2]; neighbors[a].add(b).add(c); neighbors[b].add(a).add(c); neighbors[c].add(a).add(b); } for (let pass = 0; pass < shellSmoothIterations; pass++) { const next = positions.slice(); for (let v = 0; v < vertexCount; v++) { const count = neighbors[v].size; if (count === 0) continue; let sx = 0; let sy = 0; let sz = 0; neighbors[v].forEach(n => { sx += positions[n * 3]; sy += positions[n * 3 + 1]; sz += positions[n * 3 + 2]; }); next[v * 3] += shellSmoothStrength * (sx / count - positions[v * 3]); next[v * 3 + 1] += shellSmoothStrength * (sy / count - positions[v * 3 + 1]); next[v * 3 + 2] += shellSmoothStrength * (sz / count - positions[v * 3 + 2]); } positions = next; } const vertexAt = i => new THREE.Vector3(positions[i * 3], positions[i * 3 + 1], positions[i * 3 + 2]); let signedVolume = 0; for (let i = 0; i < triangles.length; i += 3) { signedVolume += vertexAt(triangles[i]).dot(vertexAt(triangles[i + 1]).cross(vertexAt(triangles[i + 2]))); } if (signedVolume < 0) { for (let i = 0; i < triangles.length; i += 3) { const tmp = triangles[i + 1]; triangles[i + 1] = triangles[i + 2]; triangles[i + 2] = tmp; } } const geometry = new THREE.BufferGeometry(); geometry.addAttribute('position', new THREE.BufferAttribute(new Float32Array(positions), 3)); geometry.setIndex(triangles); geometry.computeVertexNormals(); return new THREE.Mesh(geometry, createShellMaterial(color)); } const shellVertexShader = ` varying vec3 vNormal; varying vec3 vViewDir; #include void main() { vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); vNormal = normalize(normalMatrix * normal); vViewDir = normalize(-mvPosition.xyz); gl_Position = projectionMatrix * mvPosition; #include } `; const shellFragmentShader = ` uniform vec3 shellColor; uniform float centerOpacity; uniform float sideOpacity; uniform float sideFalloff; varying vec3 vNormal; varying vec3 vViewDir; #include void main() { float facing = clamp(dot(normalize(vNormal), normalize(vViewDir)), 0.0, 1.0); float alpha = mix(centerOpacity, sideOpacity, pow(1.0 - facing, sideFalloff)); gl_FragColor = vec4(shellColor, alpha); #include } `; function createShellMaterial(color) { return new THREE.ShaderMaterial({ uniforms: THREE.UniformsUtils.merge([ THREE.UniformsLib.fog, { shellColor: { value: new THREE.Color(color) }, centerOpacity: { value: shellOpacity }, sideOpacity: { value: shellOpacity * shellSideOpacityMultiplier }, sideFalloff: { value: shellSideFalloff } } ]), vertexShader: shellVertexShader, fragmentShader: shellFragmentShader, transparent: true, side: THREE.FrontSide, depthWrite: false, fog: true }); } function setShellOpacity(mesh, opacity) { mesh.material.uniforms.centerOpacity.value = opacity; mesh.material.uniforms.sideOpacity.value = opacity * shellSideOpacityMultiplier; } const aminoAcids = {}; codonData.forEach(d => { if (!aminoAcids[d.aa]) { aminoAcids[d.aa] = { positions: [], color: d.color, spans: [new Set(), new Set(), new Set()] }; } aminoAcids[d.aa].positions.push(d.position); for (let p = 0; p < 3; p++) aminoAcids[d.aa].spans[p].add(d.codon[p]); }); Object.keys(aminoAcids).forEach(aa => { const data = aminoAcids[aa]; const mesh = marchingCubes(data.positions, data.color, aaConnections[aa] || [], shellGridSize, shellThickness); if (mesh) { mesh.userData.aminoAcid = aa; mesh.renderOrder = -1; transparentMeshes.push(mesh); scene.add(mesh); } }); const labelMeshes = []; Object.keys(aminoAcids).forEach(aa => { const data = aminoAcids[aa]; const avgPos = new THREE.Vector3(); data.positions.forEach(p => avgPos.add(p)); avgPos.divideScalar(data.positions.length); avgPos.y += config.plateHeight * 1.5; const text = config.aaFullNames[aa] || aa; const normalTexture = createLabelTexture(text, data.color); const normalMaterial = new THREE.MeshBasicMaterial({ map: normalTexture, side: THREE.DoubleSide, transparent: true, blending: THREE.MultiplyBlending, depthWrite: false }); const highlightedMaterial = new THREE.MeshBasicMaterial({ map: createLabelTexture(text, data.color, true), side: THREE.DoubleSide, transparent: true, depthWrite: false }); const mesh = new THREE.Mesh(new THREE.PlaneGeometry(labelPlateWidth(normalTexture), config.plateHeight), normalMaterial); mesh.position.copy(avgPos); mesh.userData = { kind: 'aa', aminoAcid: aa, text, normalMaterial, highlightedMaterial }; labelMeshes.push(mesh); scene.add(mesh); }); const xAxisEdges = [ { y: -18, z: -18, id: 0 }, { y: -18, z: 18, id: 1 }, { y: 18, z: -18, id: 2 }, { y: 18, z: 18, id: 3 } ]; const yAxisEdges = [ { x: -18, z: -18, id: 0 }, { x: -18, z: 18, id: 1 }, { x: 18, z: -18, id: 2 }, { x: 18, z: 18, id: 3 } ]; const zAxisEdges = [ { x: -18, y: -18, id: 0 }, { x: -18, y: 18, id: 1 }, { x: 18, y: -18, id: 2 }, { x: 18, y: 18, id: 3 } ]; function buildAxisGroups(edges, position) { const axisKey = ['x', 'y', 'z'][position]; const fixedKeys = ['x', 'y', 'z'].filter(key => key !== axisKey); return edges.map(edge => { const group = new THREE.Group(); group.userData.edgeId = edge.id; group.userData.opacity = 0; const lineCoords = {}; const labelCoords = {}; fixedKeys.forEach(key => { const sign = edge[key] < 0 ? -1 : 1; lineCoords[key] = edge[key] + sign * axisLineOffset; labelCoords[key] = lineCoords[key] + sign * axisLabelOffset; }); const start = Object.assign(new THREE.Vector3(), lineCoords, { [axisKey]: -18 }); const end = Object.assign(new THREE.Vector3(), lineCoords, { [axisKey]: 18 }); const axisLine = new THREE.Line( new THREE.BufferGeometry().setFromPoints([start, end]), new THREE.LineBasicMaterial({ color: config.axisLineColor, transparent: true, opacity: 0 }) ); group.add(axisLine); for (let b = 0; b < 4; b++) { const base = config.bases[b]; const label = axisLabelText(base, position); const normalTexture = createAxisLabelTexture(label); const highlightedTexture = createAxisLabelTexture(label, 0x000000); const mesh = new THREE.Mesh( new THREE.PlaneGeometry(config.plateWidth, config.plateHeight), new THREE.MeshBasicMaterial({ map: normalTexture, side: THREE.DoubleSide, transparent: true, opacity: 0, depthWrite: false }) ); const labelPos = Object.assign({}, labelCoords, { [axisKey]: (b - 1.5) * config.spacing }); mesh.position.set(labelPos.x, labelPos.y, labelPos.z); mesh.userData = { kind: 'axis', base, position, normalTexture, highlightedTexture }; axisLabelMeshes.push(mesh); group.add(mesh); } scene.add(group); return group; }); } const xAxisGroups = buildAxisGroups(xAxisEdges, 0); const yAxisGroups = buildAxisGroups(yAxisEdges, 1); const zAxisGroups = buildAxisGroups(zAxisEdges, 2); const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(-10, -10); let isDragging = false; let hoveredSelection = null; let lockedSelection = null; let tappedSelection = null; let touchStartPos = null; let touchStartTime = 0; function sameSelection(a, b) { if (a === b) return true; if (!a || !b || a.type !== b.type) return false; if (a.type === 'codon') return a.codon === b.codon; if (a.type === 'axis') return a.base === b.base && a.position === b.position; return a.aa === b.aa; } function pick() { raycaster.setFromCamera(mouse, camera); const targets = codonMeshes.filter(m => m.visible) .concat(axisLabelMeshes.filter(m => m.visible && m.material.opacity > 0.01)) .concat(labelMeshes.filter(m => m.visible)); const hits = raycaster.intersectObjects(targets); if (hits.length === 0) return null; const ud = hits[0].object.userData; if (ud.kind === 'codon') return { type: 'codon', codon: codonData[ud.index] }; if (ud.kind === 'axis') return { type: 'axis', base: ud.base, position: ud.position }; return { type: 'aa', aa: ud.aminoAcid }; } function setPointer(clientX, clientY) { const rect = container.getBoundingClientRect(); mouse.x = ((clientX - rect.left) / width) * 2 - 1; mouse.y = -((clientY - rect.top) / height) * 2 + 1; } container.addEventListener('mousemove', event => setPointer(event.clientX, event.clientY)); container.addEventListener('mouseleave', () => mouse.set(-10, -10)); container.addEventListener('touchstart', event => { if (event.touches.length === 1) { touchStartPos = { x: event.touches[0].clientX, y: event.touches[0].clientY }; touchStartTime = Date.now(); } }, { passive: true }); container.addEventListener('touchend', event => { if (!touchStartPos) return; const touch = event.changedTouches[0]; const dist = Math.hypot(touch.clientX - touchStartPos.x, touch.clientY - touchStartPos.y); const elapsed = Date.now() - touchStartTime; touchStartPos = null; if (dist < tapThreshold && elapsed < tapTime) { setPointer(touch.clientX, touch.clientY); const hit = pick(); tappedSelection = hit && !sameSelection(hit, tappedSelection) ? hit : null; applySelection(tappedSelection); } }, { passive: true }); controls.addEventListener('start', () => { isDragging = true; lockedSelection = hoveredSelection || tappedSelection; }); controls.addEventListener('end', () => { isDragging = false; lockedSelection = null; }); function setMap(mesh, texture) { if (mesh.material.map !== texture) { mesh.material.map = texture; mesh.material.needsUpdate = true; } } function showGroups(isVisible) { aaLines.forEach(line => { line.visible = isVisible(line.userData.aminoAcid); }); transparentMeshes.forEach(mesh => { mesh.visible = isVisible(mesh.userData.aminoAcid); }); labelMeshes.forEach(mesh => { mesh.visible = isVisible(mesh.userData.aminoAcid); }); } function applySelection(sel) { axisLabelMeshes.forEach(mesh => { setMap(mesh, mesh.userData.normalTexture); mesh.renderOrder = 0; }); transparentMeshes.forEach(mesh => { setShellOpacity(mesh, shellOpacity); mesh.renderOrder = -1; }); labelMeshes.forEach(mesh => { mesh.material = mesh.userData.normalMaterial; mesh.renderOrder = 0; }); codonMeshes.forEach(mesh => { mesh.renderOrder = 0; }); if (!sel) { codonData.forEach(d => { setMap(d.mesh, d.originalTexture); d.mesh.visible = true; }); showGroups(() => true); return; } if (sel.type === 'codon') { codonData.forEach(d => { let mask; if (d === sel.codon) { mask = [true, true, true]; } else { mask = d.baseIndices.map((b, p) => b === sel.codon.baseIndices[p]); if (mask.filter(Boolean).length !== 2) mask = [false, false, false]; } setMap(d.mesh, textureFor(d, mask)); d.mesh.visible = true; }); showGroups(() => true); return; } if (sel.type === 'axis') { axisLabelMeshes.forEach(mesh => { if (mesh.userData.base === sel.base && mesh.userData.position === sel.position) { setMap(mesh, mesh.userData.highlightedTexture); } }); const visibleAminoAcids = new Set(); codonData.forEach(d => { const mask = [false, false, false]; const match = d.codon[sel.position] === sel.base; if (match) { mask[sel.position] = true; visibleAminoAcids.add(d.aa); } d.mesh.visible = match; setMap(d.mesh, textureFor(d, mask)); }); showGroups(aa => visibleAminoAcids.has(aa)); return; } if (sel.type === 'aa') { const spans = aminoAcids[sel.aa].spans; axisLabelMeshes.forEach(mesh => { if (spans[mesh.userData.position].has(mesh.userData.base)) { setMap(mesh, axisSpanTexture(mesh, aminoAcids[sel.aa].color)); } mesh.renderOrder = 2; }); codonData.forEach(d => { const inGroup = d.aa === sel.aa; setMap(d.mesh, textureFor(d, [inGroup, inGroup, inGroup])); d.mesh.visible = true; d.mesh.renderOrder = inGroup ? 2 : 0; }); showGroups(() => true); transparentMeshes.forEach(mesh => { const inGroup = mesh.userData.aminoAcid === sel.aa; mesh.visible = inGroup; if (inGroup) { setShellOpacity(mesh, shellHighlightOpacity); mesh.renderOrder = 1; } }); labelMeshes.forEach(mesh => { if (mesh.userData.aminoAcid === sel.aa) mesh.material = mesh.userData.highlightedMaterial; mesh.renderOrder = 2; }); } } function fadeAxisGroups(groups, bestEdge) { groups.forEach(group => { const target = group.userData.edgeId === bestEdge ? 1 : 0; const delta = target - group.userData.opacity; group.userData.opacity = Math.abs(delta) < 0.01 ? target : group.userData.opacity + delta * axisFadeSpeed; group.children.forEach(child => { child.material.opacity = group.userData.opacity; child.visible = group.userData.opacity > 0.001; if (child.type === 'Mesh') child.quaternion.copy(camera.quaternion); }); }); } let animationFrameId = null; function animate() { animationFrameId = requestAnimationFrame(animate); const camDist = camera.position.length(); scene.fog.near = camDist - cubeHalfDiag - fogPadding; scene.fog.far = camDist + cubeHalfDiag + fogPadding; codonData.forEach(d => { d.mesh.quaternion.copy(camera.quaternion); const offset = new THREE.Vector3().subVectors(camera.position, d.position).normalize().multiplyScalar(0.5); d.mesh.position.copy(d.position).add(offset); }); labelMeshes.forEach(mesh => mesh.quaternion.copy(camera.quaternion)); let bestYEdge = null; let lowestYScore = Infinity; yAxisGroups.forEach(group => { const edge = yAxisEdges[group.userData.edgeId]; const score = new THREE.Vector3(edge.x, 0, edge.z).project(camera).x; if (score < lowestYScore) { lowestYScore = score; bestYEdge = group.userData.edgeId; } }); const yEdge = yAxisEdges[bestYEdge]; const topScreen = new THREE.Vector3(yEdge.x, 18, yEdge.z).project(camera); const bottomScreen = new THREE.Vector3(yEdge.x, -18, yEdge.z).project(camera); const yBottom = bottomScreen.y < topScreen.y ? -18 : 18; const xEdgeZNegScreen = new THREE.Vector3(0, yBottom, -18).project(camera); const xEdgeZPosScreen = new THREE.Vector3(0, yBottom, 18).project(camera); const bestXZ = xEdgeZNegScreen.y > xEdgeZPosScreen.y ? 18 : -18; const zEdgeXNegScreen = new THREE.Vector3(-18, yBottom, 0).project(camera); const zEdgeXPosScreen = new THREE.Vector3(18, yBottom, 0).project(camera); const bestZX = zEdgeXNegScreen.y > zEdgeXPosScreen.y ? 18 : -18; let bestXEdge = xAxisEdges.findIndex(edge => edge.y === yBottom && edge.z === bestXZ); let bestZEdge = zAxisEdges.findIndex(edge => edge.x === bestZX && edge.y === yBottom); if (bestXEdge === -1) bestXEdge = 0; if (bestZEdge === -1) bestZEdge = 0; fadeAxisGroups(xAxisGroups, bestXEdge); fadeAxisGroups(yAxisGroups, bestYEdge); fadeAxisGroups(zAxisGroups, bestZEdge); if (tappedSelection) { applySelection(tappedSelection); } else if (isDragging) { applySelection(lockedSelection); } else { const next = pick(); if (!sameSelection(next, hoveredSelection)) { hoveredSelection = next; applySelection(hoveredSelection); } } controls.update(); renderer.render(scene, camera); } function startAnimation() { if (animationFrameId === null) animate(); } function stopAnimation() { if (animationFrameId !== null) { cancelAnimationFrame(animationFrameId); animationFrameId = null; } } const visibilityObserver = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting) startAnimation(); else stopAnimation(); }); }, { rootMargin: visibilityMargin }); visibilityObserver.observe(container); document.fonts.ready.then(() => { textureCache.clear(); axisSpanTextureCache.clear(); codonData.forEach(d => { d.originalTexture = createCodonTexture(d.codon, d.color); }); labelMeshes.forEach(mesh => { const { text, aminoAcid, normalMaterial, highlightedMaterial } = mesh.userData; const color = aminoAcids[aminoAcid].color; normalMaterial.map = createLabelTexture(text, color); normalMaterial.needsUpdate = true; highlightedMaterial.map = createLabelTexture(text, color, true); highlightedMaterial.needsUpdate = true; mesh.geometry.dispose(); mesh.geometry = new THREE.PlaneGeometry(labelPlateWidth(normalMaterial.map), config.plateHeight); }); axisLabelMeshes.forEach(mesh => { const label = axisLabelText(mesh.userData.base, mesh.userData.position); mesh.userData.normalTexture = createAxisLabelTexture(label); mesh.userData.highlightedTexture = createAxisLabelTexture(label, 0x000000); }); applySelection(tappedSelection || (isDragging ? lockedSelection : hoveredSelection)); }); return container; }4a:T4784,// Observable Notebooks 2.0 cell: the outer { } keeps these variables local. // Uses the notebook's `config` (geneticCode colours) and `fonts` cells, like the 3D chart. { fonts; const el = html`

	U		C		A		G
U	UUU	Phe	UCU	Ser	UAU	Tyr	UGU	Cys	U
	UUC	Phe	UCC		UAC	Tyr	UGC	Cys	C
	UUA	Leu	UCA		UAA	Stop	UGA	Stop	A
	UUG	Leu	UCG		UAG	Stop	UGG	Trp	G
C	CUU	Leu	CCU	Pro	CAU	His	CGU	Arg	U
	CUC		CCC		CAC	His	CGC		C
	CUA		CCA		CAA	Gln	CGA		A
	CUG		CCG		CAG	Gln	CGG		G
A	AUU	Ile	ACU	Thr	AAU	Asn	AGU	Ser	U
	AUC		ACC		AAC	Asn	AGC	Ser	C
	AUA		ACA		AAA	Lys	AGA	Arg	A
	AUG	Met	ACG		AAG	Lys	AGG	Arg	G
G	GUU	Val	GCU	Ala	GAU	Asp	GGU	Gly	U
	GUC		GCC		GAC	Asp	GGC		C
	GUA		GCA		GAA	Glu	GGA		A
	GUG		GCG		GAG	Glu	GGG		G

`; const toHex = (color) => `#${color.toString(16).padStart(6, "0")}`; const rowHighlightMix = 0.2; // share of the group colour in the row highlight (rest is white) // Mix a colour with white: amount 0 = white, 1 = the colour itself const tint = (color, amount) => { const mix = (shift) => Math.round(255 + (((color >> shift) & 255) - 255) * amount); return `rgb(${mix(16)}, ${mix(8)}, ${mix(0)})`; }; const code = config.geneticCode; // same colours and amino acids as the 3D chart // Each amino acid's colour, and the bases it uses at each codon position // (used to highlight the axis labels when an amino acid is hovered) const aaInfo = {}; for (const [codon, { aa, color }] of Object.entries(code)) { aaInfo[aa] ??= { color: toHex(color), rowTint: tint(color, rowHighlightMix), spans: [new Set(), new Set(), new Set()] }; for (let p = 0; p < 3; p++) aaInfo[aa].spans[p].add(codon[p]); } const boxes = (letters) => letters.map((l) => `${l}`).join(""); // Codon plates: three letter boxes on the amino acid's colour const plates = [...el.querySelectorAll("td.codon")].map((td) => { const codon = td.textContent.trim(); const { aa } = code[codon]; td.dataset.codon = codon; // the whole cell is the hover target td.innerHTML = `${boxes([...codon])}`; const plate = td.firstElementChild; plate.style.background = aaInfo[aa].color; return { codon, aa, td, plate, boxes: [...plate.children] }; }); // Amino acid labels (the brace span in each cell is kept) const labels = [...el.querySelectorAll("td.aa")].map((td) => { const aa = td.textContent.trim(); [...td.childNodes].forEach((n) => { if (n.nodeType === Node.TEXT_NODE) n.remove(); }); const label = document.createElement("span"); label.className = "aa-label"; label.textContent = aa; label.style.setProperty("--aa", aaInfo[aa].color); td.append(label); td.dataset.aa = aa; // the whole cell (bracket + name) is the hover target // The codons this label's bracket covers: the codon just left of it, and the // ones below it for as many rows as the cell spans const first = td.previousElementSibling.textContent.trim(); const start = "UCAG".indexOf(first[2]); const codons = Array.from({ length: td.rowSpan }, (_, k) => first.slice(0, 2) + "UCAG"[start + k]); return { aa, td, label, codons }; }); // Axis labels in the 3D chart's style: "U__", "_U_", "__U" const axisCells = [ ...[...el.querySelectorAll(".first")].map((cell) => [cell, 0]), ...[...el.querySelectorAll(".head")].map((cell) => [cell, 1]), ...[...el.querySelectorAll(".third")].map((cell) => [cell, 2]) ]; const axes = axisCells.map(([cell, position]) => { const base = cell.textContent.trim(); const letters = ["_", "_", "_"]; letters[position] = base; cell.dataset.base = base; // the whole cell is the hover target cell.dataset.position = position; cell.innerHTML = `${letters.join("")}`; return { base, position, plate: cell.firstElementChild }; }); // ---- Mouse-over logic, matching the 3D chart ---- // codon: that codon turns black; codons one mutation away get their two // shared letters in black // axis label: label turns black; only codons with that base at that position // stay visible, with that letter in black; brackets with none of // those codons hide // amino acid: label fills with its colour; its codons turn black and its // codon and label cells get a light tint of its colour; the axis // labels it spans fill with its colour const applySelection = (sel) => { plates.forEach((p) => { p.plate.classList.remove("hidden"); p.boxes.forEach((b) => b.classList.remove("on")); p.td.style.removeProperty("background-color"); }); labels.forEach((l) => { l.td.classList.remove("hidden"); l.label.classList.remove("hl"); l.td.style.removeProperty("background-color"); }); axes.forEach((a) => { a.plate.classList.remove("hl"); a.plate.style.removeProperty("--hl"); }); if (!sel) return; if (sel.type === "codon") { plates.forEach((p) => { let mask = [...p.codon].map((b, i) => b === sel.codon[i]); if (p.codon !== sel.codon && mask.filter(Boolean).length !== 2) mask = [false, false, false]; mask.forEach((on, i) => p.boxes[i].classList.toggle("on", on)); }); } else if (sel.type === "axis") { axes.forEach((a) => { if (a.base === sel.base && a.position === sel.position) a.plate.classList.add("hl"); }); plates.forEach((p) => { const match = p.codon[sel.position] === sel.base; p.plate.classList.toggle("hidden", !match); if (match) p.boxes[sel.position].classList.add("on"); }); labels.forEach((l) => { const anyVisible = l.codons.some((c) => c[sel.position] === sel.base); l.td.classList.toggle("hidden", !anyVisible); }); } else if (sel.type === "aa") { const info = aaInfo[sel.aa]; labels.forEach((l) => { if (l.aa !== sel.aa) return; l.label.classList.add("hl"); l.td.style.backgroundColor = info.rowTint; }); plates.forEach((p) => { if (p.aa !== sel.aa) return; p.boxes.forEach((b) => b.classList.add("on")); p.td.style.backgroundColor = info.rowTint; }); axes.forEach((a) => { if (info.spans[a.position].has(a.base)) { a.plate.classList.add("hl"); a.plate.style.setProperty("--hl", info.color); } }); } }; const selectionFrom = (target) => { const t = target.closest?.("[data-codon], [data-aa], [data-base]"); if (!t || !el.contains(t)) return null; if (t.dataset.codon) return { type: "codon", codon: t.dataset.codon }; if (t.dataset.aa) return { type: "aa", aa: t.dataset.aa }; return { type: "axis", base: t.dataset.base, position: +t.dataset.position }; }; const sameSelection = (a, b) => a === b || (!!a && !!b && a.type === b.type && a.codon === b.codon && a.aa === b.aa && a.base === b.base && a.position === b.position); // Mouse: hover. Touch: tap to select, tap again (or tap elsewhere) to clear. let hovered = null; let tapped = null; let lastPointerType = "mouse"; el.addEventListener("pointerdown", (e) => { lastPointerType = e.pointerType; }); el.addEventListener("pointerover", (e) => { if (e.pointerType === "touch" || tapped) return; const sel = selectionFrom(e.target); if (!sameSelection(sel, hovered)) { hovered = sel; applySelection(sel); } }); el.addEventListener("pointerleave", (e) => { if (e.pointerType === "touch" || tapped) return; hovered = null; applySelection(null); }); el.addEventListener("click", (e) => { if (lastPointerType !== "touch") return; const sel = selectionFrom(e.target); tapped = sel && !sameSelection(sel, tapped) ? sel : null; applySelection(tapped); }); // ---- Curly braces ---- // Each "}" is a single SVG path at the exact pixel height of its cell. // The line sits on x = 6.5 so a 1px stroke lands on one pixel column (stays crisp). const drawBrace = (brace, h) => { if (h < 20) return; const m = h / 2; brace.innerHTML = ``; }; // ---- Grid shadow ---- // Size the shadow box to the outer edges of the codon and amino acid cells const shadow = el.querySelector(".grid-shadow"); const gridCells = el.querySelectorAll("td.codon, td.aa"); const placeShadow = () => { const box = el.getBoundingClientRect(); if (box.width === 0) return; let top = Infinity, left = Infinity, right = -Infinity, bottom = -Infinity; for (const td of gridCells) { const r = td.getBoundingClientRect(); top = Math.min(top, r.top); left = Math.min(left, r.left); right = Math.max(right, r.right); bottom = Math.max(bottom, r.bottom); } Object.assign(shadow.style, { top: `${top - box.top}px`, left: `${left - box.left}px`, width: `${right - left}px`, height: `${bottom - top}px` }); }; // Redraw braces and reposition the shadow whenever sizes change // (first render, font load, window resize, zoom) const ro = new ResizeObserver((entries) => { for (const entry of entries) { if (entry.target.classList.contains("brace")) { drawBrace(entry.target, entry.contentRect.height); } } placeShadow(); }); el.querySelectorAll(".brace").forEach((b) => ro.observe(b)); ro.observe(el.querySelector("table")); invalidation.then(() => ro.disconnect()); display(el); }4b:T444e,{ const uid = "dna-" + Math.random().toString(36).slice(2, 8); // 2D geometry from RDKit depictions of 9-R-adenine, 9-R-guanine, 1-R-cytosine, 1-R-thymine // (R = deoxyribose attachment), all hydrogens explicit, Kekulé bonds, px units. // Each base is rotated so its Watson–Crick edge faces its partner across the diagonal. const MOLS = {"A":{"atoms":[{"el":"R","x":-43.0,"y":-29.4},{"el":"N","x":-22.7,"y":-24.1},{"el":"C","x":-6.5,"y":-37.5},{"el":"N","x":11.2,"y":-26.2},{"el":"C","x":6.0,"y":-5.9},{"el":"C","x":17.5,"y":11.6},{"el":"N","x":38.5,"y":10.3},{"el":"N","x":8.2,"y":30.4},{"el":"C","x":-12.8,"y":31.7},{"el":"N","x":-24.4,"y":14.2},{"el":"C","x":-15.0,"y":-4.6},{"el":"H","x":-7.8,"y":-58.5},{"el":"H","x":47.9,"y":-8.5},{"el":"H","x":50.1,"y":27.9},{"el":"H","x":-22.2,"y":50.5}],"bonds":[{"a":0,"b":1,"o":1},{"a":1,"b":2,"o":1},{"a":2,"b":3,"o":2},{"a":3,"b":4,"o":1},{"a":4,"b":5,"o":2},{"a":5,"b":6,"o":1},{"a":5,"b":7,"o":1},{"a":7,"b":8,"o":2},{"a":8,"b":9,"o":1},{"a":9,"b":10,"o":2},{"a":10,"b":1,"o":1},{"a":10,"b":4,"o":1},{"a":2,"b":11,"o":1},{"a":6,"b":12,"o":1},{"a":6,"b":13,"o":1},{"a":8,"b":14,"o":1}],"don":[{"n":6,"h":13}],"acc":[7],"rings":[[1,2,3,4,10],[5,7,8,9,10,4]]},"G":{"atoms":[{"el":"R","x":18.4,"y":-50.0},{"el":"N","x":20.2,"y":-29.1},{"el":"C","x":38.2,"y":-18.3},{"el":"N","x":33.4,"y":2.2},{"el":"C","x":12.5,"y":4.0},{"el":"C","x":4.3,"y":-15.3},{"el":"N","x":-16.5,"y":-17.9},{"el":"C","x":-29.2,"y":-1.1},{"el":"N","x":-50.0,"y":-3.7},{"el":"N","x":-21.0,"y":18.2},{"el":"C","x":-0.1,"y":20.8},{"el":"O","x":8.1,"y":40.1},{"el":"H","x":57.5,"y":-26.5},{"el":"H","x":-58.2,"y":-23.0},{"el":"H","x":-62.6,"y":13.1},{"el":"H","x":-33.6,"y":35.0}],"bonds":[{"a":0,"b":1,"o":1},{"a":1,"b":2,"o":1},{"a":2,"b":3,"o":2},{"a":3,"b":4,"o":1},{"a":4,"b":5,"o":2},{"a":5,"b":6,"o":1},{"a":6,"b":7,"o":2},{"a":7,"b":8,"o":1},{"a":7,"b":9,"o":1},{"a":9,"b":10,"o":1},{"a":10,"b":11,"o":2},{"a":5,"b":1,"o":1},{"a":10,"b":4,"o":1},{"a":2,"b":12,"o":1},{"a":8,"b":13,"o":1},{"a":8,"b":14,"o":1},{"a":9,"b":15,"o":1}],"don":[{"n":9,"h":15},{"n":8,"h":14}],"acc":[11],"rings":[[1,2,3,4,5],[6,7,9,10,4,5]]},"C":{"atoms":[{"el":"R","x":-44.3,"y":-7.2},{"el":"N","x":-24.0,"y":-1.7},{"el":"C","x":-18.6,"y":18.6},{"el":"C","x":1.7,"y":24.0},{"el":"C","x":16.6,"y":9.1},{"el":"N","x":36.9,"y":14.6},{"el":"N","x":11.1,"y":-11.1},{"el":"C","x":-9.1,"y":-16.6},{"el":"O","x":-14.6,"y":-36.9},{"el":"H","x":-33.4,"y":33.4},{"el":"H","x":7.2,"y":44.3},{"el":"H","x":51.7,"y":-0.3},{"el":"H","x":42.3,"y":34.9}],"bonds":[{"a":0,"b":1,"o":1},{"a":1,"b":2,"o":1},{"a":2,"b":3,"o":2},{"a":3,"b":4,"o":1},{"a":4,"b":5,"o":1},{"a":4,"b":6,"o":2},{"a":6,"b":7,"o":1},{"a":7,"b":8,"o":2},{"a":7,"b":1,"o":1},{"a":2,"b":9,"o":1},{"a":3,"b":10,"o":1},{"a":5,"b":11,"o":1},{"a":5,"b":12,"o":1}],"don":[{"n":5,"h":11}],"acc":[6,8],"rings":[[1,7,6,4,3,2]]},"T":{"atoms":[{"el":"R","x":8.8,"y":45.8},{"el":"N","x":4.8,"y":25.2},{"el":"C","x":20.7,"y":11.5},{"el":"C","x":16.8,"y":-9.2},{"el":"C","x":32.6,"y":-22.9},{"el":"C","x":-3.1,"y":-16.0},{"el":"O","x":-7.0,"y":-36.7},{"el":"N","x":-19.0,"y":-2.3},{"el":"C","x":-15.0,"y":18.3},{"el":"O","x":-30.9,"y":32.1},{"el":"H","x":40.6,"y":18.3},{"el":"H","x":46.4,"y":-7.0},{"el":"H","x":53.3,"y":-26.9},{"el":"H","x":28.7,"y":-43.5},{"el":"H","x":-38.8,"y":-9.2}],"bonds":[{"a":0,"b":1,"o":1},{"a":1,"b":2,"o":1},{"a":2,"b":3,"o":2},{"a":3,"b":4,"o":1},{"a":3,"b":5,"o":1},{"a":5,"b":6,"o":2},{"a":5,"b":7,"o":1},{"a":7,"b":8,"o":1},{"a":8,"b":9,"o":2},{"a":8,"b":1,"o":1},{"a":2,"b":10,"o":1},{"a":4,"b":11,"o":1},{"a":4,"b":12,"o":1},{"a":4,"b":13,"o":1},{"a":7,"b":14,"o":1}],"don":[{"n":7,"h":14}],"acc":[6],"rings":[[1,8,7,5,3,2]]}}; // Tint → shade per base: H (tint), C (base hue), N (shade), O (deep shade) const PAL = { A: { H: "#fbcb8a", C: "#f08c1a", N: "#a85800", O: "#6e3a00", name: "orange" }, G: { H: "#d2bbf0", C: "#9061d4", N: "#5a2e97", O: "#371a63", name: "purple" }, C: { H: "#9fe3ee", C: "#14b1ca", N: "#0a7183", O: "#064650", name: "cyan" }, T: { H: "#b2e2b8", C: "#41ac52", N: "#22702d", O: "#12461a", name: "green" } }; const HS = 104, RX = 22, GAP = 8; // bubble half-side, corner radius, outside gap const MS = 1.12; // molecule scale (stick widths unchanged) const X0 = 250, X1 = 650, Y0 = 250, Y1 = 650; const pos = { A: [X0, Y0], G: [X1, Y0], C: [X0, Y1], T: [X1, Y1] }; Object.values(MOLS).forEach(m => m.atoms.forEach(a => { a.x *= MS; a.y *= MS; })); const s2 = Math.SQRT1_2; const face = { A: [s2, s2], T: [-s2, -s2], G: [-s2, s2], C: [s2, -s2] }; // Human germline rates ×10⁻⁹ per site (of the starting base) per generation. // Lynch (2010) PNAS 107:961–968 Table 1 spectrum × 12.85×10⁻⁹, normalised by ~59% A+T / 41% G+C. const edges = [ { s: "A", t: "G", r: 4.8, type: "ts" }, { s: "G", t: "A", r: 12.8, type: "ts" }, { s: "T", t: "C", r: 4.8, type: "ts" }, { s: "C", t: "T", r: 12.8, type: "ts" }, { s: "A", t: "C", r: 1.7, type: "tv" }, { s: "C", t: "A", r: 3.4, type: "tv" }, { s: "T", t: "G", r: 1.7, type: "tv" }, { s: "G", t: "T", r: 3.4, type: "tv" }, { s: "A", t: "T", r: 1.5, type: "tv" }, { s: "T", t: "A", r: 1.5, type: "tv" }, { s: "G", t: "C", r: 3.9, type: "tv" }, { s: "C", t: "G", r: 3.9, type: "tv" } ]; const svg = d3.create("svg") .attr("class", uid) .style("width", "100%").style("max-width", "820px").style("height", "auto") .style("font-family", 'Georgia, "Times New Roman", serif') .attr("viewBox", "-45 90 950 800") .attr("role", "img") .attr("aria-label", "State diagram of human germline mutation rates between adenine, guanine, cytosine and thymine, each drawn as a stick model"); // Colours follow the notebook's light/dark theme via light-dark() svg.append("style").text(` .${uid} { color-scheme: inherit; --fg: currentColor; --muted: #8a8f98; --node: light-dark(#f5f5f7, #24272c); --outline: light-dark(rgba(20, 22, 26, 0.55), rgba(0, 0, 0, 0.75)); --ts: light-dark(#b8322a, #ee7d72); --tv: light-dark(#2b62b0, #73a6f0); --ts-fill: light-dark(#f6cdc8, #6e3934); --tv-fill: light-dark(#cddcf3, #304866); --ts-label: light-dark(#8a1f18, #ffd0ca); --tv-label: light-dark(#173f78, #d3e3fb); --mark-A: light-dark(#a85800, #f7a74a); --mark-G: light-dark(#5a2e97, #b58ef0); --mark-C: light-dark(#0a7183, #4fd0e4); --mark-T: light-dark(#22702d, #6fd27e); }`); const defs = svg.append("defs"); function marker(id, fill, size, refX, path) { defs.append("marker").attr("id", id) .attr("viewBox", "0 -5 10 10").attr("refX", refX).attr("refY", 0) .attr("markerUnits", "userSpaceOnUse") .attr("markerWidth", size).attr("markerHeight", size) .attr("orient", "auto") .append("path").attr("d", path || "M0,-5L10,0L0,5Z").style("fill", fill); } Object.keys(PAL).forEach(b => marker(`${uid}-hb-${b}`, `var(--mark-${b})`, 10, 5)); // ---------- Curly braces: quarter-circle bends joined by straight runs ---------- // Centred at (cx,cy), half-length h, tip pointing along unit (dx,dy), bend radius r function brace(cx, cy, h, dx, dy, r = 7) { const nx = dx, ny = dy, ux = -dy, uy = dx; // n = outward, u = along the brace const P = (a, b) => [cx + ux * a + nx * b, cy + uy * a + ny * b]; const arc = (from, to, ctr) => { const cr = (from[0] - ctr[0]) * (to[1] - ctr[1]) - (from[1] - ctr[1]) * (to[0] - ctr[0]); return `A${r},${r} 0 0 ${cr > 0 ? 1 : 0} ${to[0]},${to[1]}`; }; const e1 = P(-h, 0), a1 = P(-h + r, r), b1 = P(-r, r), tip = P(0, 2 * r); const b2 = P(r, r), a2 = P(h - r, r), e2 = P(h, 0); return `M${e1}` + arc(e1, a1, P(-h + r, 0)) + `L${b1}` + arc(b1, tip, P(-r, 2 * r)) + arc(tip, b2, P(r, 2 * r)) + `L${a2}` + arc(a2, e2, P(h - r, 0)); } const catG = svg.append("g"); function category(cx, cy, h, dx, dy, label, anchor, gap = 16) { catG.append("path").attr("d", brace(cx, cy, h, dx, dy)) .style("fill", "none").style("stroke", "var(--fg)").style("stroke-width", 1.5) .style("stroke-linecap", "round").style("stroke-linejoin", "round"); catG.append("text") .attr("x", cx + dx * (14 + gap)).attr("y", cy + dy * (14 + gap)) .attr("text-anchor", anchor).attr("dominant-baseline", "central") .style("font-size", "17px").style("fill", "var(--fg)").text(label); } const BG = HS + 16, BH = HS, DG = HS * Math.SQRT2 + 48, DH = HS; category(X0, Y0 - BG, BH, 0, -1, "Amino (M)", "middle", 12); category(X1, Y0 - BG, BH, 0, -1, "Keto (K)", "middle", 12); category(X0 - BG, Y0, BH, -1, 0, "Purines (R)", "end"); category(X0 - BG, Y1, BH, -1, 0, "Pyrimidines (Y)", "end"); category(X1 + s2 * DG, Y1 + s2 * DG, DH, s2, s2, "Weak (W)", "start", 12); category(X0 - s2 * DG, Y1 + s2 * DG, DH, -s2, s2, "Strong (S)", "end", 12); // ---------- Curved mutation edges: filled arrow shapes ---------- const width = r => 5 + r * 1.25; const edgeG = svg.append("g"), labelG = svg.append("g"); const TH = 0.36, BOW = 62; // Outline of a thick arrow along a quadratic curve s→c→e; tip lands exactly on e function arrowShape(s, c, e, w) { const N = 90, pts = []; for (let i = 0; i <= N; i++) { const t = i / N, a = (1 - t) ** 2, b = 2 * t * (1 - t), d = t * t; pts.push([a * s[0] + b * c[0] + d * e[0], a * s[1] + b * c[1] + d * e[1]]); } const cum = [0]; for (let i = 1; i <= N; i++) cum.push(cum[i - 1] + Math.hypot(pts[i][0] - pts[i - 1][0], pts[i][1] - pts[i - 1][1])); const total = cum[N], headL = w * 0.85 + 12, headW = w / 2 + 8; let k = 0; while (k < N && total - cum[k + 1] > headL) k++; const shaft = pts.slice(0, k + 1); const norm = i => { const a = shaft[Math.max(0, i - 1)], b = shaft[Math.min(shaft.length - 1, i + 1)]; const L = Math.hypot(b[0] - a[0], b[1] - a[1]); return [-(b[1] - a[1]) / L, (b[0] - a[0]) / L]; }; const left = [], right = []; shaft.forEach((q, i) => { const n = norm(i); left.push([q[0] + n[0] * w / 2, q[1] + n[1] * w / 2]); right.push([q[0] - n[0] * w / 2, q[1] - n[1] * w / 2]); }); const B = shaft[shaft.length - 1], nb = norm(shaft.length - 1); const hl = [B[0] + nb[0] * headW, B[1] + nb[1] * headW], hr = [B[0] - nb[0] * headW, B[1] - nb[1] * headW]; const ring = [...left, hl, e, hr, ...right.reverse()]; return "M" + ring.map(q => q[0].toFixed(2) + "," + q[1].toFixed(2)).join("L") + "Z"; } const boxPt = (ox, oy, vx, vy, h) => { const k = h / Math.max(Math.abs(vx), Math.abs(vy)); return [ox + vx * k, oy + vy * k]; }; // Diagonals first so the straight arrows sit on top const isDiag = e => pos[e.s][0] !== pos[e.t][0] && pos[e.s][1] !== pos[e.t][1]; [...edges].sort((a, b) => isDiag(b) - isDiag(a)).forEach(e => { const [x1, y1] = pos[e.s], [x2, y2] = pos[e.t]; const dx = x2 - x1, dy = y2 - y1, len = Math.hypot(dx, dy); const ux = dx / len, uy = dy / len, px = -uy, py = ux; const th = isDiag(e) ? 0.12 : TH, bow = isDiag(e) ? 50 : BOW; const c = Math.cos(th), sn = Math.sin(th); const st = boxPt(x1, y1, c * ux + sn * px, c * uy + sn * py, HS + GAP); const en = boxPt(x2, y2, -c * ux + sn * px, -c * uy + sn * py, HS + GAP); const ct = [(x1 + x2) / 2 + px * bow, (y1 + y2) / 2 + py * bow]; const w = width(e.r); edgeG.append("path") .attr("d", arrowShape(st, ct, en, w)) .style("fill", `var(--${e.type}-fill)`) .style("stroke", `var(--${e.type})`).style("stroke-width", 0.5) .style("stroke-linejoin", "round"); const diag = isDiag(e); const t = 0.5; const bx = (1 - t) ** 2 * st[0] + 2 * t * (1 - t) * ct[0] + t * t * en[0]; const by = (1 - t) ** 2 * st[1] + 2 * t * (1 - t) * ct[1] + t * t * en[1]; const off = 0; labelG.append("text") .attr("x", bx + px * off).attr("y", by + py * off) .attr("text-anchor", "middle").attr("dominant-baseline", "central") .style("font-family", '"Helvetica Neue", Helvetica, Arial, system-ui, sans-serif') .style("font-variant-numeric", "lining-nums tabular-nums") .style("font-size", "14px").style("font-weight", 600).style("fill", `var(--${e.type}-label)`) .style("stroke", `var(--${e.type}-fill)`).style("stroke-width", 5).style("stroke-linejoin", "round") .style("paint-order", "stroke") .text(e.r.toFixed(1)); }); // ---------- Stick models ---------- function drawBase(key) { const m = MOLS[key], p = PAL[key], [ox, oy] = pos[key], [fx, fy] = face[key]; const g = svg.append("g").attr("transform", `translate(${ox},${oy})`); const at = m.atoms; const col = i => p[at[i].el] || p.C; g.append("rect").attr("x", -HS).attr("y", -HS).attr("width", 2 * HS).attr("height", 2 * HS) .attr("rx", RX).style("fill", "var(--node)"); // Watson–Crick edge: highlight band + hydrogen-bond stubs const sites = [ ...m.acc.map(i => ({ i, kind: "acc" })), ...m.don.map(d => ({ i: d.h, kind: "don" })) ]; const qx = -fy, qy = fx; sites.sort((a, b) => (at[a.i].x * qx + at[a.i].y * qy) - (at[b.i].x * qx + at[b.i].y * qy)); g.append("path") .attr("d", d3.line()(sites.map(sv => [at[sv.i].x, at[sv.i].y]))) .style("fill", "none").style("stroke", p.C).style("stroke-opacity", 0.3) .style("stroke-width", 26).style("stroke-linecap", "round").style("stroke-linejoin", "round"); sites.forEach(sv => { const a = at[sv.i]; const inner = [a.x + fx * 8, a.y + fy * 8], outer = [a.x + fx * 26, a.y + fy * 26]; const [from, to] = sv.kind === "don" ? [inner, outer] : [outer, inner]; g.append("line") .attr("x1", from[0]).attr("y1", from[1]).attr("x2", to[0]).attr("y2", to[1]) .style("stroke", `var(--mark-${key})`).style("stroke-width", 2.6) .attr("marker-end", `url(#${uid}-hb-${key})`); }); // Bonds, each half coloured by its atom const ringOf = (a, b) => m.rings.filter(r => r.includes(a) && r.includes(b)).sort((r1, r2) => r1.length - r2.length)[0]; const segs = []; m.bonds.forEach(bd => { const A = at[bd.a], B = at[bd.b]; if (A.el === "R" || B.el === "R") return; const mx = (A.x + B.x) / 2, my = (A.y + B.y) / 2; const dx = B.x - A.x, dy = B.y - A.y, L = Math.hypot(dx, dy), nx = -dy / L, ny = dx / L; if (bd.o === 2) { const ring = ringOf(bd.a, bd.b); if (ring) { segs.push([A.x, A.y, mx, my, col(bd.a), 4.4], [mx, my, B.x, B.y, col(bd.b), 4.4]); const rx = d3.mean(ring, i => at[i].x), ry = d3.mean(ring, i => at[i].y); const sgn = Math.sign(nx * (rx - mx) + ny * (ry - my)) || 1, o = 6.5 * sgn, k = 0.18; const ax = A.x + dx * k + nx * o, ay = A.y + dy * k + ny * o; const bx = B.x - dx * k + nx * o, by = B.y - dy * k + ny * o; segs.push([ax, ay, mx + nx * o, my + ny * o, col(bd.a), 2.6], [mx + nx * o, my + ny * o, bx, by, col(bd.b), 2.6]); } else { [-1, 1].forEach(sg => { const o = 3.2 * sg; segs.push([A.x + nx * o, A.y + ny * o, mx + nx * o, my + ny * o, col(bd.a), 3], [mx + nx * o, my + ny * o, B.x + nx * o, B.y + ny * o, col(bd.b), 3]); }); } } else { segs.push([A.x, A.y, mx, my, col(bd.a), 4.4], [mx, my, B.x, B.y, col(bd.b), 4.4]); } }); const bondG = g.append("g").style("stroke-linecap", "round"); segs.forEach(sg => bondG.append("line") .attr("x1", sg[0]).attr("y1", sg[1]).attr("x2", sg[2]).attr("y2", sg[3]) .style("stroke", "var(--outline)").style("stroke-width", sg[5] + 2.2)); segs.forEach(sg => bondG.append("line") .attr("x1", sg[0]).attr("y1", sg[1]).attr("x2", sg[2]).attr("y2", sg[3]) .style("stroke", sg[4]).style("stroke-width", sg[5])); // Glycosidic bond to the sugar (R) m.bonds.forEach(bd => { const ri = at[bd.a].el === "R" ? bd.a : at[bd.b].el === "R" ? bd.b : -1; if (ri < 0) return; const n = at[ri === bd.a ? bd.b : bd.a], r = at[ri]; const dx = r.x - n.x, dy = r.y - n.y, L = Math.hypot(dx, dy); g.append("line").attr("x1", n.x).attr("y1", n.y) .attr("x2", r.x - dx / L * 6).attr("y2", r.y - dy / L * 6) .style("stroke", "var(--muted)").style("stroke-width", 2).style("stroke-dasharray", "2 3"); g.append("text").attr("x", r.x + dx / L * 4).attr("y", r.y + dy / L * 4) .attr("text-anchor", "middle").attr("dominant-baseline", "central") .style("font-size", "13px").style("font-style", "italic").style("fill", "var(--muted)").text("R"); }); // Base letter, set opposite its Watson–Crick face g.append("text") .attr("x", -Math.sign(fx) * (HS - 24)).attr("y", -Math.sign(fy) * (HS - 24) + 2) .attr("text-anchor", "middle").attr("dominant-baseline", "central") .style("font-size", "30px").style("font-weight", "bold").style("fill", `var(--mark-${key})`) .style("stroke", "var(--node)").style("stroke-width", 6).style("paint-order", "stroke") .text(key); } Object.keys(pos).forEach(drawBase); const KY = Y1 + HS + 118; svg.append("text") .attr("x", 450).attr("y", KY).attr("text-anchor", "middle") .style("font-size", "13px").style("fill", "var(--muted)") .text("Rates ×10⁻⁹ per site per generation, human germline (Lynch 2010, PNAS)"); display(svg.node()); }4c:T5c2,fonts = { const family = "Atkinson Hyperlegible Mono"; const href = "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&display=swap"; // Inject preconnects + stylesheet once (guard against duplicates on re-run) if (!document.head.querySelector(`link[href="${href}"]`)) { const preconnect1 = Object.assign(document.createElement("link"), { rel: "preconnect", href: "https://fonts.googleapis.com" }); const preconnect2 = Object.assign(document.createElement("link"), { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" }); document.head.append(preconnect1, preconnect2); const stylesheet = Object.assign(document.createElement("link"), { rel: "stylesheet", href }); // Wait for the stylesheet so the @font-face rules are registered before we load() const sheetLoaded = new Promise((resolve, reject) => { stylesheet.onload = resolve; stylesheet.onerror = reject; }); document.head.append(stylesheet); await sheetLoaded; } // Force the actual font files to download (upright + italic faces of the variable font) await Promise.all([ document.fonts.load(`400 16px "${family}"`), document.fonts.load(`700 16px "${family}"`), document.fonts.load(`italic 400 16px "${family}"`), document.fonts.load(`italic 700 16px "${family}"`) ]); await document.fonts.ready; return family; }4d:Tdeb,config = ({ // Genetic code mapping with colors geneticCode: { 'UUU': { aa: 'Phe', color: 0xa1005c }, 'UUC': { aa: 'Phe', color: 0xa1005c }, 'UUA': { aa: 'Leu', color: 0xf4799f }, 'UUG': { aa: 'Leu', color: 0xf4799f }, 'CUU': { aa: 'Leu', color: 0xf4799f }, 'CUC': { aa: 'Leu', color: 0xf4799f }, 'CUA': { aa: 'Leu', color: 0xf4799f }, 'CUG': { aa: 'Leu', color: 0xf4799f }, 'AUU': { aa: 'Ile', color: 0xb995ff }, 'AUC': { aa: 'Ile', color: 0xb995ff }, 'AUA': { aa: 'Ile', color: 0xb995ff }, 'AUG': { aa: 'Met', color: 0x62af00 }, 'GUU': { aa: 'Val', color: 0x1E90FF }, 'GUC': { aa: 'Val', color: 0x1E90FF }, 'GUA': { aa: 'Val', color: 0x1E90FF }, 'GUG': { aa: 'Val', color: 0x1E90FF }, 'UCU': { aa: 'Ser', color: 0xf4cd00 }, 'UCC': { aa: 'Ser', color: 0xf4cd00 }, 'UCA': { aa: 'Ser', color: 0xf4cd00 }, 'UCG': { aa: 'Ser', color: 0xf4cd00 }, 'AGU': { aa: 'Ser', color: 0xf4cd00 }, 'AGC': { aa: 'Ser', color: 0xf4cd00 }, 'CCU': { aa: 'Pro', color: 0x6ba3ad }, 'CCC': { aa: 'Pro', color: 0x6ba3ad }, 'CCA': { aa: 'Pro', color: 0x6ba3ad }, 'CCG': { aa: 'Pro', color: 0x6ba3ad }, 'ACU': { aa: 'Thr', color: 0xb55500 }, 'ACC': { aa: 'Thr', color: 0xb55500 }, 'ACA': { aa: 'Thr', color: 0xb55500 }, 'ACG': { aa: 'Thr', color: 0xb55500 }, 'GCU': { aa: 'Ala', color: 0x45e97a }, 'GCC': { aa: 'Ala', color: 0x45e97a }, 'GCA': { aa: 'Ala', color: 0x45e97a }, 'GCG': { aa: 'Ala', color: 0x45e97a }, 'UAU': { aa: 'Tyr', color: 0xdf55da }, 'UAC': { aa: 'Tyr', color: 0xdf55da }, 'UAA': { aa: 'Stop', color: 0x818080 }, 'UAG': { aa: 'Stop', color: 0x818080 }, 'UGA': { aa: 'Stop', color: 0x818080 }, 'CAU': { aa: 'His', color: 0x585ceb }, 'CAC': { aa: 'His', color: 0x585ceb }, 'CAA': { aa: 'Gln', color: 0x14bc8b }, 'CAG': { aa: 'Gln', color: 0x14bc8b }, 'AAU': { aa: 'Asn', color: 0x9c5598 }, 'AAC': { aa: 'Asn', color: 0x9c5598 }, 'AAA': { aa: 'Lys', color: 0xff8d1c }, 'AAG': { aa: 'Lys', color: 0xff8d1c }, 'GAU': { aa: 'Asp', color: 0x00c7f5 }, 'GAC': { aa: 'Asp', color: 0x00c7f5 }, 'GAA': { aa: 'Glu', color: 0xb9f300 }, 'GAG': { aa: 'Glu', color: 0xb9f300 }, 'UGU': { aa: 'Cys', color: 0xf40057 }, 'UGC': { aa: 'Cys', color: 0xf40057 }, 'UGG': { aa: 'Trp', color: 0x6c1db3 }, 'CGU': { aa: 'Arg', color: 0x67ede6 }, 'CGC': { aa: 'Arg', color: 0x67ede6 }, 'CGA': { aa: 'Arg', color: 0x67ede6 }, 'CGG': { aa: 'Arg', color: 0x67ede6 }, 'AGA': { aa: 'Arg', color: 0x67ede6 }, 'AGG': { aa: 'Arg', color: 0x67ede6 }, 'GGU': { aa: 'Gly', color: 0xd08c00 }, 'GGC': { aa: 'Gly', color: 0xd08c00 }, 'GGA': { aa: 'Gly', color: 0xd08c00 }, 'GGG': { aa: 'Gly', color: 0xd08c00 } }, // Base order for each axis bases: ['U', 'C', 'A', 'G'], // Spatial parameters spacing: 12, plateHeight: 1.4, get plateWidth() { return this.plateHeight * 3; }, labelHeight: 2.8, // Axis configuration axisLineColor: 0x808080, // Amino acid full names aaFullNames: { 'Phe': 'Phenylalanine', 'Leu': 'Leucine', 'Ile': 'Isoleucine', 'Met': 'Methionine', 'Val': 'Valine', 'Ser': 'Serine', 'Pro': 'Proline', 'Thr': 'Threonine', 'Ala': 'Alanine', 'Tyr': 'Tyrosine', 'Stop': 'Stop', 'His': 'Histidine', 'Gln': 'Glutamine', 'Asn': 'Asparagine', 'Lys': 'Lysine', 'Asp': 'Aspartate', 'Glu': 'Glutamate', 'Cys': 'Cysteine', 'Trp': 'Tryptophan', 'Arg': 'Arginine', 'Gly': 'Glycine' } })4e:T278c,marchingCubesData = ({ edgeTable: [0x0, 0x109, 0x203, 0x30a, 0x406, 0x50f, 0x605, 0x70c, 0x80c, 0x905, 0xa0f, 0xb06, 0xc0a, 0xd03, 0xe09, 0xf00, 0x190, 0x99, 0x393, 0x29a, 0x596, 0x49f, 0x795, 0x69c, 0x99c, 0x895, 0xb9f, 0xa96, 0xd9a, 0xc93, 0xf99, 0xe90, 0x230, 0x339, 0x33, 0x13a, 0x636, 0x73f, 0x435, 0x53c, 0xa3c, 0xb35, 0x83f, 0x936, 0xe3a, 0xf33, 0xc39, 0xd30, 0x3a0, 0x2a9, 0x1a3, 0xaa, 0x7a6, 0x6af, 0x5a5, 0x4ac, 0xbac, 0xaa5, 0x9af, 0x8a6, 0xfaa, 0xea3, 0xda9, 0xca0, 0x460, 0x569, 0x663, 0x76a, 0x66, 0x16f, 0x265, 0x36c, 0xc6c, 0xd65, 0xe6f, 0xf66, 0x86a, 0x963, 0xa69, 0xb60, 0x5f0, 0x4f9, 0x7f3, 0x6fa, 0x1f6, 0xff, 0x3f5, 0x2fc, 0xdfc, 0xcf5, 0xfff, 0xef6, 0x9fa, 0x8f3, 0xbf9, 0xaf0, 0x650, 0x759, 0x453, 0x55a, 0x256, 0x35f, 0x55, 0x15c, 0xe5c, 0xf55, 0xc5f, 0xd56, 0xa5a, 0xb53, 0x859, 0x950, 0x7c0, 0x6c9, 0x5c3, 0x4ca, 0x3c6, 0x2cf, 0x1c5, 0xcc, 0xfcc, 0xec5, 0xdcf, 0xcc6, 0xbca, 0xac3, 0x9c9, 0x8c0, 0x8c0, 0x9c9, 0xac3, 0xbca, 0xcc6, 0xdcf, 0xec5, 0xfcc, 0xcc, 0x1c5, 0x2cf, 0x3c6, 0x4ca, 0x5c3, 0x6c9, 0x7c0, 0x950, 0x859, 0xb53, 0xa5a, 0xd56, 0xc5f, 0xf55, 0xe5c, 0x15c, 0x55, 0x35f, 0x256, 0x55a, 0x453, 0x759, 0x650, 0xaf0, 0xbf9, 0x8f3, 0x9fa, 0xef6, 0xfff, 0xcf5, 0xdfc, 0x2fc, 0x3f5, 0xff, 0x1f6, 0x6fa, 0x7f3, 0x4f9, 0x5f0, 0xb60, 0xa69, 0x963, 0x86a, 0xf66, 0xe6f, 0xd65, 0xc6c, 0x36c, 0x265, 0x16f, 0x66, 0x76a, 0x663, 0x569, 0x460, 0xca0, 0xda9, 0xea3, 0xfaa, 0x8a6, 0x9af, 0xaa5, 0xbac, 0x4ac, 0x5a5, 0x6af, 0x7a6, 0xaa, 0x1a3, 0x2a9, 0x3a0, 0xd30, 0xc39, 0xf33, 0xe3a, 0x936, 0x83f, 0xb35, 0xa3c, 0x53c, 0x435, 0x73f, 0x636, 0x13a, 0x33, 0x339, 0x230, 0xe90, 0xf99, 0xc93, 0xd9a, 0xa96, 0xb9f, 0x895, 0x99c, 0x69c, 0x795, 0x49f, 0x596, 0x29a, 0x393, 0x99, 0x190, 0xf00, 0xe09, 0xd03, 0xc0a, 0xb06, 0xa0f, 0x905, 0x80c, 0x70c, 0x605, 0x50f, 0x406, 0x30a, 0x203, 0x109, 0x0], triTable: [[], [0, 8, 3], [0, 1, 9], [1, 8, 3, 9, 8, 1], [1, 2, 10], [0, 8, 3, 1, 2, 10], [9, 2, 10, 0, 2, 9], [2, 8, 3, 2, 10, 8, 10, 9, 8], [3, 11, 2], [0, 11, 2, 8, 11, 0], [1, 9, 0, 2, 3, 11], [1, 11, 2, 1, 9, 11, 9, 8, 11], [3, 10, 1, 11, 10, 3], [0, 10, 1, 0, 8, 10, 8, 11, 10], [3, 9, 0, 3, 11, 9, 11, 10, 9], [9, 8, 10, 10, 8, 11], [4, 7, 8], [4, 3, 0, 7, 3, 4], [0, 1, 9, 8, 4, 7], [4, 1, 9, 4, 7, 1, 7, 3, 1], [1, 2, 10, 8, 4, 7], [3, 4, 7, 3, 0, 4, 1, 2, 10], [9, 2, 10, 9, 0, 2, 8, 4, 7], [2, 10, 9, 2, 9, 7, 2, 7, 3, 7, 9, 4], [8, 4, 7, 3, 11, 2], [11, 4, 7, 11, 2, 4, 2, 0, 4], [9, 0, 1, 8, 4, 7, 2, 3, 11], [4, 7, 11, 9, 4, 11, 9, 11, 2, 9, 2, 1], [3, 10, 1, 3, 11, 10, 7, 8, 4], [1, 11, 10, 1, 4, 11, 1, 0, 4, 7, 11, 4], [4, 7, 8, 9, 0, 11, 9, 11, 10, 11, 0, 3], [4, 7, 11, 4, 11, 9, 9, 11, 10], [9, 5, 4], [9, 5, 4, 0, 8, 3], [0, 5, 4, 1, 5, 0], [8, 5, 4, 8, 3, 5, 3, 1, 5], [1, 2, 10, 9, 5, 4], [3, 0, 8, 1, 2, 10, 4, 9, 5], [5, 2, 10, 5, 4, 2, 4, 0, 2], [2, 10, 5, 3, 2, 5, 3, 5, 4, 3, 4, 8], [9, 5, 4, 2, 3, 11], [0, 11, 2, 0, 8, 11, 4, 9, 5], [0, 5, 4, 0, 1, 5, 2, 3, 11], [2, 1, 5, 2, 5, 8, 2, 8, 11, 4, 8, 5], [10, 3, 11, 10, 1, 3, 9, 5, 4], [4, 9, 5, 0, 8, 1, 8, 10, 1, 8, 11, 10], [5, 4, 0, 5, 0, 11, 5, 11, 10, 11, 0, 3], [5, 4, 8, 5, 8, 10, 10, 8, 11], [9, 7, 8, 5, 7, 9], [9, 3, 0, 9, 5, 3, 5, 7, 3], [0, 7, 8, 0, 1, 7, 1, 5, 7], [1, 5, 3, 3, 5, 7], [9, 7, 8, 9, 5, 7, 10, 1, 2], [10, 1, 2, 9, 5, 0, 5, 3, 0, 5, 7, 3], [8, 0, 2, 8, 2, 5, 8, 5, 7, 10, 5, 2], [2, 10, 5, 2, 5, 3, 3, 5, 7], [7, 9, 5, 7, 8, 9, 3, 11, 2], [9, 5, 7, 9, 7, 2, 9, 2, 0, 2, 7, 11], [2, 3, 11, 0, 1, 8, 1, 7, 8, 1, 5, 7], [11, 2, 1, 11, 1, 7, 7, 1, 5], [9, 5, 8, 8, 5, 7, 10, 1, 3, 10, 3, 11], [5, 7, 0, 5, 0, 9, 7, 11, 0, 1, 0, 10, 11, 10, 0], [11, 10, 0, 11, 0, 3, 10, 5, 0, 8, 0, 7, 5, 7, 0], [11, 10, 5, 7, 11, 5], [10, 6, 5], [0, 8, 3, 5, 10, 6], [9, 0, 1, 5, 10, 6], [1, 8, 3, 1, 9, 8, 5, 10, 6], [1, 6, 5, 2, 6, 1], [1, 6, 5, 1, 2, 6, 3, 0, 8], [9, 6, 5, 9, 0, 6, 0, 2, 6], [5, 9, 8, 5, 8, 2, 5, 2, 6, 3, 2, 8], [2, 3, 11, 10, 6, 5], [11, 0, 8, 11, 2, 0, 10, 6, 5], [0, 1, 9, 2, 3, 11, 5, 10, 6], [5, 10, 6, 1, 9, 2, 9, 11, 2, 9, 8, 11], [6, 3, 11, 6, 5, 3, 5, 1, 3], [0, 8, 11, 0, 11, 5, 0, 5, 1, 5, 11, 6], [3, 11, 6, 0, 3, 6, 0, 6, 5, 0, 5, 9], [6, 5, 9, 6, 9, 11, 11, 9, 8], [5, 10, 6, 4, 7, 8], [4, 3, 0, 4, 7, 3, 6, 5, 10], [1, 9, 0, 5, 10, 6, 8, 4, 7], [10, 6, 5, 1, 9, 7, 1, 7, 3, 7, 9, 4], [6, 1, 2, 6, 5, 1, 4, 7, 8], [1, 2, 5, 5, 2, 6, 3, 0, 4, 3, 4, 7], [8, 4, 7, 9, 0, 5, 0, 6, 5, 0, 2, 6], [7, 3, 9, 7, 9, 4, 3, 2, 9, 5, 9, 6, 2, 6, 9], [3, 11, 2, 7, 8, 4, 10, 6, 5], [5, 10, 6, 4, 7, 2, 4, 2, 0, 2, 7, 11], [0, 1, 9, 4, 7, 8, 2, 3, 11, 5, 10, 6], [9, 2, 1, 9, 11, 2, 9, 4, 11, 7, 11, 4, 5, 10, 6], [8, 4, 7, 3, 11, 5, 3, 5, 1, 5, 11, 6], [5, 1, 11, 5, 11, 6, 1, 0, 11, 7, 11, 4, 0, 4, 11], [0, 5, 9, 0, 6, 5, 0, 3, 6, 11, 6, 3, 8, 4, 7], [6, 5, 9, 6, 9, 11, 4, 7, 9, 7, 11, 9], [10, 4, 9, 6, 4, 10], [4, 10, 6, 4, 9, 10, 0, 8, 3], [10, 0, 1, 10, 6, 0, 6, 4, 0], [8, 3, 1, 8, 1, 6, 8, 6, 4, 6, 1, 10], [1, 4, 9, 1, 2, 4, 2, 6, 4], [3, 0, 8, 1, 2, 9, 2, 4, 9, 2, 6, 4], [0, 2, 4, 4, 2, 6], [8, 3, 2, 8, 2, 4, 4, 2, 6], [10, 4, 9, 10, 6, 4, 11, 2, 3], [0, 8, 2, 2, 8, 11, 4, 9, 10, 4, 10, 6], [3, 11, 2, 0, 1, 6, 0, 6, 4, 6, 1, 10], [6, 4, 1, 6, 1, 10, 4, 8, 1, 2, 1, 11, 8, 11, 1], [9, 6, 4, 9, 3, 6, 9, 1, 3, 11, 6, 3], [8, 11, 1, 8, 1, 0, 11, 6, 1, 9, 1, 4, 6, 4, 1], [3, 11, 6, 3, 6, 0, 0, 6, 4], [6, 4, 8, 11, 6, 8], [7, 10, 6, 7, 8, 10, 8, 9, 10], [0, 7, 3, 0, 10, 7, 0, 9, 10, 6, 7, 10], [10, 6, 7, 1, 10, 7, 1, 7, 8, 1, 8, 0], [10, 6, 7, 10, 7, 1, 1, 7, 3], [1, 2, 6, 1, 6, 8, 1, 8, 9, 8, 6, 7], [2, 6, 9, 2, 9, 1, 6, 7, 9, 0, 9, 3, 7, 3, 9], [7, 8, 0, 7, 0, 6, 6, 0, 2], [7, 3, 2, 6, 7, 2], [2, 3, 11, 10, 6, 8, 10, 8, 9, 8, 6, 7], [2, 0, 7, 2, 7, 11, 0, 9, 7, 6, 7, 10, 9, 10, 7], [1, 8, 0, 1, 7, 8, 1, 10, 7, 6, 7, 10, 2, 3, 11], [11, 2, 1, 11, 1, 7, 10, 6, 1, 6, 7, 1], [8, 9, 6, 8, 6, 7, 9, 1, 6, 11, 6, 3, 1, 3, 6], [0, 9, 1, 11, 6, 7], [7, 8, 0, 7, 0, 6, 3, 11, 0, 11, 6, 0], [7, 11, 6], [7, 6, 11], [3, 0, 8, 11, 7, 6], [0, 1, 9, 11, 7, 6], [8, 1, 9, 8, 3, 1, 11, 7, 6], [10, 1, 2, 6, 11, 7], [1, 2, 10, 3, 0, 8, 6, 11, 7], [2, 9, 0, 2, 10, 9, 6, 11, 7], [6, 11, 7, 2, 10, 3, 10, 8, 3, 10, 9, 8], [7, 2, 3, 6, 2, 7], [7, 0, 8, 7, 6, 0, 6, 2, 0], [2, 7, 6, 2, 3, 7, 0, 1, 9], [1, 6, 2, 1, 8, 6, 1, 9, 8, 8, 7, 6], [10, 7, 6, 10, 1, 7, 1, 3, 7], [10, 7, 6, 1, 7, 10, 1, 8, 7, 1, 0, 8], [0, 3, 7, 0, 7, 10, 0, 10, 9, 6, 10, 7], [7, 6, 10, 7, 10, 8, 8, 10, 9], [6, 8, 4, 11, 8, 6], [3, 6, 11, 3, 0, 6, 0, 4, 6], [8, 6, 11, 8, 4, 6, 9, 0, 1], [9, 4, 6, 9, 6, 3, 9, 3, 1, 11, 3, 6], [6, 8, 4, 6, 11, 8, 2, 10, 1], [1, 2, 10, 3, 0, 11, 0, 6, 11, 0, 4, 6], [4, 11, 8, 4, 6, 11, 0, 2, 9, 2, 10, 9], [10, 9, 3, 10, 3, 2, 9, 4, 3, 11, 3, 6, 4, 6, 3], [8, 2, 3, 8, 4, 2, 4, 6, 2], [0, 4, 2, 4, 6, 2], [1, 9, 0, 2, 3, 4, 2, 4, 6, 4, 3, 8], [1, 9, 4, 1, 4, 2, 2, 4, 6], [8, 1, 3, 8, 6, 1, 8, 4, 6, 6, 10, 1], [10, 1, 0, 10, 0, 6, 6, 0, 4], [4, 6, 3, 4, 3, 8, 6, 10, 3, 0, 3, 9, 10, 9, 3], [10, 9, 4, 6, 10, 4], [4, 9, 5, 7, 6, 11], [0, 8, 3, 4, 9, 5, 11, 7, 6], [5, 0, 1, 5, 4, 0, 7, 6, 11], [11, 7, 6, 8, 3, 4, 3, 5, 4, 3, 1, 5], [9, 5, 4, 10, 1, 2, 7, 6, 11], [6, 11, 7, 1, 2, 10, 0, 8, 3, 4, 9, 5], [7, 6, 11, 5, 4, 10, 4, 2, 10, 4, 0, 2], [3, 4, 8, 3, 5, 4, 3, 2, 5, 10, 5, 2, 11, 7, 6], [7, 2, 3, 7, 6, 2, 5, 4, 9], [9, 5, 4, 0, 8, 6, 0, 6, 2, 6, 8, 7], [3, 6, 2, 3, 7, 6, 1, 5, 0, 5, 4, 0], [6, 2, 8, 6, 8, 7, 2, 1, 8, 4, 8, 5, 1, 5, 8], [9, 5, 4, 10, 1, 6, 1, 7, 6, 1, 3, 7], [1, 6, 10, 1, 7, 6, 1, 0, 7, 8, 7, 0, 9, 5, 4], [4, 0, 10, 4, 10, 5, 0, 3, 10, 6, 10, 7, 3, 7, 10], [7, 6, 10, 7, 10, 8, 5, 4, 10, 4, 8, 10], [6, 9, 5, 6, 11, 9, 11, 8, 9], [3, 6, 11, 0, 6, 3, 0, 5, 6, 0, 9, 5], [0, 11, 8, 0, 5, 11, 0, 1, 5, 5, 6, 11], [6, 11, 3, 6, 3, 5, 5, 3, 1], [1, 2, 10, 9, 5, 11, 9, 11, 8, 11, 5, 6], [0, 11, 3, 0, 6, 11, 0, 9, 6, 5, 6, 9, 1, 2, 10], [11, 8, 5, 11, 5, 6, 8, 0, 5, 10, 5, 2, 0, 2, 5], [6, 11, 3, 6, 3, 5, 2, 10, 3, 10, 5, 3], [5, 8, 9, 5, 2, 8, 5, 6, 2, 3, 8, 2], [9, 5, 6, 9, 6, 0, 0, 6, 2], [1, 5, 8, 1, 8, 0, 5, 6, 8, 3, 8, 2, 6, 2, 8], [1, 5, 6, 2, 1, 6], [1, 3, 6, 1, 6, 10, 3, 8, 6, 5, 6, 9, 8, 9, 6], [10, 1, 0, 10, 0, 6, 9, 5, 0, 5, 6, 0], [0, 3, 8, 5, 6, 10], [10, 5, 6], [11, 5, 10, 7, 5, 11], [11, 5, 10, 11, 7, 5, 8, 3, 0], [5, 11, 7, 5, 10, 11, 1, 9, 0], [10, 7, 5, 10, 11, 7, 9, 8, 1, 8, 3, 1], [11, 1, 2, 11, 7, 1, 7, 5, 1], [0, 8, 3, 1, 2, 7, 1, 7, 5, 7, 2, 11], [9, 7, 5, 9, 2, 7, 9, 0, 2, 2, 11, 7], [7, 5, 2, 7, 2, 11, 5, 9, 2, 3, 2, 8, 9, 8, 2], [2, 5, 10, 2, 3, 5, 3, 7, 5], [8, 2, 0, 8, 5, 2, 8, 7, 5, 10, 2, 5], [9, 0, 1, 5, 10, 3, 5, 3, 7, 3, 10, 2], [9, 8, 2, 9, 2, 1, 8, 7, 2, 10, 2, 5, 7, 5, 2], [1, 3, 5, 3, 7, 5], [0, 8, 7, 0, 7, 1, 1, 7, 5], [9, 0, 3, 9, 3, 5, 5, 3, 7], [9, 8, 7, 5, 9, 7], [5, 8, 4, 5, 10, 8, 10, 11, 8], [5, 0, 4, 5, 11, 0, 5, 10, 11, 11, 3, 0], [0, 1, 9, 8, 4, 10, 8, 10, 11, 10, 4, 5], [10, 11, 4, 10, 4, 5, 11, 3, 4, 9, 4, 1, 3, 1, 4], [2, 5, 1, 2, 8, 5, 2, 11, 8, 4, 5, 8], [0, 4, 11, 0, 11, 3, 4, 5, 11, 2, 11, 1, 5, 1, 11], [0, 2, 5, 0, 5, 9, 2, 11, 5, 4, 5, 8, 11, 8, 5], [9, 4, 5, 2, 11, 3], [2, 5, 10, 3, 5, 2, 3, 4, 5, 3, 8, 4], [5, 10, 2, 5, 2, 4, 4, 2, 0], [3, 10, 2, 3, 5, 10, 3, 8, 5, 4, 5, 8, 0, 1, 9], [5, 10, 2, 5, 2, 4, 1, 9, 2, 9, 4, 2], [8, 4, 5, 8, 5, 3, 3, 5, 1], [0, 4, 5, 1, 0, 5], [8, 4, 5, 8, 5, 3, 9, 0, 5, 0, 3, 5], [9, 4, 5], [4, 11, 7, 4, 9, 11, 9, 10, 11], [0, 8, 3, 4, 9, 7, 9, 11, 7, 9, 10, 11], [1, 10, 11, 1, 11, 4, 1, 4, 0, 7, 4, 11], [3, 1, 4, 3, 4, 8, 1, 10, 4, 7, 4, 11, 10, 11, 4], [4, 11, 7, 9, 11, 4, 9, 2, 11, 9, 1, 2], [9, 7, 4, 9, 11, 7, 9, 1, 11, 2, 11, 1, 0, 8, 3], [11, 7, 4, 11, 4, 2, 2, 4, 0], [11, 7, 4, 11, 4, 2, 8, 3, 4, 3, 2, 4], [2, 9, 10, 2, 7, 9, 2, 3, 7, 7, 4, 9], [9, 10, 7, 9, 7, 4, 10, 2, 7, 8, 7, 0, 2, 0, 7], [3, 7, 10, 3, 10, 2, 7, 4, 10, 1, 10, 0, 4, 0, 10], [1, 10, 2, 8, 7, 4], [4, 9, 1, 4, 1, 7, 7, 1, 3], [4, 9, 1, 4, 1, 7, 0, 8, 1, 8, 7, 1], [4, 0, 3, 7, 4, 3], [4, 8, 7], [9, 10, 8, 10, 11, 8], [3, 0, 9, 3, 9, 11, 11, 9, 10], [0, 1, 10, 0, 10, 8, 8, 10, 11], [3, 1, 10, 11, 3, 10], [1, 2, 11, 1, 11, 9, 9, 11, 8], [3, 0, 9, 3, 9, 11, 1, 2, 9, 2, 11, 9], [0, 2, 11, 8, 0, 11], [3, 2, 11], [2, 3, 8, 2, 8, 10, 10, 8, 9], [9, 10, 2, 0, 9, 2], [2, 3, 8, 2, 8, 10, 0, 1, 8, 1, 10, 8], [1, 10, 2], [1, 3, 8, 9, 1, 8], [0, 9, 1], [0, 3, 8], []] })4f:[] 29:{"id":"68408541cbf03fab","slug":null,"title":"3D Genetic RNA Codon 4x4x4 Cube","thumbnail":"19120eef9659a3db5d6eeb7d1deb43fffec2918cb2505556ecce40c383ffc142","access_level":"public","create_time":"$D2026-01-24T04:58:11.735Z","update_time":"$D2026-10-04T16:46:24.997Z","view_time":null,"first_public_time":"$D2026-01-24T07:24:10.871Z","has_unpublished_edits":null,"fork":{"id":"4a3be36a8c428177","slug":"three-js-templates","title":"Three JS Templates","owner":{"id":"cf45be0120eccaad","login":"laotzunami","name":"Lao"}},"stars":14,"starred":false,"owner":{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024","bio":"Data Viz Designer @ Cato Institute","followed_by_you":false,"follows_you":false},"version":612,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null,"bio":"Data Viz Designer @ Cato Institute","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null,"role":"editor"},{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024","role":"editor"}],"comments":[{"id":"5ac885809040ac27","reply_to_id":null,"content":"epic","create_time":"$D2026-10-19T15:53:02.788Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"d3fad49bf93181ca","login":"sam-jd","name":"sam JD","avatar_url":"https://avatars-next.observableusercontent.com/219cce291fbf104f5f0886a457825517d2f310308f31ea6b7eb2079ba729fa04","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":9,"collection":null,"type":"notebook","body":{"titling":"auto","title":"3D Genetic RNA Codon 4x4x4 Cube","cells":[{"id":4,"value":"# 3D Genetic RNA Codon 4x4x4 Cube","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":498,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"This idea was shared with me by Bernhard Pfennigschmidt. \n\nCheck out his work at [https://rnacube.cancun.net/](https://rnacube.cancun.net/)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":545,"value":"In biology textbooks, codon tables are often represented as nested 4x4 grids. This visualization is simply taking the third letter, and giving it its own spatial dimension.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"$4a","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"$4b","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":543,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.96/build/three.min.js\");\n await require(\"three@0.96/examples/js/controls/OrbitControls.js\").catch(() => {});\n //await require(\"three@0.96/examples/js/postprocessing/EffectComposer.js\").catch(() => {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4f","stdlib":"1"}} 24:null