Public
Edited
Oct 28
4 stars
Insert cell
Insert cell
Insert cell
chs = import("https://esm.sh/chromospace@0.0.9");
Insert cell
Insert cell
Insert cell
{
//~ 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();
}
Insert cell
Insert cell
Insert cell
{
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();
}
Insert cell
Insert cell
Insert cell
chr12pat = chs.get(tan2018Model, "1(pat)");
Insert cell
chr12mat = chs.get(tan2018Model, "21(mat)");
Insert cell
{
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;
}
Insert cell
Insert cell
chr15pat20to40mb = chs.get(tan2018Model, "15(pat):20000000-40000000");
Insert cell
chr15mat20to40mb = chs.get(tan2018Model, "15(mat):0-20000000");
Insert cell
{
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;
}
Insert cell
Insert cell
Insert cell
testChunk = chs.parseTsv(text, { center: true, normalize: true });
Insert cell
Insert cell
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;
}
Insert cell
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more