31:T517,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 }) } }32:[{"id":"11a04038ef43c4009d7cdd028b92c4d361ff11ddf4060bb0ff73b1aa3ffb37c7fa88bd266bd65e70429eb395a1386971167e2e12260053510ef86fbace318508","href":"https://static.observableusercontent.com/files/11a04038ef43c4009d7cdd028b92c4d361ff11ddf4060bb0ff73b1aa3ffb37c7fa88bd266bd65e70429eb395a1386971167e2e12260053510ef86fbace318508","name":"scientific@2.svg","type":"image/svg+xml","lastModified":1587921754652.292,"size":85386}] 2f:{"title":"SARS-CoV-2 interactive explainer","cells":[{"id":0,"value":"md`# SARS-CoV-2 interactive explainer\nThis notebook presents an embeddable (click [here](https://observablehq.com/@observablehq/downloading-and-embedding-notebooks) to learn how) interactive explainer of some the structural elements of the SARS-CoV-2 coronavirus. The important functions are commented, you can scroll down to have an idea of how it works. Don't hesitate to fork it for your own purpose!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"explainer = html`\n\n

Interactive version by Guillaume Levrier - Protein vizualisation with NGL viewer using data from RCSB PCB database - Art by Desiree Ho for the Innovative Genomics Institute.

SARS-CoV-2

A virus is basically a piece of genetic information wrapped in ball made of molecules. Hover a part of the schema on the left side to learn more about the proteins that compose this virus.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":652,"value":"md`The 'elements' objects contain the title, description and RCSB code (when applicable) of the virus' illustrated elements. Each of its properties is named after the relevant SVG group (i.e. id=\"*RNA*\") in the illustration. This way, it becomes easy to iterate on this object to assign event listeners to the elements we want to target. Note that the object syntax isn't the traditional JS syntax but rather the [Observable syntax](https://observablehq.com/@observablehq/observables-not-javascript).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":562,"value":"elements=({\n 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.\"},\n 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.\"},\n 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\"},\nmprot:{title:\"Membrane Proteins\",content:\"They form part of the fat bubble-shaped complex that contains and protects the genome of the virus.\"}\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":659,"value":"md `The \"animate\" function iterates on the 'elements' object properties, targets the SVG groups whose ID are the same as the designated property, and assigns events listeners. The events listeners in turn use the data stored in the currently designated property. Note that when dealing with SVG, the [D3 syntax](https://observablehq.com/@d3/learn-d3) is used instead of a vanilla JS syntax.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":573,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":297,"value":"legendUpdate = lgd => {\n let legend = document.getElementById(\"legend\");\n legend.innerHTML=\"\";\n let title = DOM.element(\"h3\");\n title.style=\"text-align:center\"\n title.innerText=lgd.title;\n let content = DOM.element(\"p\");\n content.style=\"text-align:justify\";\n content.innerText=lgd.content;\n legend.appendChild(title);\n legend.appendChild(content);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":581,"value":"animate()","pinned":true,"hidden":false,"mode":"ojs"},{"id":590,"value":"legendBasic=({title:\"SARS-CoV-2\",content:\"A virus is basically a piece of genetic information wrapped in ball. Hover colored parts of the illustration to learn more about some of the proteins that compose this virus.\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"cov.selectAll(\"path\").style(\"cursor\",\"pointer\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"cov = d3.select(\"svg\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"t=450;","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"cov.attr(\"height\",400);","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"document.getElementById(\"svg\").innerHTML=svg;","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"svg=FileAttachment(\"scientific@2.svg\").text();","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"NGL = require(\"https://cdn.rawgit.com/arose/ngl/v2.0.0-dev.37/dist/ngl.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":367,"value":"stage = new NGL.Stage( \"canvas\" ,{ backgroundColor: \"white\" });","pinned":false,"hidden":false,"mode":"ojs"},{"id":382,"value":"loadRCSB = moleculeCode => {\nstage.removeAllComponents();\nstage.loadFile(\"rcsb://\"+moleculeCode).then(d=>{\n d.addRepresentation(\"spacefill\",{color: \"moleculetype\"})\n stage.autoView();\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":380,"value":"stage.setSpin(true);","pinned":true,"hidden":false,"mode":"ojs"},{"id":676,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":706,"value":"html ``\n","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}