PDB_ID = "2J58"
sites = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,5,5,5,5,5,6,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,0,0,0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0,0,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,6,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4]
// key for colors
// 0 -- unlabeled (grey)
// 1 -- domain 1 (light blue)
// 2 -- domain 2 (magenta)
// 3 -- domain 3 (orange)
// 4 -- domain 4 (yellow)
// 5 -- n terminal domain (lime green)
// 6 -- sites subject to selection (black)
colors = [0xEFEFEF, 0x3cdfff, 0xFF00FF, 0xF25C00, 0xFBFF00, 0x23FF00, 0x000000]
stage = {
let s = new NGL.Stage( "viewport" ,{ backgroundColor: "white" })
return s
};
schemeId = {
return NGL.ColormakerRegistry.addScheme(function (params) {
this.atomColor = function (atom) {
console.log(atom.resno)
return colors[sites[atom.resno]]
}
})
}
structure = {
const molecule = "rcsb://" + PDB_ID;
let str;
await stage.loadFile(molecule).then(d=>{
//d.addRepresentation("cartoon", { color: "chainname" })
d.addRepresentation("cartoon", {color: schemeId, sele: ':A'})
d.addRepresentation("cartoon", {color: schemeId, sele: ':B'})
d.addRepresentation("cartoon", {color: schemeId, sele: ':C'})
d.addRepresentation("cartoon", {color: schemeId, sele: ':D'})
d.addRepresentation("cartoon", {color: schemeId, sele: ':E'})
d.addRepresentation("cartoon", {color: schemeId, sele: ':F'})
d.addRepresentation("cartoon", {color: schemeId, sele: ':G'})
d.addRepresentation("cartoon", {color: schemeId, sele: ':H'})
stage.viewerControls.orient([-20.539660470483696, 36.855886488387455, 169.01377507401003, 0, -131.40719233262686, 107.36439238787902, -39.3818135221192, 0, -112.4996103853917, -132.137886558654, 15.142879012807075, 0, -9.239999771118164, -95.38300323486328, -29.020000457763672, 1]);
//stage.autoView();
stage.setSpin (false);
str = d;
})
return str;
}
stage.viewerControls.getOrientation()
NGL = require("https://cdn.rawgit.com/arose/ngl/v2.0.0-dev.37/dist/ngl.js")
import {text} from "@jashkenas/inputs"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
