30:[] 2e:{"title":"Cas9 using NGL","cells":[{"id":0,"value":"md`# Cas9 using NGL\n[NGL](https://github.com/arose/ngl) is a THREE-based molecule vizualization library. It is used by the Research Collaboratory for Structural Bioinformatics - Protein Data Bank ([RCSB PBD](https://www.rcsb.org/structure/5F9R)) to make proteins easier for everyone to see! Below is Cas9, as per an [article](https://science.sciencemag.org/content/351/6275/867) published by J. Doudna & E. Nogales. You can preview any other molecule by entering its RCSB code below. You can try something like **6U7H**.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"viewof moleculeCode = text({placeholder: \"7A93\", description: \"Change PDB code above\",value:\"7A93\",submit:\"Load\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"viewport = DOM.element(\"div\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"references = md`\n### References\n

AS Rose, AR Bradley, Y Valasatava, JM Duarte, A Prlić and PW Rose. _Web-based molecular graphics for large complexes._ ACM Proceedings of the 21st International Conference on Web3D Technology (Web3D '16): 185-186, 2016. doi:[10.1145/2945292.2945324](https://dl.acm.org/doi/10.1145/2945292.2945324)
AS Rose and PW Hildebrand. _NGL Viewer: a web application for molecular visualization._ Nucl Acids Res (1 July 2015) 43 (W1): W576-W579 first published online April 29, 2015. doi:[10.1093/nar/gkv402](https://academic.oup.com/nar/article/43/W1/W576/2467902)

`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"viewport.id=\"viewport\";","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"viewport.style.height=\"400px\";","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"//stage.setSpin(true);\nstage.setSpin(false);","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"stage.loadFile(\"rcsb://\"+moleculeCode).then(d=>{\n d.addRepresentation(\"cartoon\",{color: \"chainname\"})\n stage.autoView();\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":183,"value":"// schemeId = {\n// return NGL.ColormakerRegistry.addScheme(function (params) {\n// this.atomColor = function (atom) {\n// if (atom.chainname == 'A') {\n// // ACE2\n// return 0xFF0000 // red\n// }\n// if (s_mutations[''+(atom.resno-333)]) {\n// return 0xffA500 // orange\n// } else {\n// return 0x0000FF // blue\n// }\n// }\n// })\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":176,"value":"nglReferences = md`\n### NGL References\n

[addRepresentation options](https://nglviewer.org/ngl/api/manual/usage/molecular-representations.html)
[PDB supported features](https://nglviewer.org/ngl/api/manual/usage/file-formats.html#pdb-pqr)

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"stage = new NGL.Stage( \"viewport\" ,{ backgroundColor: \"black\" });","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"NGL = require(\"https://cdn.rawgit.com/arose/ngl/v2.0.0-dev.37/dist/ngl.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"import {text} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}