Published
Edited
Dec 15, 2019
1 fork
1 star
{
const context = DOM.context2d(width, height);
context.fillRect(0, 0, width, height);
context.globalAlpha = 1;
let i = 0;
do {
const x = Math.random() * width,
y = Math.random() * height,
type = (Math.random() * 3) | 0;
const v = intensity([x, y], type);
const c = d3.hcl(colors[type]);
c.l *= v;
context.fillStyle = c;
context.beginPath();
context.arc(x, y, 5 * Math.exp(-i / 300000), 0, 2 * Math.PI);
context.fill();
if (i % 1000 === 0) yield context.canvas;
} while (i++ < 1000000);
}
colors = ["#e44", "#4e4", "#44e"]
function product(c, d) {
return (c.r * d.r + c.g * d.g + c.b * d.b) / (256 * 256);
}
function intensity(p, type) {
const j =
4 *
((((p[0] / width) * width) | 0) + width * (((p[1] / width) * width) | 0));
const pixel = d3.rgb(pixels.data[j], pixels.data[j + 1], pixels.data[j + 2]);
const filter = d3.rgb(colors[type]);
return product(pixel, filter);
}
points = Array.from({ length: 100000 }, () =>
Object.assign([Math.random() * width, Math.random() * height], {
c: (Math.random() * 3) | 0
})
)
image = FileAttachment("mona-lisa.jpg").image()
pixels = {
const context = DOM.context2d(width, height, 1);
context.drawImage(image, 0, 0, width, height);
return context.getImageData(0, 0, width, height);
}
d3 = require("d3@5")
height = (width * (image.height / image.width)) | 0
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.
