Dynamic Scatter Plot
viewof y = Inputs.range([0, 255], { step: 1 })
plot = {
var last = data.length === 0 ? 0 : data[data.length - 1][0];
function filter(s) {
return y == 0 ? true : s[0] > last - y;
}
return Plot.plot({
grid: true,
style: { background: "inherit" },
color: {
domain: ["x1", "x2"],
range: ["red", "blue"],
legend: true
},
x: {
domain: ((x) => [y == 0 ? 0 : x - y, x])(last)
},
marks: [
Plot.dot(data.filter(filter), { fill: "red" }),
Plot.dot(data2.filter(filter), { fill: "blue" }),
Plot.ruleX([0]),
Plot.ruleY([0])
]
});
}
data = []
data2 = []
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.
