Public
Edited
Apr 4, 2023
Plot.plot({
marks: [
Plot.dot(data, { x: "t", y: "value", stroke: "color" }),
Plot.auto(t1Line, { x: "x", y: "y", color: "green" }),
Plot.auto(t2Line, { x: "x", y: "y", color: "green" })
]
})
t1Line = [
{ x: t1, y: 0 },
{ x: t1, y: maxValue }
]
t2Line = [
{ x: t2, y: 0 },
{ x: t2, y: maxValue }
]
maxValue = 1000
data = {
const selectedT1 = new Set(selectedFirst);
const selectedT2 = new Set(selectedAfter);
const res = [];
for (const p of rawData) {
const color =
selectedT1.has(p) && selectedT2.has(p)
? "red"
: selectedT1.has(p)
? "darkgreen"
: selectedT2.has(p)
? "blue"
: "rgba(0, 0, 0, 0.3)";
res.push({ ...p, color });
}
return res;
}
t1 = 600
selectedFirst = getBest(t1, selectSize)
selectedAfter = getBestAfter(selectedFirst, t2)
function getBest(t, n) {
const points = rawData.filter((p) => p.t <= t);
points.sort((a, b) => a.value - b.value);
const res = [];
while (points.length > 0 && res.length < n) {
const p = points.pop();
res.push(p);
}
res.reverse();
return res;
}
function getBestAfter(points, now) {
if (points.length <= 0) return getBest(now, selectSize);
const lastPT = Math.max(...points.map((p) => p.t));
const res = rawData.filter((p) => p.t <= now && p.t > lastPT);
res.sort((a, b) => b.value - a.value);
return res.slice(0, selectSize);
}
selectSize = 10
t2 = 700
size = 100
minT = 0
maxT = 1000
function getRandomTime() {
return Math.round(Math.random() * (maxT - minT) + minT);
}
function getRandomValue() {
return Math.round(Math.random() * maxValue);
}
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.
