31:[{"id":"5b93c037ba2f95a526dc5ad28a067c07c2ee2faad7f7290aeef82d917f736215ccafae8cd62243ae3a56f08650e4c8efb9237ac7a4946f5fe9583be41b528cff","href":"https://static.observableusercontent.com/files/5b93c037ba2f95a526dc5ad28a067c07c2ee2faad7f7290aeef82d917f736215ccafae8cd62243ae3a56f08650e4c8efb9237ac7a4946f5fe9583be41b528cff","name":"Dog_Photos@3.zip","type":"application/zip","lastModified":1664922641493.783,"size":516397}] 2f:{"title":"Viewing a grid of images via FileAttachment.zip()","cells":[{"id":0,"value":"# Viewing a grid of images via FileAttachment.zip()\n\nA response to [this forum question](https://talk.observablehq.com/t/tooltip-image/7102/6)","pinned":false,"hidden":false,"mode":"md"},{"id":893,"value":"pic_grid = {\n let dogZip = await FileAttachment(\"Dog_Photos@3.zip\").zip();\n let names = d3\n .sort(\n (await dogZip.file(\"Readme.txt\").text())\n .split(\"\\r\")\n .slice(3, -1)\n .map((s) => s.split(\"\\t\")),\n (a) => a[0]\n )\n .map((a) => a[1]);\n let imgs = await Promise.all(\n dogZip.filenames\n .filter((f) => f.slice(-4) == \".jpg\")\n .map(async function (name, i) {\n let url = await dogZip.file(name).url();\n return await `

${\n names[i]\n }

`;\n })\n );\n return html`${imgs}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1094,"value":"## Scatter plot with tooltip follow up","pinned":false,"hidden":false,"mode":"md"},{"id":1070,"value":"scatter_plot_with_image_tooltips = {\n let plot = Plot.plot({\n x: { tickFormat: (s) => s.slice(0, 6) },\n marks: [\n Plot.dot(dog_data, {\n fill: \"black\",\n x: \"breed\",\n y: (d, i) => i, // Complete arbitrary\n title: (d, i) => i\n })\n ]\n });\n\n d3.select(plot)\n .selectAll(\"circle\")\n .nodes()\n .forEach(function (c) {\n let idx = parseInt(d3.select(c).select(\"title\").text());\n let p = dog_data[idx];\n let content = `

${p.breed}

`;\n console.log(content);\n tippy(c, {\n content: content,\n theme: \"light\",\n allowHTML: true,\n maxWidth: 400,\n placement: \"bottom\"\n });\n d3.select(c).select(\"title\").remove();\n });\n\n return plot;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1050,"value":" dog_data = {\n let dogZip = await FileAttachment(\"Dog_Photos@3.zip\").zip();\n let breeds = d3\n .sort(\n (await dogZip.file(\"Readme.txt\").text())\n .split(\"\\r\")\n .slice(3, -1)\n .map((s) => s.split(\"\\t\")),\n (a) => a[0]\n )\n .map((a) => a[1]);\n let urls = await Promise.all(\n dogZip.filenames\n .filter((f) => f.slice(-4) == \".jpg\")\n .map(async function (name, i) {\n return dogZip.file(name).url();\n })\n );\n return d3.zip(breeds, urls).map((a) => ({ breed: a[0], url: a[1] }));\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":1066,"value":"tippy_style = html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1068,"value":"tippy = require(\"tippy.js@6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}