Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published
Edited
Apr 4, 2019
2 forks
14 stars
canvas = {
const context = DOM.context2d(width, height, 1);
const context2 = DOM.context2d(width + pad * 2, height + pad * 2, 1);
context.drawImage(image, 0, 0, width, image.naturalHeight / image.naturalWidth * width);
while (true) {
const x = Math.random() * pad | 0;
const y = Math.random() * pad | 0;
context2.drawImage(context.canvas, x, y, width, height);
const image = await new Promise((resolve, reject) => {
context2.canvas.toBlob(blob => {
const image = new Image;
image.src = URL.createObjectURL(blob);
image.onload = () => resolve(image);
image.onerror = reject;
}, "image/jpeg", quality);
});
context.drawImage(image, x, y, width, height, 0, 0, width, height);
URL.revokeObjectURL(image.src);
yield context.canvas;
}
}
height = 800
pad = 10
image = new Promise((resolve, reject) => {
const image = new Image;
image.crossOrigin = "anonymous";
image.style.width = "33px";
image.style.height = "auto";
image.style.display = "block";
image.onerror = reject;
image.onload = () => resolve(image);
image.src = "https://gist.githubusercontent.com/mbostock/9511ae067889eefa5537eedcbbf87dab/raw/944b6e5fe8dd535d6381b93d88bf4a854dac53d4/mona-lisa.jpg";
})
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.
