Public
Edited
Mar 28, 2024
1 fork
Insert cell
Insert cell
viewof selectedPointIndices = createScatterplotView({ points, invalidation })
Insert cell
points2 = {// Create a random integer function

function getRandomNumber() {
return Math.random() * 2 - 1; // This will return a random number between -1 and 1
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
const points2 = [];

for (let i = 0; i < 100; i++) {
const x = getRandomNumber();
const y = getRandomInt(0, 100);
const fifthComponent = Math.floor(i / 10); // Every 10 points will have the same fifth component
points2.push([x, y, 0, 0, fifthComponent]);
}

// const points3 = [
// [1, 1, 0, 0, 0],
// [2, 2, 0, 0, 0],
// [3, 3, 0, 0, 1],
// [4, 4, 0, 0, 1],
// [5, 5, 0, 0, 0],
// ];
return points2;
}
Insert cell
/*
* Simple helper to create a dynamic viewof scatterplot based on:
* - https://observablehq.com/@radames/hello-regl-scatterplot
* - https://observablehq.com/@fil/hello-regl-scatterplot
*/

function createScatterplotView({
width = 600,
height = 340,
pointSize = 5,
points = [[0, 0]],
invalidation
} = {}) {
const canvas = document.createElement("canvas");
canvas.style.background = "black";
const scatterplot = createScatterplot({
canvas,
pointSize,
width,
height,
lassoOnLongPress: true,
backgroundColor: "grey"
});

scatterplot.subscribe("select", ({ points }) => {
canvas.value = points;
canvas.dispatchEvent(new Event("input"));
});

scatterplot.set({ pointColor: "white", showPointConnections: true, pointConnectionSize: 2, pointConnectionColor: "yellow"}); // color by the third value
scatterplot.draw(points2);

invalidation?.then(() => scatterplot.destroy());

return canvas;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more