The Ambassador program is made up of a group of inclusive, collaborative, and curious minds in the Observable community.
Public
Edited
Feb 26, 2024
Paused
1 fork
8 stars
// Array of File Attachments Promises
fileAttachments = [
FileAttachment("Act_1-Scene_1.jpg"),
FileAttachment("Act_1-Scene_2.jpg"),
FileAttachment("Act_1-Scene_3.jpg"),
FileAttachment("Act_1-Scene_4.jpg"),
FileAttachment("Act_2-Scene_1.jpg"),
FileAttachment("Act_2-Scene_2.jpg"),
FileAttachment("Act_2-Scene_3.jpg"),
FileAttachment("Act_2-Scene_4.jpg"),
FileAttachment("Act_2-Scene_5.jpg"),
FileAttachment("Act_2-Scene_6.jpg")
]
viewof height = Inputs.range([100, 800], {
label: "Image Height (pixels)",
value: 200,
step: 1
})
carouselImage = fileAttachments[index].image({
height: height,
width: 0.75 * height
})
viewof toggleImage = Inputs.toggle({
label: html`${await fileAttachments[index].image({
height: 100,
width: 75
})}`,
value: fileAttachments[index].name,
values: [fileAttachments[index].name, "No image selected"]
})
images = await Promise.all(
fileAttachments.map(
async (file) =>
await file.image({
name: file.name, // Propagate name to image object.
height: 100,
width: 75,
url: await file.url() // Add image's url as an additional attribute.
})
)
)
viewof imageButton = Inputs.button(
images.map((image, i) => [image, () => image.name])
)
imageButton
imagesToClone = await Promise.all(
fileAttachments.map((file) =>
file.image({
name: file.name, // Propagate name to image object
height: 100,
width: 75
})
)
)
viewof imageButtonCloned = Inputs.button(
imagesToClone.map((image, i) => [image, () => image.cloneNode(true)]) // Return a clone of the image allowing for re-display
)
Cloned Image Selected: ${imageButtonCloned}
viewof imagesClonedRadio = {
const images = new Map(
(
await Promise.all(
fileAttachments.map((file) =>
file.image({
name: file.name,
height: 100,
width: 75
})
)
)
).map((image) => [image, image.cloneNode(true)]) // clone of image is used for the Map value
);
const getValue = (n) => {
let img;
const itr = images.values();
for (let i = 0; i < n; i++) {
img = itr.next().value;
}
return img;
};
return Inputs.radio(images, {
label: html`<b>Cloned Radio Images</b>`,
value: getValue(2),
format: ([img, imgClone]) => img
});
}
| Image Selected | Name | Height | Width |
| -------------- | ---- | ------ | ----- |
|${imagesClonedRadio} | ${imagesClonedRadio.name} | ${imagesClonedRadio.height} | ${imagesClonedRadio.width} |
viewof imagesClonedCheckBox = {
const images = new Map(
(
await Promise.all(
fileAttachments.map((file) =>
file.image({
name: file.name,
height: 100,
width: 75
})
)
)
).map((image) => [image, image.cloneNode(true)]) // clone of image is used for the Map value
);
return Inputs.checkbox(images, {
label: html`<b>Cloned Checkbox Images</b>`,
format: ([img, imgClone]) => img
});
}
// See: https://observablehq.com/@mbostock/html-in-markdown
md`<table>
<thead>
<tr>
<th>Image(s) Selected</th>
<th>Name</th>
<th>Height</th>
<th>Width</th>
</tr>
</thead>
<tbody>
${imagesClonedCheckBox.map(
(image) =>
html`<tr>
<td> ${image} <td> ${image.name} <td> ${image.height} <td> ${image.width}`
)}
</tbody>
</table>`
// Additional metadata for images via: https://github.com/mattiasw/ExifReader
// exifMetadata will be reused later on in the notebook
exifMetadata = await Promise.all(
fileAttachments.map(async (file) => {
const arrayBuffer = await file.arrayBuffer();
return await ExifReader.load(arrayBuffer);
})
)
// Array of keyed images
keyedImages = (
await Promise.all(
// exifMetadata could have been created with that map via an async function, but it's in a separate cell for reuse later in the notebook
fileAttachments.map((file) =>
file.image({ name: file.name, height: height, width: 0.75 * height })
)
)
).map((image, i) => ({
name: image.name,
"JFIF Version": exifMetadata[i]["JFIF Version"].description, // Referenced in fileAttachments' order
image
}))
// Initiate table search with Act 2 images
viewof search = Inputs.search(keyedImages, {
label: "Search Images",
query: "Act_2"
})
search
// Only 'search'-ed images are 'table'-ed
viewof imagesTable = Inputs.table(search, {
format: {
image: (image) => image.cloneNode(true) // Cloning allows re-dislay of original image from selections; if any.
}
})
imagesTable
html`Table image(s):${imagesTable.map(
(tableRow) => html`<br>${tableRow.name}: ${tableRow.image}`
)}`
imageMetadata = new Map(
Object.keys(exifMetadata[index]).map((attribute) => [
attribute,
exifMetadata[index][attribute].description
])
)
viewof imageAttribute = Inputs.select(imageMetadata, {
label: html`${await fileAttachments[index].image({
height: 150,
width: 150 * 0.75
})}`
})
imageAttribute
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.
