2f:T4a5,map = { let map = Plot.plot({ color: "#ddd", width: 900, height: 600, projection: d3.geoMercator().fitExtent( [ [0, 0], [900, 600] ], italy ), marks: [ Plot.geo(italy, { fill: "#eee", stroke: "black" }), Plot.dot(cities, { x: "lng", y: "lat", r: 5, fill: "#cd212a", stroke: "black", // We're going to use the title channel to pass the name // of each city to our tip generator. title: "city" }) ] }); // Convert the native tooltips generated by "title" to // groovy Tippy tooltips. let dots = d3.select(map).selectAll("circle"); dots .each(function () { // Grab the title generated by Plot let t = d3.select(this).select("title").text(); // Apply tippy to the DOM element to attach groovy tooltips tippy(this, { content: tip(t), theme: "light-border", allowHTML: true, interactive: true, appendTo: () => document.body }); }) // Remove the native tooltip generated by Plot. .selectAll("title") .remove(); return map; }30:[{"id":"d2b04872d33b3d75deff10fa82dd6a04f56161698ba180b262b4619e19f9ae8229acff92a5e26c36243769cd23daaaa72f9f730b9595bacb63a7bfd4253d5db8","href":"https://static.observableusercontent.com/files/d2b04872d33b3d75deff10fa82dd6a04f56161698ba180b262b4619e19f9ae8229acff92a5e26c36243769cd23daaaa72f9f730b9595bacb63a7bfd4253d5db8","name":"italy.json","type":"application/json","lastModified":1690203213943.542,"size":30908},{"id":"11fd06343618be449508ceab1c5474b50147002ad8b944288e10858dd9ed8e587a473ca7b5beaaa4f84ab8a1348bddfc28860d612f676a9e46d39db5c3cd1117","href":"https://static.observableusercontent.com/files/11fd06343618be449508ceab1c5474b50147002ad8b944288e10858dd9ed8e587a473ca7b5beaaa4f84ab8a1348bddfc28860d612f676a9e46d39db5c3cd1117","name":"it.csv","type":"text/csv","lastModified":1690203213943.542,"size":1264}] 2d:{"title":"Hoverable tooltips for Plot","cells":[{"id":0,"value":"# Hoverable tooltips for `Plot`\n\nPlot has recently added tooltips! While super nice, they are a bit limited. This notebook shows how to use [Tippy.js](https://atomiks.github.io/tippyjs/) to add interactive tooltips to a map generated by `Plot.geo`. If you hover over the red dots in the image below, you should see a tooltip with an `h4` header, a bulleted list, and an active link that takes you to the Wikipedia page for the corresponding city.","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":115,"value":"// This function accepts a city name and generates the tooltip.\n// It should return raw HTML code.\nfunction tip(city) {\n let d = cities.filter((c) => c.city == city)[0];\n return `

${city}

Population: ${d.population}
Wiki Link

\n`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":173,"value":"## Imports and data","pinned":false,"hidden":false,"mode":"md"},{"id":148,"value":"tippy_style = html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"tippy = require(\"tippy.js@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"italy = {\n let italy = await FileAttachment(\"italy.json\").json();\n return topojson.feature(italy, italy.objects.Italy);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"cities = FileAttachment(\"it.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}