31:T5caf,Fig1 = { // Create SVG const svg = d3.create("svg").attr("viewBox", [0,0,width2,360]) .attr("width", width2) .attr("height", 360) .attr("overflow","clip") .attr("id","Fig1") // Generate a random seq updateData(dnaSeq) // hideRect is used to hide strands when cleaving happens let hideRect = svg.append("rect").attr("id","hideRect").attr("x",487).attr("fill","white") .attr("y",0).attr("height",340).attr("width",0) // Figure letters let letG= svg.append("g").attr("id","letG") let a = letG.append("text") .attr("id","a") .attr("x",30) .attr("y",20) .attr("class","figNav") .style("opacity",1) .text("a") let b = letG.append("text") .attr("id","b") .attr("x",50) .attr("y",20) .attr("class","figNav") .style("opacity",.2) .text("b") let c = letG.append("text") .attr("id","c") .attr("class","figNav") .attr("x",70) .attr("y",20) .text("c") let d = letG.append("text") .attr("id","d") .attr("x",90) .attr("y",20) .attr("class","figNav") .text("d") let e = letG.append("text") .attr("id","e") .attr("x",110) .attr("y",20) .attr("class","figNav") .text("e") let f = letG.append("text") .attr("id","f") .attr("x",130) .attr("y",20) .attr("class","figNav") .text("f") let g = letG.append("text") .attr("id","g") .attr("x",150) .attr("y",20) .attr("class","figNav") .text("g") // hide letters that shouldn't be accessible svg.append("rect") .attr("x",-10) .attr("y",0) .attr("fill","white") .attr("width",15) .attr("height",40) svg.append("rect") .attr("x",65) .attr("y",0) .attr("fill","white") .attr("width",200) .attr("height",40) letG.lower() let figIndex=0; let figArr=['a','b','c','d','e','f','g']; document.getElementById(legend.legendDiv).innerHTML = legend.a function figureSwitch(targFig) { document.getElementById(legend.legendDiv).innerHTML =legend[targFig] for (let i=0;ilineType(alpha)) betaStrand.transition().duration(t).attr("d",d=>lineType(beta)) } // Cas Group let casG=svg.append("g").attr("id","casG") // Guide Group let guideG = casG.append("g").attr("id","guideG") let Cas = casG.append("rect") .attr("x",100) .attr("y",-400) .attr("width",550) .attr("height",300) .attr("fill","none") .attr("stroke","black") .attr("stroke-width","1px") let title = casG.append("text") .text("Cas9") .style("font-family","sans-serif") .attr("x",105) .attr("y",-110); let PAMrect = casG.append("rect") .attr("x",560) .attr("y",-305) .attr("fill","none") .attr("stroke","black") .attr("stroke-width","1") .attr("width",60) .attr("height",85) let G1= casG.append("rect").attr("x",583).attr("y",-302) .attr("fill","none") .attr("stroke","black") .attr("stroke-width","1") .attr("width",15) .attr("height",20) let G2 = casG.append("rect").attr("x",602).attr("y",-302) .attr("fill","none") .attr("stroke","black") .attr("stroke-width","1") .attr("width",15) .attr("height",20) let PAMdesc = casG.append("text") .attr("x",560) .attr("y",-310) .style("font-family","sans-serif") .style("font-size","14px") .style("font-weight","bolder") .text("PAM") casG.append("circle") .attr("id","PAMcircle") .attr("cx",545) .attr("cy",-250) .style("cursor","pointer") .attr("r",5).raise().on("click",e=>{ for (let i = 0;i<20;i++){ document.getElementById("guideBaseInput"+i).value=pair(dnaGen(1)[0],"RNA") } c.style("pointer-events","all") .style("cursor","pointer") }) // Alpha Bases let alphaBases= DNA.append("g").attr("id","alphaBases") alphaBases.selectAll("text") .data(alpha, d => d) .join( enter => enter.append("text") .attr("x", d=>x(d.x)-4) .attr("y", d=>y(d.y)-10) .text(d => d.base) .style("font-family","monospace") ) alphaBases.selectAll("rect") .data(alpha, d => d) .join( enter => enter.append("rect") .attr("x", d=>x(d.x)) .attr("y", d=>y(d.y)) .attr("width",2) .attr("height",12) ) // Beta bases let betaBases= DNA.append("g").attr("id","betaBases") betaBases.selectAll("text") .data(beta, d => d) .join( enter => enter.append("text") .attr("x", d=>x(d.x)-4) .attr("y", d=>y(d.y)+20) .text(d => d.base) .style("font-family","monospace") ) betaBases.selectAll("rect") .data(beta, d => d) .join( enter => enter.append("rect") .attr("x", d=>x(d.x)) .attr("y", d=>y(d.y)-12) .attr("width",2) .attr("height",12) ) function baseSwitch(unzip,cleave,t){ let zipX=0; let cleaveX=0; if (unzip) {zipX=1} if (cleave) {cleaveX=2} //Change Alpha Bases (text) alphaBases.selectAll("text").transition().duration(t) .attr("y", d=>(unzip)?(y(d.y+d.dy)-10):(y(d.y)-10)) .attr("x", (d,i)=>{ if (i<9) { return x(d.x-zipX-cleaveX)-4 } else if (i>=9 && i<26){ return x(d.x-cleaveX)-4 } else if (i>=26 && i<29) { return x(d.x+cleaveX)-4 } else { return x(d.x+zipX+cleaveX)-4 } }) //Change Alpha Bases (rects) alphaBases.selectAll("rect").transition().duration(t) .attr("y", d=>(unzip)?(y(d.y+d.dy)):(y(d.y))) .attr("x", (d,i)=>{ if (i<9) { return x(d.x-zipX-cleaveX) } else if (i>=9 && i<26){ return x(d.x-cleaveX) } else if (i>=26 && i<29) { return x(d.x+cleaveX) } else { return x(d.x+zipX+cleaveX) } }) //Change Bela Bases (text) betaBases.selectAll("text").transition().duration(t) .attr("y", d=>(unzip)?(y(d.y+d.dy)+20):(y(d.y)+20)) .attr("x", (d,i)=>{ if (i<9) { return x(d.x-zipX-cleaveX)-4 } else if (i>=9 && i<26){ return x(d.x-cleaveX)-4 } else if (i>=26 && i<29) { return x(d.x+cleaveX)-4 } else { return x(d.x+zipX+cleaveX)-4 } }) //Change Beta Bases (rect) betaBases.selectAll("rect").transition().duration(t) .attr("y", d=>(unzip)?(y(d.y+d.dy)-12):(y(d.y)-12)) .attr("x", (d,i)=>{ if (i<9) { return x(d.x-zipX-cleaveX) } else if (i>=9 && i<26){ return x(d.x-cleaveX) } else if (i>=26 && i<29) { return x(d.x+cleaveX) } else { return x(d.x+zipX+cleaveX) } }) } function baseCheck(i){ // get this base let base = document.getElementById("guideBaseInput"+i).value; // get the expected complementary base let compBase = pair(beta[8+i].base,"RNA") // If there is a match if (base===compBase||base==="N") { // Lower the base d3.select("#guideBase"+i) .transition() .delay(1000+(300*(24-i))) .duration(250) .attr("transform","translate(0,25)") // Display a "check" mark d3.select("#resultBase"+i) .transition() .delay(1000+(300*(24-i))) .style("font-weight","bold") .style("font-size","18px") .text("✓") } else { // else display a X mark d3.select("#resultBase"+i) .transition() .delay(1000+(300*(24-i))) .style("font-weight","bold") .style("font-size","24px") .attr("transform","translate(0,25)") .text("⨯"); //validPAM=false; //validSeq=false; } } function resorbGuide() { for (let i=23;i>=0;i--){ d3.select("#guideBase"+i).transition().duration(300).attr("transform","translate(0,0)") d3.select("#resultBase"+i).transition().duration(300) .style("font-weight","bold") .text("") .attr("transform","translate(0,0)") } } function casCheck () { // Stop scanning and open strands interval.stop() strandSwitch(line2,750) baseSwitch(true,false,750) toggleCasG() // check for the PAM sequence if (beta[30].base==="C"&&beta[29].base==="C"){ // animate valid PAM here G1.transition().delay(1000).attr("stroke-width",3) G2.transition().delay(1200).attr("stroke-width",3) G1.transition().delay(8200).attr("stroke-width",1) G2.transition().delay(8200).attr("stroke-width",1) for (let i=0;i<20;i++){ baseCheck(19-i) } } else { // animate failing PAM here G1.transition().delay(1000).attr("fill","black").attr("opacity",.3) G2.transition().delay(1200).attr("fill","black").attr("opacity",.3) G1.transition().delay(2000).attr("fill","none").attr("opacity",1) G2.transition().delay(2200).attr("fill","none").attr("opacity",1) } } let guideArray=[]; function scan(PAMfail,SeqFail) { let t=200; alphaBases.selectAll("rect") .data(alpha, d => d) .join( enter => enter.append("rect") .attr("x", d=>x(d.x)) .attr("y", d=>y(d.y)) .attr("width",2) .attr("height",12) .call(enter => enter.transition().ease(d3.easeLinear).duration(t) .attr("x", d=>x(d.x-1)) ) ) alphaBases.selectAll("text") .data(alpha, d => d) .join( enter => enter.append("text") .attr("x", d=>x(d.x)-4) .attr("y", d=>y(d.y)-10) .text(d => d.base) .style("font-family","monospace") .call(enter => enter.transition().ease(d3.easeLinear).duration(t) .attr("x", d=>x(d.x-1)-4) ) ) betaBases.selectAll("text") .data(beta, d => d) .join( enter => enter.append("text") .attr("x", d=>x(d.x)-4) .attr("y", d=>y(d.y)+20) .text(d => d.base) .style("font-family","monospace") .call(enter => enter.transition().ease(d3.easeLinear).duration(t) .attr("x", d=>x(d.x-1)-4) ) ) betaBases.selectAll("rect") .data(beta, d => d) .join( enter => enter.append("rect") .attr("x", d=>x(d.x)) .attr("y", d=>y(d.y)-12) .attr("width",2) .attr("height",12) .call(enter => enter.transition().ease(d3.easeLinear).duration(t) .attr("x", d=>x(d.x-1)) ) ) sliceData() updateData(dnaSeq) if (beta[30].base==="G"&&beta[29].base==="A"&&PAMfail&&SeqFail===false) { casCheck() d.transition().delay(3000).style("pointer-events","all").style("cursor","pointer") } else if (beta[30].base==="C"&&beta[29].base==="C"&&PAMfail===false&&SeqFail){ casCheck() e.transition().delay(7500).style("pointer-events","all").style("cursor","pointer") } else if (beta[30].base==="C"&&beta[29].base==="C"&&PAMfail===false&&SeqFail===false&& pair(beta[27].base,"DNA")===guideArray[19]&& pair(beta[26].base,"DNA")===guideArray[18]&& pair(beta[25].base,"DNA")===guideArray[17]&& pair(beta[24].base,"DNA")===guideArray[16]&& pair(beta[23].base,"DNA")===guideArray[15]&& pair(beta[22].base,"DNA")===guideArray[14]&& pair(beta[21].base,"DNA")===guideArray[13]&& pair(beta[20].base,"DNA")===guideArray[12]&& pair(beta[19].base,"DNA")===guideArray[11]&& pair(beta[18].base,"DNA")===guideArray[10]&& pair(beta[17].base,"DNA")===guideArray[9]&& pair(beta[16].base,"DNA")===guideArray[8]&& pair(beta[15].base,"DNA")===guideArray[7]&& pair(beta[14].base,"DNA")===guideArray[6]&& pair(beta[13].base,"DNA")===guideArray[5]&& pair(beta[12].base,"DNA")===guideArray[4]&& pair(beta[11].base,"DNA")===guideArray[3]&& pair(beta[10].base,"DNA")===guideArray[2]&& pair(beta[9].base,"DNA")===guideArray[1]&& pair(beta[8].base,"DNA")===guideArray[0] ) { casCheck() f.transition().delay(7500).style("pointer-events","all").style("cursor","pointer") } } let interval = d3.interval(scan,200).stop() let togCasG=false function toggleCasG() { casG.transition().duration(750).style("opacity",1) if (togCasG){ casG.transition().duration(750).attr("transform","translate(0,0)") document.querySelectorAll(".rnaGuide").forEach(d=>{ d3.select(d).transition().delay(750).style("display","none"); d3.select(d).transition().duration(750).style("opacity",0).style("top","-210px"); }) togCasG=false } else { casG.transition().duration(750).attr("transform","translate(0,420)") document.querySelectorAll(".rnaGuide").forEach(d=>{ d3.select(d).style("display","block") d3.select(d).transition() .duration(750) .style("opacity",1) .style("top","140px"); }) togCasG=true } } //Starting b phase b.on("click",e=>{ let guideComp=true; for (let i=19;i>=0;i--){ document.getElementById("guideBaseInput"+i).addEventListener("change",e=>{ guideComp=true; for (let j=19;j>=0;j--){ if(document.getElementById("guideBaseInput"+j).value.length<1){ guideComp=false; } } if (guideComp){ c.style("pointer-events","all") .style("cursor","pointer") } else { c.style("pointer-events","none") } }) } figureSwitch("b"); if (interval){interval.stop()} toggleCasG() resorbGuide(); if (togCasG===false) { setTimeout(toggleCasG,800) } // move out DNA DNA.transition().duration(750).attr("transform","translate(0,500)") }) // starting C phase = PAM failure c.on("click",e=>{ baseSwitch(false,false,750) strandSwitch(line,750) if (togCasG){toggleCasG()} resorbGuide(); figureSwitch("c"); if (interval){interval.stop()} interval=d3.interval(()=>{scan(true,false)},200) // move in DNA DNA.transition().duration(750).attr("transform","translate(0,0)") }) // starting D phase = Seq Failure d.on("click",e=>{ figureSwitch("d"); resorbGuide(); if (togCasG){toggleCasG()} strandSwitch(line,750) baseSwitch(false,false,750) if (interval){interval.stop()} setTimeout(()=>{ interval=d3.interval(()=>{scan(false,true)},200) },750) }) // starting E phase : validating works e.on("click",e=>{ for (let i=19;i>=0;i--){ document.getElementById("guideBaseInput"+i).style.opacity=1; } casG.style("opacity",1) if (interval){interval.stop()} figureSwitch("e"); resorbGuide(); //freeze the target sequence and inject target in the displayed DNA strands for (let i = 0;i<20;i++){ let guide = document.getElementById("guideBaseInput"+i) dnaSeq.splice(70+i,1,guide.value.replace("U","T")) guideArray.push(guide.value.replace("U","T")) guide.disabled=true; } dnaSeq.splice(91,1,"G") dnaSeq.splice(92,1,"G") updateData(dnaSeq) hideRect.transition().duration(750) .attr("x",480) .attr("width",0) if (togCasG){toggleCasG()} strandSwitch(line,750) baseSwitch(false,false,750) setTimeout(()=>{ interval=d3.interval(()=>{scan(false,false)},200) },1000) }) // F phase : cleave site f.on("click",e=>{ figureSwitch("f"); g.transition() .delay(800) .style("pointer-events","all") .style("cursor","pointer") if (interval){interval.stop()} casG.transition().duration(750).style("opacity",.2) //hideRect hideRect.raise() casG.raise() if (togCasG===false){ toggleCasG() }; hideRect.transition().duration(750) .attr("x",450) .attr("width",70) strandSwitch(line3,750) baseSwitch(true,true,750) }) g.on("click",e=>{ figureSwitch("g"); if (interval){interval.stop()} if (togCasG){toggleCasG()} strandSwitch(line4,750) baseSwitch(false,true,750) }) // Back to A phase a.on("click",e=>{ resorbGuide(); if (interval){interval.stop()} if (togCasG){toggleCasG()} figureSwitch("a"); b.transition() .delay(800) .style("pointer-events","all") .style("cursor","pointer") // bring DNA back DNA.transition().duration(750).attr("transform","translate(0,0)") strandSwitch(line,750) baseSwitch(false,false,750) hideRect.transition().duration(750) .attr("x",477) .attr("width",0) }) svg.append("rect").attr("x",-5).attr("y",100).attr("height",150).attr("width",15).attr("fill","white") // append the sgRNA boxes to the DOM setTimeout(()=>{ sgRNABoxes("Fig1") },1000) yield svg.node(); }32:T9cc,article = html`

[This is a work in progress]

One of the ways to change how cells behave is to change their genome. DNA modification is hard in most complex organisms because it is crucial to their survival that their genome remains mostly stable.

We also know that the mechanisms in charge of repairing the occasional breaks in DNA are imperfect. Being able to damag precise sites of interests in an individual's genome might therefore lead to imperfect repairs, some of which might end up producing an outcome of interest. This interactive figure (Fig. 1) shows how the Cas9 nuclease can be programmed to induce targeted double-strand breaks in DNA sequences. DNA repair mechanisms will be featured in Figure 2.

This notebook has been designed as an experimental pedagogical resource on what has been sometimes been branded as a capacity to \"rewrite life\". The leading concern was to make the process easier to understand by systematically removing all elements that are not central to the comprehension of the mechanism as it is understood by the scientific consensus at the time of writing those lines.

This figure has been designed to be inserted into a textual narrative (such as a web page) or a presentation. It is lacking many elements. Some elements are implicit and can be made explicit by the text or the presenter: the single RNA guide, the PAM sequence, the DNA polarity, etc. Clicking the black circle at the right end of the sgRNA will fill the the boxes with random RNA bases so that the presenter doesn't need a keyboard to use it. Filling all sgRNA boxes will lock the fields and activate the scanning process.

While apparently simple, the implementation of this notebook is not trivial and might evolve through time. It will tend towards more robustness. It is however very easy to embed on any webpage. You are most welcome to do so.

Many assets created for this figure are available in another notebook.

If you run into any technical issue, the easiest fix is to reload the page.

`33:T7ff,legend=({ fig:"FIG. 1.", title:"Cleaving DNA", legendDiv:"FIG1", currentLegend:"(a) DNA is long molecule that encodes the information needed for a cell to function. Different \"bases\", abbreviated as A, C, T, and G, are found on each strand. The bases are attracted to each other, making A stick to T while C sticks to G. The sequence of these letters forms the genetic code of the cell. Click b on the top left corner of the figure to go to from (a) to (b).", a:"(a) DNA is long molecule that encodes the information needed for a cell to function. Different \"bases\", abbreviated as A, C, T, and G, are found on each strand. The bases are attracted to each other, making A stick to T while C sticks to G. The sequence of these letters forms the genetic code of the cell. Click b on the top left corner of the figure to go to from (a) to (b).", b:"(b) Cas9 is a protein that has the ability to scan and cut DNA. It can be programmed to target specific sequences using an RNA strand as a guide. Here, you can encode that RNA guide by filling the boxes using the letters A, U, C or G. The PAM sequence cannot be encoded, it always has to be [N][G][G]. Once you fill the 20 sgRNA boxes, you will be able to click on c to go to the next step.", c:"(c) When Cas9 comes close to a DNA strands, it checks if the DNA strand at this site is compatible with its PAM sequence. Here, it means checking if the two bases in the slots are [G][G]. If they are not, Cas9 will not attach itself to DNA.", d:"(d) If the PAM sequence does match, Cas9 will check for complementarity with the RNA guide. If most base-pairs do not match, the links between the guide and the DNA strands won't be strong enough to keep Cas9 on this site.", e:"(e) If both the PAM sequence and the guide match, Cas9 will be attached to this site.", f:"(f) Cas9 can then cleave both those DNA strands, inducing what is called a \"double strand break\". ", g:"(g) Cas9 will then be removed from the site, which enables the cell to try and repair that break (Fig. 2)." })34:[] 2f:{"title":"Fig. 1. Cleaving DNA","cells":[{"id":0,"value":"html`

Fig. 1. Cleaving DNA

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2077,"value":"legDiv=html`

${legend.fig} ${legend.title}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1508,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1545,"value":"LICENSE=\"MIT\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1172,"value":"md`--------`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1484,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3@5\",\"d3-random@2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2435,"value":"figStyle","pinned":false,"hidden":false,"mode":"ojs"},{"id":2032,"value":"import {\n figStyle, \n alpha, \n beta, \n pair, \n dnaSeq, \n dnaGen, \n sliceData, \n line,\n line2,\n line3, \n line4, \n x, \n y, \n updateData, \n width2,\n sgRNABoxes\n } from \"@guillaume-levrier/dna-figures\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}