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":1588012466454.348,"size":85386}] 2f:{"title":"SARS-CoV-2 互动式说明","cells":[{"id":0,"value":"md`# SARS-CoV-2 互动式说明\n本记事簿所展示的，是一个对 SARS-COV-2 的部分结构性要素的可嵌入式互动说明。该说明的重要功能含解释，读者可以下滑以了解其操作方式。读者也可以根据自身需要自由复制且使用以下代码。\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"explainer = html`

中文翻译:李诗梅 - 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

理论而言，一个病毒即一份包裹在分子构成的球状外壳内的基因信息。请旋转左侧示意图以了解更多关于组成该病毒的蛋白质。

`","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:\"核糖核酸\",content:\"SARS-CoV-2的基因组是载在一个单链核糖核酸上。它的体积比较小，小于由30000个字符（又名为碱基对）组成的29个蛋白。这使它能够绕过人类的免疫系统并且自身复制出百万个拷贝。\"},\n eprot:{title:\"封套蛋白\",content:\"该蛋白帮助病毒保持其外表形状，并且一旦病毒进入我们的细胞，它也可能在调节我们自身的基因行为方面起到作用。\"},\n sprot:{title:\"合成棘蛋白\",content:\"它们的皇冠形状（即为何它们被归类为冠状病毒）可延申并吸附到人类的细胞上，尤其是存在于我们呼吸道里的细胞。\",RCSB:\"6VSB\"},\nmprot:{title:\"膜蛋白\",content:\"它们组成包含且保护病毒基因组的泡状结构。\"}\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:\"理论而言，一个病毒即一份包裹在分子构成的球状外壳内的基因信息。请旋转左侧示意图以了解更多关于组成该病毒的蛋白质。\"})","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":685,"value":"html ``\n","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}