Hi all, I’m trying to follow and combine the tutorials on image plotting and tooltips: Work in progress observable: https://observablehq.com/d/cc4d71aba075ebfd Currenlty it seems to only handle text such as in the tutorial on extracting image data there seems to be a workaround by adding a: con…

Thanks so much for all your help!! I got it to work now and created this small sample: creating a plot that displays images associated with a csv dataset

Thanks so much for the super quick and clear explanation!!

A follow up. I am trying to add custom images via a .zip file. Loading via sampleHeads = (FileAttachment(“sample-Heads.zip”)).zip() This gives this error and I am unsure how to then access the file via the ? [image]

[image] ramonweber: A follow up. I am trying to add custom images via a .zip file. Here’s a notebook explaining how to use ZIP files in attachements: File attachments | Observable documentation All your Observable questions answered In that notebook,…

Yeah I had looked at the file but don’t understand how to use it inside a loop. I just have this code as one line, it will sucessfully show the correct image dogZip.file(dogImageNames[2]).image() If I iterate through all the image names with [idx] and the correct image “path” e.g. ‘n02085936_2905…

[image] ramonweber: If I iterate through all the image names with [idx] and the correct image “path” e.g. ‘n02085936_2905.jpg’ is shown as a title, why wouldn’t the code below inside the scatter plot loop show an image? Yeah, dealing with Promises can be tricky. I would say that MDN’s officia…

I see, many thanks for the thorough example!! I had thought this would be super straight forward somehow… I’m trying to replace the images of the heads of the presidents with dogs from a zip. So how do I wrap the existing d3.select(plot) into the Promise.all ? and why does it need the await then? …

[image] ramonweber: So how do I wrap the existing d3.select(plot) into the Promise.all ? and why does it need the await then? Since displaying a single image with html works: Without looking at your notebook, it’s hard to say but, again, Observable runs in a reactive manner which means, in pa…

Tooltip Image

Help

mcmcclur October 4, 2022, 1:38am 2

I feel like I answered almost this exact some question the other day, but here’s how to do it with TippyJS:

Topic		Replies	Views
howTo reference an attached image in observable slide preso Help	3	917	January 31, 2023
Doing a .then after an await FileAttachment. Help	4	711	November 22, 2020
Plot Tooltip with clickable URL and/or images? Help	2	506	October 4, 2022
Problem with awaiting a FileAttachment Help	6	1254	September 14, 2020
File attachments! Announcements	50	9076	September 2, 2021

Tooltip Image

Related topics