2b:null 2c:["$","title",null,{"children":"HTML tips (without tippy) | recifs | Observable"}] 31: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; } }) ) ] })32:[] 2f:{"id":"fc7f511132c33e95","slug":"html-tips","title":"HTML tips (without tippy)","thumbnail":"5045d7a4246524a700898635e961845b45fb6fdb432791e09751800cfeab86ef","access_level":"public","create_time":"$D2023-09-19T11:34:24.298Z","update_time":"$D2023-09-19T12:03:21.003Z","view_time":null,"first_public_time":"$D2023-09-19T11:49:01.413Z","fork":false,"stars":22,"starred":false,"owner":{"type":"team","id":"4407cd382de4c7ca","login":"recifs","name":"recifs","avatar_url":"https://avatars-next.observableusercontent.com/46d4370c8aeab5d093a08be94cdaa6cd64d8496aad0cbf217a99b3f5ddc8880d","tier":"starter_2024"},"version":75,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}],"members":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"role":"editor"},{"type":"team","id":"4407cd382de4c7ca","login":"recifs","name":"recifs","avatar_url":"https://avatars-next.observableusercontent.com/46d4370c8aeab5d093a08be94cdaa6cd64d8496aad0cbf217a99b3f5ddc8880d","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"62fc597bf37583c2","slug":"plot-support","title":"Plot Support","owner":{"id":"4407cd382de4c7ca","login":"recifs","name":"recifs"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined"},{"id":3,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"