Engineering @huggingface 🤗. Data visualization enthusiast. Creative technologist. Open for collaborations.
Published
Edited
Feb 16, 2022
Importers
18 stars
colors = Array.from({ length: numPoints }, () =>
Array.from({ length: 3 }, Math.random)
)
labels = Array.from({ length: numPoints }, (_, i) => `label ${i}`)
// random
points = Array(numPoints)
.fill()
.map((e) => {
const rp = Math.random();
const theta = 2 * Math.PI * Math.random();
const phy = Math.acos(2 * Math.random() - 1);
return [
100 * Math.cos(theta) * Math.sin(phy),
100 * Math.sin(theta) * Math.sin(phy),
100 * Math.cos(phy)
];
})
viewof containerEl = {
const containerElement = DOM.element('div');
containerElement.style.position = "relative";
containerElement.style.height = "500px";
const scatterGL = new ScatterGL(containerElement, {
onHover: point => {
mutable point = Object.assign(mutable point, { hover: 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
}
}
});
return Object.assign(containerElement, { value: scatterGL });
}
init = {
const dataset = new ScatterGL.Dataset(
points,
labels.length > 0
? labels.map((label, i) => ({
label: label,
labelIndex: i
}))
: []
);
if (colors.length > 0) {
containerEl.setPointColorer((i) => {
return (
((colors[i][0] * 255) << 16) +
((colors[i][1] * 255) << 8) +
colors[i][2] * 255
);
});
}
containerEl.render(dataset);
containerEl.resize();
}
numPoints = 1000
mutable point = ({})
ScatterGL = {
const { ScatterGL } = await require.alias({
THREE: "three@0.126/build/three.min.js"
})("scatter-gl@0.0.12");
return ScatterGL;
}
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.
