The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Unlisted
Edited
Aug 24, 2023
Paused
2 stars
FileAttachment("flags.zip").zip()
images = loadImages(FileAttachment("flags.zip"), {
filter: ".png", // can also be a pattern like /(gif|jpg|png)$/ or a function
invalidation, // optional but recommended
})
countryCodes = Object.keys(images).map(d => d.slice(9, 11))
Plot.image(countryCodes, {
src: d => images[`png100px/${d}.png`],
x: "0", // first character
y: "1", // second character
tip: true, // display a tooltip
title: d => `Country code: ${d.toUpperCase()}`, // show the country code in the tooltip
href: d => `https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2#${d.toUpperCase()}`, // link to Wikipedia
target: "_top", // required so that links open correctly
}).plot({
grid: true,
title: "Country flags",
subtitle: "By their alpha-2 code's first and second letter",
x: { label: "1st letter", tickFormat: d => d.toUpperCase(), axis: "top" },
y: { label: "2nd letter", tickFormat: d => d.toUpperCase() },
})
async function loadImages(attachment, {
filter = null,
invalidation: invalidated = invalidation,
mimeType = name => `image/${name.split(".").at(-1)}`,
} = {}) {
const archive = await attachment.zip();
const _filter =
typeof filter === "string" ? d => d.includes(filter)
: typeof filter === "function" ? d => filter(d)
: filter instanceof RegExp ? d => d.match(filter)
: () => true;
const urls = archive.filenames.filter(_filter).map(async name => {
const data = await archive.file(name).arrayBuffer();
const url = URL.createObjectURL(new Blob([data], {type: mimeType(name)}));
invalidated.then(() => URL.revokeObjectURL(url));
return [name, url];
});
return Object.fromEntries(await Promise.all(urls));
}
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.
