scatterGLContainer = {
const containerElement = DOM.element("div");
containerElement.style.position = "relative";
containerElement.style.height = `${height}px`;
yield containerElement;
const scatterGL = new ScatterGL(containerElement, {
onHover: (point) => {
// mutable point = Object.assign(mutable point, { hover: point });
console.log(json.files[point])
},
onClick: (point) => {
// mutable point = Object.assign(mutable point, { click: point });
},
renderMode: "POINT",
styles: {
point: {
colorUnselected: "rgba(120, 120, 120, 0.7)",
colorNoSelection: "rgba(51, 51, 51, 0.7)",
colorSelected: "rgba(255, 10, 10, 0.7)",
colorHover: "rgba(255, 11, 79, 0.7)",
scaleDefault: 1.0,
scaleSelected: 1.2,
scaleHover: 2
}
}
});
function update(dataset) {
scatterGL.render(dataset);
}
function setColor(data) {
scatterGL.setPointColorer((i) => {
return (
((data[i][0] * 255) << 16) +
((data[i][1] * 255) << 8) +
data[i][2] * 255
);
});
}
return Object.assign(containerElement, { update, setColor });
}
json = FileAttachment("lv.json").json()
// data = json.files
UMAP = (await require("umap-js@1.3.1")).UMAP
fixed = new UMAP({
nComponents: !is3d ? 2 : 3,
minDist: 0.1,
nNeighbors: 15
}).fit(json.encodings)
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.
