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

Purpose-built for displays of data