randomInCategory = `https://randomincategory.toolforge.org/Featured_pictures_on_Wikimedia_Commons?server=commons.wikimedia.org&type=file&debug=1`
getRandom = async (url = randomInCategory) => {
const doc = await d3.html(url);
const string = doc.evaluate(
`//text()[starts-with(., "Location: ")]`,
doc,
null,
XPathResult.STRING_TYPE
).stringValue;
return string.replace(/^Location: /, "");
}
// Assert that the iterator produces a single value
unwrap = (it) => {
let done = false,
value;
for (const x of it) {
if (done) throw new RangeError("Too many");
value = x;
done = true;
}
if (!done) throw new RangeError("Not enough");
return value;
}
wikijs = (await import("https://esm.run/wikijs")).default
// Wiki's default thumbnail size is 50px
mediaInfo = async (fileUrl, pithumbsize) => {
const wiki = wikijs({ apiUrl: new URL("/w/api.php", fileUrl) });
const titles = fileUrl.split("/").at(-1);
const page = await wiki.page(titles);
return await page
.chain()
.chain(undefined, _.pickBy({ pithumbsize }))
.direct("image");
}
toImageData = (img, { width = Infinity, height = Infinity } = {}) => {
let { naturalWidth, naturalHeight } = img;
let r = compute_ratio(naturalWidth, naturalHeight, width, height);
[width, height] = [naturalWidth, naturalHeight].map((d) => d / r);
const ctx = context2d({ width, height });
ctx.drawImage(img, 0, 0, width, height);
return ctx.getImageData(0, 0, width, height);
}
context2d = ({ width, height }) =>
htl.html`<canvas ${{ width, height }}>`.getContext("2d")
compute_ratio = (w1, h1, w2, h2) => Math.max(w1 / w2, h1 / h2, 1)
showImageData = (imageData) => {
const { width, height } = imageData;
const ctx = context2d({ width, height });
ctx.putImageData(imageData, 0, 0);
return ctx.canvas;
}
loadRandomImage = async (width) => {
const url = await getRandom();
const imageInfo = await mediaInfo(url, width);
const src = imageInfo.thumbnail.source;
const title = imageInfo.name;
const img = htl.html`<img ${{ src, title }} crossorigin>`;
await img.decode();
return img;
}
example = (width) =>
Inputs.button("I’m Feeling Lucky", {
value: loadRandomImage(width),
reduce: () => loadRandomImage(width)
})
viewof ex = example(320)
md`<pre style="white-space:pre-wrap;word-break:break-all"><code class=html>${htl
.html.fragment`${ex.outerHTML}`}`
ex
toImageData(ex)
showImageData(toImageData(ex))
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.
