Public
Edited
Mar 11, 2021
2 forks
Insert cell
md`# NGL Viewer from uploaded file MWE`
Insert cell
viewport = {
let v = DOM.element("div");
v.id="viewport";
v.style.height = "400px"
return v;
}
Insert cell
stage = {
let s = new NGL.Stage( "viewport" ,{ backgroundColor: "white" })
return s;
};
Insert cell
structure = {
let str;
stage.removeAllComponents();
/*
const molecule = "rcsb://7C8V";
await stage.loadFile(molecule).then(d=>{
*/
var stringBlob = new Blob( [ pdbString ], { type: 'text/plain'} );
stage.loadFile(stringBlob, { ext: "pdb" }).then(d => {
d.addRepresentation("cartoon")
//stage.autoView();
stage.setSpin (false);
str = d;
})
return str;
}
Insert cell
pdbString = FileAttachment("7c8v.pdb").text()
Insert cell
NGL = require("https://cdn.rawgit.com/arose/ngl/v2.0.0-dev.32/dist/ngl.js")
Insert cell

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.
Learn more