Struggling to use collection of images in an image plot with Observable Framework

[DevinBayly]

I'd love to know what the experts suggest for making an image plot using locally hosted images.

I know in things like this https://observablehq.com/@observablehq/plot-image-dodge the images are being pulled by url from somewhere else, but when using framework if we have the images in the same project folder, is there a way to reference them?

I followed the archives suggestion https://observablehq.com/framework/data-loaders#archives and made a zip of the folder containing my images, and was able to demonstrate pulling one out with a literal string path, but I seem to be striking out when I try to create a url FileAttachment field for each element of my data

The other thing I tried was just making url a string that followed the same pattern of formatting as the literal I confirmed was working, but I get 404's when I use those urls in the src field of the Plot.image function.

Here's my snippet from the above screenshot in case it helps

# testing the tsne plot view


\```js
const data=FileAttachment("data/plot_data.json").json()
\```
\```js
const im = FileAttachment("/lib/my_subfigures/sub_figures/0a4a240c-aef2-4a67-8c69-bd3d81c7d9c0.png").image()
const moddata = data.map(e=> ({...e,url:FileAttachment(`/lib/my_subfigures/${e.image}`)}))
display(moddata)
\```

\```js

Plot.plot({
marks:[
  Plot.image(moddata.slice(0,5),{x:"x",y:"y",src:"url"})
]
})
\```

Thanks so much!

[Fil]

Hello, here https://observablehq.com/framework/lib/zip (in the second half of the page) is an example of working with such a collection of images.

[DevinBayly]

oh shoot, I can't believe I stared at the right page but missed the example at the bottom. I'll check this out right away.

[DevinBayly]

oh wait, that's different than the archives page. Eitherway, I'll be in touch. Thanks!

[DevinBayly]

Ok, I think I got it. Thanks @Fil . I'll close this, but if there's anything in the code I did below that's still not quite the idiomatic approach I'd love to know if you have a moment to give feedback.

---
theme: [light,alt]
---
# testing the tsne plot view


\```js
const data=FileAttachment("data/plot_data.json").json()
const zipfile = FileAttachment("lib/my_subfigures.zip").zip()
const height = 500
const n = view(html`<input type=range step=200 min=200 max=20000>`);
\```
\```js
display(zipfile.filenames[0])
\```
\```js
const images = await Promise.all(
data.map(
e=> zipfile.file(`sub_figures_all/${e.image.split(/\//)[1]}`).url()
)
)

const moddata=data.map((e,i)=> ({
...e,
url:images[i]
})).slice(0,n)
\```
\```js
display(moddata[0])
\```

\```js
//taken from observable plot zoom notebook
function zoom(chart) {
  // creates an intermediary layer which takes the transform
  const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
  for (const s of [...chart.children]) g.appendChild(s);
  chart.appendChild(g);
  const zoom = d3
    .zoom()
    .on("zoom", ({ transform }) => g.setAttribute("transform", transform));
  d3.select(chart).call(zoom);
  return chart;
}
\```



<div class="card">
${ resize(w=>  zoom(Plot.plot({ width:w,height:500, x:{ axis:null }, y:{ axis:null }, marks:[ Plot.image(moddata,{x:"x",y:"y",src:"url"}) ] })) ) }
</div>

[Fil]

wow that's a fascinating image. I would recommend to load the images from the list of files that is in the zip, rather than from the json. I don't doubt that they are in sync, but if one image is missing, you'll probably want to avoid rejecting.