Unlisted
Edited
Jul 23, 2024
P = {
const u = d3.randomNormal.source(d3.randomLcg(42))();
const P = new Float32Array(4e6);
let x = 0;
for (let i = 0; i < P.length; ++i) {
if (i % 1000 === 0) x = 0;
P[i] = x += u();
}
return { X: P.slice(0, P.length / 2), Y: P.slice(P.length / 2) };
}
Plot.plot({
aspectRatio: 1,
marks: [
Plot.line(P.X, {
x: P.X,
y: P.Y,
strokeWidth: 0.25,
stroke: (d, i) => Math.floor(i / 1000),
strokeOpacity: 0.1,
tip: true
})
]
})
Plot.plot({
aspectRatio: 1,
marks: [
Plot.raster(P.X, {
x: P.X,
y: P.Y,
fill: (d, i) => Math.floor(i / 1000),
pixelSize: 0.25,
tip: true
})
]
})
Plot.plot({
aspectRatio: 1,
marks: [
Plot.line(P.X, {
x: P.X,
y: P.Y,
stroke: (d, i) => Math.floor(i / 1000),
tip: true,
render: (index, scales, values, dimensions, context, next) => {
const ctx = DOM.context2d(dimensions.width, dimensions.height);
let c;
ctx.globalAlpha = 0.05;
for (const i of index) {
if (values.stroke[i] !== c) {
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = c = values.stroke[i];
ctx.moveTo(values.x[i], values.y[i]);
}
ctx.lineTo(values.x[i], values.y[i]);
}
return svg`<foreignObject width=${dimensions.width} height=${dimensions.height}>${ctx.canvas}`;
}
})
]
})
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.
