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(); }