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:T867,legend=({ fig:"FIG.", title:"Découper l'ADN", legendDiv:"FIG1", currentLegend:"(a) L'ADN est une longue molécule qui encode les informations nécessaires pour qu'une cellule fonctionne. Différentes \"bases\", abrégées en A, C, T et G, se trouvent sur chaque brins. Ces bases s'attirent mutuellement, le A colle au T et le C au G. La séquence de ces lettres forme le code génétique de la cellule. Cliquez sur b pour passer à la figure suivante.", a:"(a) L'ADN est une longue molécule qui encode les informations nécessaires pour qu'une cellule fonctionne. Différentes \"bases\", abrégées en A, C, T et G, se trouvent sur chaque brins. Ces bases s'attirent mutuellement, le A colle au T et le C au G. La séquence de ces lettres forme le code génétique de la cellule. Cliquez sur b pour passer à la figure suivante.", b:"(b) Cas9 est une protéine qui a la capacité de cibler et de couper l'ADN. Elle peut être programmée pour cibler des séquences spécifiques en utilisant un brin d'ARN comme guide. Ici, vous pouvez encoder le guide ARN en remplissant les cases avec les lettres A, U, C ou G. Vous pouvez aussi cliquer sur le cercle noir à droite pour les remplir aléatoirement. La séquence PAM ne peut pas être encodée, elle sera toujours [N][G][G]. Une fois que les 20 cases sont pleines, cliquez sur c pour continuer.", c:"(c) Quand Cas9 est proche d'un brin d'ADN, elle teste la complémentarité de ce brin avec sa séquence PAM. Ici, cela revient à vérifier la compatibilité avec [G][G]. Si ce n'est pas le cas, elle ne s'attache pas.", d:"(d) Si la séquence PAM est complémentaire, elle s'attache, ce qui permet de vérifier la complémentarité avec le guide ARN. Si la plupart des paires de bases ne sont pas complémentaires, les liens ne seront pas assez forts pour garder Cas9 sur ce site.", e:"(e) Si la séquence PAM et le guide sont complémentaires avec le brin d'ADN, Cas9 s'attache au site.", f:"(f) Cas9 peut alors cliver les deux brins d'ADN, ce qui s'appelle une rupture double brin (DSB)", g:"(g) Cas9 pourra alors partir du site, laissant la cellule réparer cette cassure." })34:[] 2f:{"title":"Fig. 1. Découper l'ADN","cells":[{"id":0,"value":"html`

Fig. 1. Découper l'ADN

`","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"}