Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published
Edited
Aug 15, 2019
1 fork
Importers
25 stars
function fetchImage(src) {
return new Promise((resolve, reject) => {
const image = new Image;
image.crossOrigin = "anonymous";
image.src = src;
image.onload = () => resolve(image);
image.onerror = reject;
});
}
image = fetchImage("https://gist.githubusercontent.com/mbostock/9511ae067889eefa5537eedcbbf87dab/raw/944b6e5fe8dd535d6381b93d88bf4a854dac53d4/mona-lisa.jpg")
{
const context = DOM.context2d(width, height, 1);
context.drawImage(image, 0, 0, width, height);
const buffer = context.getImageData(0, 0, width, height);
for (let y = 0, i = 0; y < height; ++y) {
for (let x = 0; x < width; ++x, i += 4) {
buffer.data[i + 0] = 255 - buffer.data[i + 0];
buffer.data[i + 1] = 255 - buffer.data[i + 1];
buffer.data[i + 2] = 255 - buffer.data[i + 2];
}
}
context.putImageData(buffer, 0, 0);
return context.canvas;
}
height = Math.round(width / image.naturalWidth * image.naturalHeight)
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.
