Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
canvas = {
const canvas = document.createElement("canvas");
const scale = 1; // window.devicePixelRatio;
const width = 1152 * scale;
const height = width;
const imageScale = Math.min(image.naturalWidth / width, image.naturalHeight / height);
canvas.width = width;
canvas.height = height;
canvas.style = `background: white; max-width: 100%; width: ${width / scale}px; height: auto; image-rendering: pixelated;`;
const context = canvas.getContext("2d");
context.drawImage(image, 0, 0, width * imageScale, height * imageScale, 0, 0, width, height);
const sourceData = context.getImageData(0, 0, width, height);
const targetData = context.createImageData(width, height);
const random = d3.randomLcg(42);
while (true) {
for (let i = 0, n = sourceData.data.length; i < n; i += 4 * Math.floor(random() * 10)) {
targetData.data[i + 3] = sourceData.data[i] < (random() * 256) ? 255 : 0;
}
context.putImageData(targetData, 0, 0);
yield canvas;
}
}
image = FileAttachment("ricardo-gomez-angel-9AdeEdYB2yk-unsplash.jpg").image({width: 64})
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.
