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":1588003639332.721,"size":85386}] 2f:{"title":"Illustration interactive du SARS-CoV-2","cells":[{"id":0,"value":"md`# Illustration interactive du SARS-CoV-2\nCe carnet présente une illustration interactive facile à intégrer (allez voir [ici](https://observablehq.com/@observablehq/downloading-and-embedding-notebooks) pour apprendre comment faire) des principaux éléments structurels du coronavirus SARS-CoV-2. Vous pouvez l'adapter à votre façon en modifiant les cellules ci-après. N'hésitez pas à créer une branche pour la modifier!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"explainer = html`

Version interactive par by Guillaume Levrier - Visualisation des protéines avec NGL viewer sur la bases de données de RCSB PCB database - Illustration par Desiree Ho via l'Innovative Genomics Institute.

SARS-CoV-2

Un virus est fondamentalement un morceau d'information génétique protégé par une barrière moléculaire. Passez votre souris sur les parties colorée pour en apprendre plus sur sa structure.

`","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:\"ARN\",content:\"Le génome du SARS-CoV-2 est encodé sur un seul brin d'ARN. Il est assez restreint, avec moins de 30 000 paires de bases qui encodent 29 protéines. Celles-ci lui permettent de passer au travers d'une partie de la réponse immunitaire du corps humain et de se multiplier.\"},\n eprot:{title:\"Enveloppe\",content:\"Ces protéines aident le virus à garder sa forme, et pourraient jouer un rôle de régulation des gènes de nos cellules quand ils les envahissent.\"},\n sprot:{title:\"Couronnes\",content:\"Elles donnent leur nom aux 'corona'-virus. Elles peuvent se déployer et s'arrimer aux cellules humaines, en particulier certaines qu'on peut trouver dans notre système respiratoire.\",RCSB:\"6VSB\"},\nmprot:{title:\"Membrane\",content:\"La membrane de lipides est aussi maintenue par ces protéines, l'ensemble ayant pour objet de contenir et de protéger le génome du 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:\"Un virus est fondamentalement un morceau d'information génétique protégé par une barrière moléculaire. Passez votre souris sur les parties colorée pour en apprendre plus sur sa structure.\"})","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":691,"value":"html ``\n","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}