viewport = {
let v = DOM.element("div");
v.id="viewport";
v.style.height = "400px"
return v;
}
tooltip = {
let tt = document.createElement("div");
document.body.appendChild(tt);
Object.assign(tt.style, {
display: "none",
position: "absolute",
zIndex: 10,
pointerEvents: "none",
backgroundColor: "rgba(0, 0, 0, 0.6)",
color: "lightgrey",
padding: "0.5em",
fontFamily: "sans-serif"
});
return tt;
}
scale = d3.scaleLinear()
.domain(d3.extent(diversity))
.range(['#FFFFFF', '#FF0000'])
schemeId = {
return NGL.ColormakerRegistry.addScheme(function (params) {
this.atomColor = function (atom) {
if (['A','B','C'].includes(atom.chainname)) {
// white to red
return parseInt(d3.color(scale(diversity[atom.residue.resno])).formatHex().slice(1), 16);
}
else {
// light blue
return 0xADD8E6;
}
}
})
}
stage = {
let s = new NGL.Stage( "viewport" ,{ backgroundColor: "white" })
s.mouseControls.remove("hoverPick");
s.signals.hovered.add(function (pickingProxy) {
if (pickingProxy && (pickingProxy.atom || pickingProxy.bond)){
var atom = pickingProxy.atom || pickingProxy.closestBondAtom;
var mp = pickingProxy.mouse.position;
let residue = atom.residue;
tooltip.innerText = residue.index + ' - index\n' +
residue.resno + ' - resno\n' +
residue.resname + ' - long resname\n' +
three_to_one[residue.resname] + ' - short resname\n' +
residue.chainname + ' - chain name\n' +
diversity[residue.resno] + ' - diversity\n';
tooltip.style.bottom = window.innerHeight - mp.y + 3 + "px";
tooltip.style.left = mp.x + 3 + "px";
tooltip.style.display = "block";
} else {
tooltip.style.display = "none";
}
})
return s
};
component = {
const molecule = "rcsb://6XCM";
let str;
stage.removeAllComponents();
await stage.loadFile(molecule).then(d=>{
d.addRepresentation("rope", {color: schemeId})
stage.autoView();
stage.setSpin (false);
str = d;
})
return str;
}
html`<div id='alignment_div'>`
NGL = require("ngl@2.0.0-dev.38")
d3=require("d3")
bioseq = require("bioseq")
React = r('react')
r = require.alias({
react: "react@16/umd/react.production.min.js",
"react-dom": "react-dom@16/umd/react-dom.production.min.js"
})
html`<link type="text/css" href="https://stephenshank.com/alignment.css" rel="stylesheet">`
ReactDOM = r('react-dom')
three_to_one = {
return {
"ALA": "A",
"CYS": "C",
"ASP": "D",
"GLU": "E",
"PHE": "F",
"GLY": "G",
"HIS": "H",
"ILE": "I",
"LYS": "K",
"LEU": "L",
"MET": "M",
"ASN": "N",
"PRO": "P",
"GLN": "Q",
"ARG": "R",
"SER": "S",
"THR": "T",
"VAL": "V",
"TRP": "W",
"TYR": "Y"
}
}
component.defaultParameters
diversity_full = {
return FileAttachment("diversity_info_SC2.GLUE_filled.csv").csv()
}
diversity = diversity_full.map(row => +row.diversity)
import {legend} from "@d3/color-legend"
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.
