html `<svg id='genemap'>`
mapviz = {
d3.select()
}
stage1 = {
let s = new NGL.Stage( "viewport1" ,{ backgroundColor: "white" })
return s
};
structure1 = {
let str;
const molecule = "rcsb://6JX7";
await stage1.loadFile(molecule).then(d => {
d.addRepresentation("cartoon", { color: schemeId, sele: ':A'})
stage1.autoView();
str = d;
})
return str;
}
scale = d3.scaleLinear()
//.domain([0, 1, d3.max(_.pluck(processed_data, 'omega'))])
.domain([0, 1, 2])
.range(['#000000', '#EEEEEE', '#FF0000'])
schemeId = {
return NGL.ColormakerRegistry.addScheme(function (params) {
this.atomColor = function (atom) {
let residue_number = atom.residue.resno;
let omega = processed_data[residue_number - 1] || 1;
return parseInt(
d3.color(scale(omega)).formatHex().slice(1), 16
);
}
})
}
NGL = require("https://cdn.rawgit.com/arose/ngl/v2.0.0-dev.37/dist/ngl.js")
stage1.viewerControls.getOrientation()
import {Table} from "@observablehq/inputs"
_ = require("underscore")
processed_data = {
let pd = {};
raw_data.forEach(datum => {
if (datum.UNALIGNED_CODON_SITE_IN_SPIKE == 'X') return;
let alpha = +datum.alpha,
beta = +datum['beta (FIPV1)'],
omega = alpha == 0 ? 0 : Math.min(beta / alpha, 2);
pd[+datum.UNALIGNED_CODON_SITE_IN_SPIKE] = omega;
});
return pd
}
raw_data = FileAttachment('FCOV1.mapped.CFEL.FINAL.csv').csv()
d3 = require('d3@6')
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.
