2c:null 2d:["$","title",null,{"children":"Cas9 using NGL | jzehr | Observable"}] 32:[] 30:{"id":"725e57f652a6312c","slug":"cas9-using-ngl","title":"Cas9 using NGL","thumbnail":"504205524cea834b9b2f6dbcf600169ff8f501504676a2a1c5b48061f84b0e1e","access_level":"public","create_time":"$D2021-01-15T14:59:10.129Z","update_time":"$D2021-03-05T14:54:30.507Z","view_time":null,"first_public_time":"$D2022-08-22T21:53:13.391Z","has_unpublished_edits":null,"fork":{"id":"94830678170313cd","slug":"cas9-using-ngl","title":"Cas9 using NGL","owner":{"id":"f8fed3350d7fafa7","login":"guillaume-levrier","name":"Guillaume Levrier"}},"stars":0,"starred":false,"owner":{"type":"team","id":"40b28edc795fd946","login":"jzehr","name":"","avatar_url":"https://avatars-next.observableusercontent.com/8251781f55238f349c74f3d7bf575c95093f68273d09cb0522876ec39e42e082","tier":"starter_2024"},"version":190,"publish_version":190,"role":null,"authored":false,"authors":[{"type":"individual","id":"a0adf562a202d72a","login":"jzehr","name":"","avatar_url":"https://avatars-next.observableusercontent.com/8251781f55238f349c74f3d7bf575c95093f68273d09cb0522876ec39e42e082","tier":null}],"members":[{"type":"individual","id":"a0adf562a202d72a","login":"jzehr","name":"","avatar_url":"https://avatars-next.observableusercontent.com/8251781f55238f349c74f3d7bf575c95093f68273d09cb0522876ec39e42e082","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"viewof moleculeCode = text({placeholder: \"7A93\", description: \"Change PDB code above\",value:\"7A93\",submit:\"Load\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"viewport = DOM.element(\"div\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"viewport.id=\"viewport\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"viewport.style.height=\"400px\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"//stage.setSpin(true);\nstage.setSpin(false);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"stage = new NGL.Stage( \"viewport\" ,{ backgroundColor: \"black\" });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"import {text} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"