Published
Edited
Apr 28, 2020
2 forks
4 stars
elements=({
RNA:{title:"RNA",content:"The SARS-CoV-2 genome is encoded in a single RNA strand. It is quite small, less than 30 000 letters (also known as base pairs) long that encode for 29 proteins. This enables it to bypass some the human body's immune response and make millions copies of itself."},
eprot:{title:"Envelope Proteins",content:"This protein helps the virus keep its outer shape, and might have a role in regulating how our own genes behave once it has invaded our cells."},
sprot:{title:"Spike Proteins",content:"Their crown-like shape (which is why they are classified as 'corona'-virii) can extend and bind themselves to human cells, especially those found in our respiratory system.",RCSB:"6VSB"},
mprot:{title:"Membrane Proteins",content:"They form part of the fat bubble-shaped complex that contains and protects the genome of the virus."}
})
animate = () => {
for (var el in elements) { // Iterate on {elements}
let elem=cov.selectAll('#'+el); // Select SVG groups relative to element
let elObj=elements[el]; // Create a var containing title/content
elem.on("mouseover",e=>{ // add hover event listener (using D3 syntax)
cov.selectAll("path").transition().duration(t).style("opacity",.15) // dim SVG
elem.selectAll("path").transition().duration(t).style("opacity",1) // undim this particular element
legendUpdate({title:elObj.title,content:elObj.content}) // update the legend
stage.removeAllComponents(); // purge NGL protein viewer
if(elObj.hasOwnProperty("RCSB")){ // if element has a RCSB code
loadRCSB(elObj.RCSB); // load that protein in NGL
}
})
elem.on("mouseout",e=>{ // add D3 mouseout event listener
cov.selectAll("path").transition().duration(t).style("opacity",1); // undim everything
legendUpdate(legendBasic); // revert legend to basic
})
}
}
animate()
stage.setSpin(true);
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
