yah, thats me getting my hands dirty.
Public
Edited
Oct 28, 2024
4 stars
chs = import("https://esm.sh/chromospace@0.0.9");
{
//~ this config specifies how the 3D model will look
const viewConfig = ({
binSizeScale: 0.01,
coloring: "constant",
});
//~ create a scene
let chromatinScene = chs.initScene();
chromatinScene = chs.addChunkToScene(chromatinScene, testChunk, viewConfig);
const [renderer, canvas] = chs.display(chromatinScene, { alwaysRedraw: false});
//~ ObservableHQ mechanism for clean-up after cell re-render
invalidation.then(() => renderer.endDrawing());
return renderer.getCanvasElement();
}
{
const viewConfig = ({
binSizeScale: 0.01,
coloring: "constant",
mark: "box",
});
//~ create a scene
let chromatinScene = chs.initScene();
chromatinScene = chs.addModelToScene(chromatinScene, tan2018Model, viewConfig);
const [renderer, canvas] = chs.display(chromatinScene, { alwaysRedraw: false});
//~ ObservableHQ mechanism for clean-up after cell re-render
invalidation.then(() => renderer.endDrawing());
return renderer.getCanvasElement();
}
chr12pat = chs.get(tan2018Model, "1(pat)");
chr12mat = chs.get(tan2018Model, "21(mat)");
{
let chromatinScene = chs.initScene();
const selectedModel = {
parts: [chr12pat[0], chr12mat[0]],
};
const viewConfig = {
// binSizeScale: binScale,
// coloring: "constant",
coloring: "scale",
};
chromatinScene = chs.addModelToScene(chromatinScene, selectedModel, viewConfig);
const [renderer, canvas] = chs.display(chromatinScene, { alwaysRedraw: false});
//~ ObservableHQ mechanism for clean-up after cell re-render
invalidation.then(() => renderer.endDrawing());
return canvas;
}
chr15pat20to40mb = chs.get(tan2018Model, "15(pat):20000000-40000000");
chr15mat20to40mb = chs.get(tan2018Model, "15(mat):0-20000000");
{
const selectedModel = {
parts: [chr15pat20to40mb[0], chr15mat20to40mb[0]],
};
let chromatinScene = chs.initScene();
const viewConfig = {
coloring: "constant",
binSizeScale: 0.01,
mark: "box",
makeLinks: false,
};
chromatinScene = chs.addModelToScene(chromatinScene, selectedModel, viewConfig);
const [renderer, canvas] = chs.display(chromatinScene, { alwaysRedraw: false});
//~ ObservableHQ mechanism for clean-up after cell re-render
invalidation.then(() => renderer.endDrawing());
return canvas;
}
testChunk = chs.parseTsv(text, { center: true, normalize: true });
async function fetchExampleWholeGenomeModel() {
const urlTan2018 = "https://dl.dropboxusercontent.com/scl/fi/lzv3ba5paum6srhte4z2t/GSM3271406_pbmc_18.impute.3dg.txt?rlkey=dc7k1gg5ghv2v7dsl0gg1uoo9&dl=0";
const response = await fetch(urlTan2018);
const fileText = await response.text();
const tan2018Model = chs.parse3dg(fileText , { center: true, normalize: true }); //~ parseTsv(data, center = true) ?
return tan2018Model;
}
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.
