yah, thats me getting my hands dirty.
Public
Edited
Mar 27
chs = import("https://esm.sh/chromospace@0.0.9");
renderer.getCanvasElement();
// Used when no selection is made (selectbox: "whole")
viewConfig = ({
binSizeScale: 0.005,
coloring: "constant",
});
// Used for highlighted region
selected_viewConfig = ({
binSizeScale: 0.02,
coloring: "constant",
color: "orange",
mark: "box",
makeLinks: true,
});
// Used for the de-emphasized rest of the model
unselected_ViewConfig = ({
binSizeScale: 0.005,
coloring: "constant",
color: "#a3a3a3",
makeLinks: false,
});
renderer = {
let chromatinScene = chs.initScene();
if (selectedChromosome === "whole") {
chromatinScene = chs.addModelToScene(chromatinScene, tan2018Model, viewConfig);
} else {
const [selectedPartA, selectionA] = chs.get(tan2018Model, selectedChromosome);
const selectedModelA = {
parts: [selectedPartA],
};
chromatinScene = chs.addModelToScene(chromatinScene, tan2018Model, unselected_ViewConfig);
chromatinScene = chs.addModelToScene(chromatinScene, selectedModelA, selected_viewConfig);
}
const [renderer, canvas] = chs.display(chromatinScene, { alwaysRedraw: false});
//~ ObservableHQ mechanism for clean-up after cell re-render
invalidation.then(() => renderer.endDrawing());
// return canvas;
return renderer;
}
{
const selString = selectedChromosome;
const res = chs.get(tan2018Model, selString);
if (res) {
const [selectedPartA, selectionA] = res;
// viewConfig.selections = [selectionA];
// renderer.updateViewConfig();
return selectionA;
} else {
// if (selectedChromosome == "whole") {
// viewConfig.selections = [];
// renderer.updateViewConfig();
// return [];
// }
return null;
}
}
tan2018Model = fetchExampleWholeGenomeModel();
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;
}
chromosomes = {
const chromosomes = tan2018Model.parts.map(p => p.label).sort((a, b) => {
// Extract numbers from strings
const numA = parseInt(a);
const numB = parseInt(b);
// Compare numbers
if (numA !== numB) {
return numA - numB; // Sort by numbers if they are different
} else {
// If numbers are equal, sort based on entire string
return a.localeCompare(b);
}
})
chromosomes.push("whole");
return chromosomes;
};
viewof patMatCheckbox = Inputs.checkbox(["mat", "pat"])
//trevor:
// viewof pos = {
// let canvas = renderer.getCanvasElement({ value: "api" });
// canvas.value = renderer
// return canvas;
// }
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.
