31:T72d,function pushBP(amount,svg,paired,start,color){ let buff=dnaGen(amount) let count=0 buff.forEach(bp=>{ let topBP = svg.append("g") .attr("id",count+"pushBP") .attr("class","topBP") topBP.append("rect") .attr("x",parseInt(start+(count*20))) .attr("y",-50) .attr("width",20) .attr("height",2) .attr("fill",color) topBP.append("rect") .attr("x",parseInt(start+(count*20)+9)) .attr("y",-50) .attr("width",2) .attr("height",10) .attr("fill",color) topBP.append("text") .style("font-family","monospace") .style("font-style","bold") .attr("x",parseInt(start+(count*20)+5)) .attr("y",-60) .attr("fill",color) .text(bp) if (paired){ let height = svg.node().height.baseVal.value let botBP = svg.append("g") .attr("id",count+"pushBP") .attr("class","botBP") botBP.append("rect") .attr("x",parseInt(start+(count*20))) .attr("y",height+20) .attr("width",20) .attr("height",2) .attr("fill",color) botBP.append("rect") .attr("x",parseInt(start+(count*20)+9)) .attr("y",height+10) .attr("width",2) .attr("height",10) .attr("fill",color) botBP.append("text") .style("font-family","monospace") .style("font-style","bold") .attr("x",parseInt(start+(count*20)+5)) .attr("y",height+40) .attr("fill",color) .text(pair(bp,"DNA")) } count++ }) }32:T631,function sgRNABoxes(figId) { document.querySelectorAll(".rnaGuide").forEach(d => d.remove()) for (let i=0;i<20;i++){ // Add bases let base = d3.select("svg").select("#casG").append("g").attr("id","guideBase"+i) base.append("rect") .attr("class","guideBase"+i) .attr("x",162+19*i) .attr("y",-250) .attr("width",20) .attr("height",2) base.append("rect") .attr("class","guideBase"+i) .attr("x",171+19*i) .attr("y",-250) .attr("width",2) .attr("height",15) base.append("text") .attr("id","resultBase"+i) .attr("x",170+19*i) .attr("y",-160) .style("font-size","14px") .text("") let baseInput = document.createElement("input") baseInput.id="guideBaseInput"+i; baseInput.type="text"; baseInput.className="rnaGuide"; baseInput.maxLength=1; baseInput.style="position:absolute;"+ "left:"+(166+(19*i))+"px;"+ "top:-210px;"+ "border:1px solid black;"+ "width:10px;"+ "display:none;"; baseInput.addEventListener("change",e=>{ if (baseInput.value==="A"||baseInput.value==="U"||baseInput.value==="C"||baseInput.value==="G"){ } else { baseInput.value=""; baseInput.style.border="1px solid black" } }) document.getElementById(figId).parentNode.appendChild(baseInput) } }33:[] 2f:{"title":"DNA Figures","cells":[{"id":0,"value":"md`# DNA Figures\nThis notebook serves as a commented repository of assets to be called by notebooks displaying figures, such as Fig. 1. below.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"Fig1","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"legDiv1","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"Fig2","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"legDiv2","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`------\n### Strands & Bases\nalpha & beta are two arrays which contain bases objects.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"alpha=[]","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"beta = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"md`base objects have four properties:\n- a *string* base name (A/T/U/C/G)\n- an *int* x value ([0-100])\n- a *float* y value ([-2,2])\n- a *float* dy value ([0,1])\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"alpha[30]","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"md`The **pair** function takes two arguments: a base ('A'/'T'/'U'/'C'/'G') and a strand type ('DNA'/'RNA'). It returns the complementary base of the chosen type. DNA also takes U as an argument and returns A.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"function pair(base,acid){\n if (acid===\"DNA\"){\n switch (base) {\n case \"A\": return \"T\" \n break;\n case \"T\": return \"A\" \n break;\n case \"U\": return \"A\" \n break;\n case \"G\": return \"C\" \n break;\n case \"C\": return \"G\" \n break;\n }\n } else if (acid===\"RNA\") {\n switch (base) {\n case \"A\": return \"U\" \n break;\n case \"T\": return \"A\" \n break;\n case \"U\": return \"A\" \n break;\n case \"G\": return \"C\" \n break;\n case \"C\": return \"G\" \n break;\n } \n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":258,"value":"md`The **pushBP** function takes five arguments: an amount of bases to push, an svg element, a boolean paired (do you want both strands or not), a start INT that is the x value of where the pair should be inserted, and color.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"md`The **dnaGen** function takes one argument : a positive integer. It will return an array with random DNA bases. The array's length is equal to the integer passed.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"function dnaGen(l){\n let buffer=[]\n let bases=[\"A\",\"T\",\"C\",\"G\"]\n for (let i=0;i x(d.x))\n .y(d=>y(d.y));","pinned":true,"hidden":false,"mode":"ojs"},{"id":134,"value":"md`**line2** is an unzipped line.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"line2 = d3.line()\n .x((d,i)=>{ \n if (i<9) {\n return x(d.x-1)\n }\n else if (i>=9&&i<29) {\n return x(d.x)\n }\n else if (i>=29){\n return x(d.x+1)\n }\n })\n .y(d=>y(d.y+d.dy));","pinned":true,"hidden":false,"mode":"ojs"},{"id":136,"value":"md`**line3** is both unzipped and cleaved.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"line3 = d3.line()\n .x((d,i)=>{ \n if (i<9) {\n return x(d.x-3)\n }\n else if (i>=9&&i<26) {\n return x(d.x-2)\n }\n else if (i>=26&&i<29){\n return x(d.x+2)\n } \n else {\n return x(d.x+3)\n }\n })\n .y(d=>y(d.y+d.dy));","pinned":true,"hidden":false,"mode":"ojs"},{"id":142,"value":"md`**line4** is cleaved but not unzipped.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"line4 = d3.line()\n .x((d,i)=>(i<26)?x(d.x-2):x(d.x+1))\n .y(d=>y(d.y));","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"x = d3.scaleLinear()\n .domain([0, 50])\n .range([0, width2])","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"y = d3.scaleLinear()\n .domain([-3, 4])\n .range([400, 0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":112,"value":"xAxis = g => g.call(d3.axisBottom(x))","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"yAxis = g => g.call(d3.axisLeft(y))","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"md`----\n### Data management\nThe **updateData** function (re)generates alpha and beta according to the current value of a sequence (it is usually convenient to use dnaSeq), hence ensuring base consistency.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"function updateData(dnaData) {\n alpha.length=0;\n beta.length=0;\nlet count=0\ndnaData.forEach(base=>{\n alpha.push({base:base,x:count,y:1.5,dy:shape[count]})\n beta.push({base:pair(base,\"DNA\"),x:count,y:1,dy:-shape[count]})\n count++\n })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":218,"value":"updateData(dnaSeq)","pinned":true,"hidden":false,"mode":"ojs"},{"id":121,"value":"md`**slideData** removes one base a the end of dnaSeq and adds a random base (using dnaGen) at its the end. This is useful to display the motion of \"DNA scrolling\" using d3's selection.join. updateData needs to be called just after to materialize the change in alpha & beta arrays.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"function sliceData() {\n dnaSeq.shift()\n dnaSeq.push(dnaGen(1)[0])\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":188,"value":"md`-----\n### Interaction\nThe **sgRNABoxes** function creates 23 *text-typed input DOM elements*, the last three of which are filled and disabled (representing the PAM sequence). Those are appended to the parent node (in Observable, the cell) of the figure's ID which has to be passed as an argument.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"md`-----------\n### Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"figStyle = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"width2=950","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"d3 = require(\"d3@5\",\"d3-random@2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"import {legDiv as legDiv1, Fig1} from \"@guillaume-levrier/fig-1-cleaving-dna\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"import {legDiv as legDiv2, Fig2} from \"@guillaume-levrier/fig-2-dna-repair-non-homologous-end-joining\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"md`----------`","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"LICENSE=\"MIT\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}