30:T581,Plot.plot({ marks: [ Plot.dot(penguins, { x: "culmen_length_mm", fill: "species", y: "culmen_depth_mm" }), Plot.tip( penguins, Plot.pointer({ x: "culmen_length_mm", y: "culmen_depth_mm", fill: "species", channels: { sex: "sex", species: "species", island: "island" }, render: (index, scales, values, dimensions, context, next) => { const g = next(index, scales, values, dimensions, context); const [i] = index; if (i === undefined) return g; d3.select(g) .select("g") .html("") .append( () => svg`

Sex: ${values.channels.sex?.value[i] ?? ""}
Species: ${ values.channels.species?.value[i] ?? "" }
Island: ${values.channels.island?.value[i] ?? ""} ` ); return g; } }) ) ] })31:[] 2e:{"title":"HTML tips (without tippy)","cells":[{"id":0,"value":"# HTML tips (without tippy)\n## Using a foreignObject instead of SVG","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"videos = new Map([\n [\"Adelie\", \"https://www.youtube.com/embed/anUp2L_7b3w\"],\n [\"Chinstrap\", \"https://www.youtube.com/embed/xlUm-0TSjNA\"],\n [\"Gentoo\", \"https://www.youtube.com/embed/X8B7jdB-YR8\"]\n])","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}