Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published unlisted
Edited
Feb 20, 2021
2 stars
url = "https://raw.githubusercontent.com/cornhundred/deck.gl-data/master/website/image-tiles/moon.image/moon.image_files/10/0_0.jpeg"
// 1. HTML
html`<img src="${url}">`
// 2. A JavaScript image.
// Note that this image may be seen before it is loaded by
// other cells; see #3 below.
{
const image = new Image();
image.src = url;
return image;
}
// 2. A JavaScript image (using Object.assign).
// Note that this image may be seen before it is loaded by
// other cells; see #3 below.
Object.assign(new Image(), {src: url})
// 3. A JavaScript image, but waiting for it to load.
// This will cause other cells to automatically wait, too.
moon = new Promise((resolve, reject) => {
const image = new Image();
image.crossOrigin = "anonymous"; // optional
image.src = url;
image.onload = () => resolve(image);
image.onerror = reject;
})
// 4. Fetch and Blob and URL.createObjectURL
// Don’t use this unless #3 doesn’t work.
moon2 = new Promise(async (resolve, reject) => {
const response = await fetch(url);
const blob = await response.blob();
const src = URL.createObjectURL(blob);
const image = new Image();
invalidation.then(() => URL.revokeObjectURL(src)); // optional clean-up
image.crossOrigin = "anonymous"; // optional
image.src = src;
image.onload = () => resolve(image);
image.onerror = reject;
})
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.
