Public
Edited
Sep 2, 2024
Importers
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
mkImageGallaryHTML = () => {
let margin = 10, // pixels
cols = 4,
d = new Date(),
w = (width - margin * 2 * cols) / cols, // pixels
srcs = images.map((d) => {
let { url, contents } = d,
spans = contents.map(
(c, i) =>
htl.html`<span style="color:${contentsColormap[c]}">${
i === 0 ? "|" : ""
} ${title(c)} | </span>`
);

return htl.html`
<div style="margin: ${margin}px">
<image style="filter: ${imageFilter}; width:${w}px;" src=${url}></image>
<div>${spans}</div>
</div>`;
});

return htl.html`
<h3>Images with filter: ${imageFilter}</h3>
<div id='gallary'>
${srcs}
</div>
`;
}
Insert cell
title = (s) => s[0].toUpperCase() + s.slice(1)
Insert cell
Insert cell
Insert cell
contentsColormap = {
let contents = [];
images.map(({ contents: cs }) => cs.map((c) => contents.push(c)));
contents = [...new Set(contents)].sort();

let colormap = {};
contents.map((d, i) => (colormap[d] = colors[i % colors.length]));

return colormap;
}
Insert cell
colors = d3.schemeTableau10
Insert cell
Insert cell
images = {
let images = [
untitled112234,
DT86,
forzaMotorsport11,
goshavanq,
mountainStream3,
simpledesktopsCom19,
wallhaven8oev1j
];

return images;
}
Insert cell
images
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
untitled112234 = {
let url = await FileAttachment("112234.jpg").url(),
contents = ["blue", "light", "moon", "cloud"];
return { url, contents };
}
Insert cell
DT86 = {
let url = await FileAttachment("DT86.jpg").url(),
contents = ["blue", "light", "moon", "cloud"];
return { url, contents };
}
Insert cell
forzaMotorsport11 = {
let url = await FileAttachment(
"forza_motorsport_11-wallpaper-3840x2160.jpg"
).url(),
contents = ["car", "light", "city"];
return { url, contents };
}
Insert cell
goshavanq = {
let url = await FileAttachment("goshavanq.jpg").url(),
contents = ["misty", "mountain", "forest"];
return { url, contents };
}
Insert cell
mountainStream3 = {
let url = await FileAttachment(
"mountain_stream_3-wallpaper-3840x2160.jpg"
).url(),
contents = ["river", "mountain", "cloud"];
return { url, contents };
}
Insert cell
simpledesktopsCom19 = {
let url = await FileAttachment("simpledesktops.com19.png").url(),
contents = ["mountain", "cartoon"];
return { url, contents };
}
Insert cell
wallhaven8oev1j = {
let url = await FileAttachment("wallhaven-8oev1j.jpg").url(),
contents = ["cartoon", "jinja", "mountain", "forest"];
return { url, contents };
}
Insert cell
d3 = require("d3")
Insert cell

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.
Learn more