31:T4c03,Fig2 = { // Create SVG const svg = d3.create("svg").attr("viewBox", [0,0,width2,360]) .attr("width", width2) .attr("height", 360) .attr("overflow","clip") .attr("id","Fig2") dnaSeq.splice(29,1,"G") dnaSeq.splice(30,1,"G") // 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",450) .attr("fill","white") .attr("y",0) .attr("height",340) .attr("width",70) let ku = svg.append("g").attr("id","ku") let ku1 = ku.append("g").attr("id","ku1") let ku2 = ku.append("g").attr("id","ku2") ku1.append("rect") .attr("fill","none") .attr("stroke","black") .attr("stroke-width",3) .attr("x",410) .attr("y",-105) .attr("height",80) .attr("width",50) ku1.append("text") .style("font-family","sans-serif") .style("font-weight","bolder") .attr("x",440) .attr("y",-110) .text("Ku") ku2.append("rect") .attr("fill","none") .attr("stroke","black") .attr("stroke-width",3) .attr("x",510) .attr("y",-105) .attr("height",80) .attr("width",50) ku2.append("text") .style("font-family","sans-serif") .style("font-weight","bolder") .attr("x",510) .attr("y",-110) .text("Ku") let ts1= textures.lines() .size(4) .lighter().lighter() .heavier() .stroke("#000") .background("none") svg.call(ts1); let dnaPKcs = svg.append("g").attr("id","dnaPKcs") let dnaPKcs1 = dnaPKcs.append("g").attr("id","dnaPKcs1") let dnaPKcs2 = dnaPKcs.append("g").attr("id","dnaPKcs2") dnaPKcs1.append("rect") .attr("fill",ts1.url()) .attr("x",410) .attr("y",470) .attr("height",40) .attr("width",50) dnaPKcs2.append("rect") .attr("fill",ts1.url()) .attr("x",510) .attr("y",470) .attr("height",40) .attr("width",50) dnaPKcs1.append("text") .style("font-family","sans-serif") .style("font-weight","bolder") .attr("stroke","white") .attr("stroke-width",4) .attr("x",355) .attr("y",515) .text("DNA-PKcs") dnaPKcs1.append("text") .style("font-family","sans-serif") .style("font-weight","bolder") .attr("x",355) .attr("y",515) .text("DNA-PKcs") dnaPKcs2.append("text") .style("font-family","sans-serif") .style("font-weight","bolder") .attr("stroke","white") .attr("stroke-width",4) .attr("x",530) .attr("y",515) .text("DNA-PKcs") dnaPKcs2.append("text") .style("font-family","sans-serif") .style("font-weight","bolder") .attr("x",530) .attr("y",515) .text("DNA-PKcs") let ligIV= svg.append("g").attr("id","ligIV") ligIV.append("rect") .attr("fill","gray") .attr("opacity",.25) .attr("x",400) .attr("y",400) .attr("height",300) .attr("width",170) ligIV.append("text") .style("font-family","sans-serif") .style("font-weight","bolder") .attr("x",405) .attr("y",470) .text("XRCC4") ligIV.append("text") .style("font-family","sans-serif") .style("font-weight","bolder") .attr("x",405) .attr("y",485) .text("LigIV") // 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 fprime = letG.append("text") .attr("id","fprime") .attr("x",130) .attr("y",40) .attr("class","figNav") .text("f\'") let fsecond = letG.append("text") .attr("id","fsecond") .attr("x",150) .attr("y",40) .attr("class","figNav") .text("f\'\'") let fthird = letG.append("text") .attr("id","fthird") .attr("x",170) .attr("y",40) .attr("class","figNav") .text("f\'\'\'") let backtof = letG.append("text") .attr("id","backtof") .attr("x",190) .attr("y",40) .attr("class","figNav") .text("⇥f") // 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','fprime','fsecond','fthird','backtof']; 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)) } // 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 Beta 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) } }) } strandSwitch(line,0) baseSwitch(false,true,0) hideRect.raise() // Back to A phase a.on("click",e=>{ ku.transition().duration(750) .attr("transform","translate(0,0)") hideRect.transition().duration(750) .attr("x",450) .attr("width",70) figureSwitch("a"); /* b.transition() .delay(800) .style("pointer-events","all") .style("cursor","pointer") */ }) //Starting b phase b.on("click",e=>{ figureSwitch("b"); ku.raise(); ku.transition().duration(750) .attr("transform","translate(0,220)") dnaPKcs.transition().duration(750) .attr("transform","translate(0,0)") }) // starting C phase = PAM failure c.on("click",e=>{ figureSwitch("c"); dnaPKcs.raise(); dnaPKcs.transition().duration(750) .attr("transform","translate(0,-300)") ligIV.transition().duration(750) .attr("transform","translate(0,0)") }) // starting D phase = Seq Failure d.on("click",e=>{ figureSwitch("d"); baseSwitch(false,true,750) ligIV.raise(); ligIV.transition().duration(750) .attr("transform","translate(0,-200)") .style("opacity",1) hideRect.transition().duration(750) .attr("x",450) .attr("width",70) ku1.transition().duration(750) .attr("transform","translate(0,0)") ku2.transition().duration(750) .attr("transform","translate(0,0)") dnaPKcs1.transition().duration(750) .attr("transform","translate(0,0)") dnaPKcs2.transition().duration(750) .attr("transform","translate(0,0)") dnaPKcs.transition().duration(750) .style("opacity",1) ku.transition().duration(750) .style("opacity",1) }) // starting E phase : validating works e.on("click",e=>{ hideRect.transition().duration(750) .attr("x",485) .attr("width",0) ku1.transition().duration(750) .attr("transform","translate(35,0)") ku2.transition().duration(750) .attr("transform","translate(-35,0)") dnaPKcs1.transition().duration(750) .attr("transform","translate(35,0)") dnaPKcs2.transition().duration(750) .attr("transform","translate(-35,0)") baseSwitch(false,false,750) figureSwitch("e"); dnaPKcs.transition().duration(750) .attr("transform","translate(0,-300)") .style("opacity",.4) ligIV.transition().duration(750) .attr("transform","translate(0,-200)") .style("opacity",.4) ku.transition().duration(750) .attr("transform","translate(0,220)") .style("opacity",.4) }) f.on("click",e=>{ figureSwitch("f"); ligIV.transition().duration(750) .attr("transform","translate(0,0)") ku.transition().duration(750) .attr("transform","translate(0,600)") dnaPKcs.transition().duration(750) .attr("transform","translate(0,600)") }) fprime.on("click",e=>{ figureSwitch("fprime"); ligIV.style("opacity",1) ku.style("opacity",1) dnaPKcs.style("opacity",1) ku.raise(); ku.transition().duration(750) .attr("transform","translate(0,220)") dnaPKcs.raise(); dnaPKcs.transition().duration(750) .attr("transform","translate(0,-300)") ligIV.transition().duration(750) .attr("transform","translate(0,0)") baseSwitch(false,true,750) ligIV.raise(); ligIV.transition().duration(750) .attr("transform","translate(0,-200)") hideRect.transition().duration(750) .attr("x",450) .attr("width",70) ku1.transition().duration(750) .attr("transform","translate(0,0)") ku2.transition().duration(750) .attr("transform","translate(0,0)") dnaPKcs1.transition().duration(750) .attr("transform","translate(0,0)") dnaPKcs2.transition().duration(750) .attr("transform","translate(0,0)") }) fsecond.on("click",e=>{ figureSwitch("fsecond"); ligIV.transition().duration(750).style("opacity",.4) ku.transition().duration(750).style("opacity",.4) dnaPKcs.transition().duration(750).style("opacity",.4) pushBP(4, svg, true, parseInt((width2/2)-30),"red") let topBP=d3.selectAll(".topBP") let count=0; for (const bp of topBP) { count++ d3.select(bp).transition().duration(750).delay(count*750) .attr("transform","translate(0,"+parseInt(142+50)+")") } let botBP=d3.selectAll(".botBP") count=0; for (const bp of botBP) { count++ d3.select(bp).transition().duration(750).delay(count*750) .attr("transform","translate(0,"+parseInt(-160-50)+")") } }) fthird.on("click",e=>{ figureSwitch("fthird"); ligIV.transition().duration(750) .attr("transform","translate(0,0)") ku.transition().duration(750) .attr("transform","translate(0,600)") dnaPKcs.transition().duration(750) .attr("transform","translate(0,600)") }) backtof.on("click",e=>{ figureSwitch("f"); hideRect.transition().duration(750) .attr("x",485) .attr("width",0) baseSwitch(false,false,750) d3.selectAll(".topBP").transition().duration(750) .attr("transform","translate(0,-250)") d3.selectAll(".botBP").transition().duration(750) .attr("transform","translate(0,250)") d3.selectAll(".topBP").transition().delay(1000).remove() d3.selectAll(".botBP").transition().delay(1000).remove() }) svg.append("rect").attr("x",-5).attr("y",100).attr("height",150).attr("width",15).attr("fill","white") yield svg.node(); }32:T8a7,legend=({ fig:"FIG. 2.", title:"Non-homologous end joining", legendDiv:"FIG2", currentLegend:"(a) DNA is long molecule that encodes the information needed for a cell to function. Here, it has been broken at a precise site. Cell mechanisms are going to try an repair it. One of those is called \"Non-homologous end joining\", abbreviated in NHEJ, and consists in patching the two ends back together.", a:"(a) DNA is long molecule that encodes the information needed for a cell to function. Here, it has been broken at a precise site. Cell mechanisms are going to try an repair it. One of those is called \"Non-homologous end joining\", abbreviated in NHEJ, and consists in patching the two ends back together.", b:"(b) NHEJ is considered to be the \"default\" form of repair in human cells and rejoins DSBs with minimal processing. After a break has occurred, the ends are quickly bound and protected by proteins named as \"Ku complexes\". Protection of DNA ends by Ku prevents them from being rebuilt or recombined in a different way.", c:"(c) These Ku complexes then recruit other elements, the DNA-PKcs.", d:"(d) Once both these systems are set up, an enzyme will be able to adhere to the cleavage site. This enzyme is DNA Ligase IV (LigIV), whose function is to bind these DNA strands back together.", e:"(e) Under the action of this ligase, the two strands will hence be bound back together.", f:"(f) Once the DNA is stable again, this whole compound will not be able to bind itself to the DNA strands anymore, and will get detached.", fprime:"(f\') Sometimes the repair mechanism can end up producing a sequence that is different from the initial sequence.", fsecond:"(f\'\') This event sometimes inserts or deletes a few (sometimes many) base-pairs. This insertion-deletion event can be noted as \"indels\". Here, four base-pairs have been added.", fthird:"(f\'\') As stated previously, those can also end up in deletions. Each organism, cell type and locus appears to have its own profile of indel: some will have a greater chance of having certain indel types (for example, a 4bp insertion), others will have a very different profile (such as deletions of thousands of base-pairs)." })33:[] 2f:{"title":"Fig. 2. DNA Repair: Non-homologous end joining","cells":[{"id":0,"value":"html`

Fig. 2. DNA Repair: Non-homologous end joining

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

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

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"md`This is a work in progress. Some of the sentences in the legend are directly taken from [here](https://www.nature.com/articles/s41556-019-0425-z).`","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"figStyle","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"import {\n figStyle,\n pushBP,\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"},{"id":177,"value":"import {encreur} from \"@guillaume-levrier/encreur\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"textures = require('textures@1.2.0/dist/textures.js')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}