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`<foreignObject width=200 height=192>
<div style="width:186px;background: white; border: solid 1px black; padding: 5px;">
<i>Sex</i>: ${values.channels.sex?.value[i] ?? ""}<br>
<i>Species</i>: <span style="border-bottom: 2px solid ${values.fill[i]};">${
values.channels.species?.value[i] ?? ""
}</span><br>
<i>Island</i>: ${values.channels.island?.value[i] ?? ""}
<iframe width="180" height="130" src="${videos.get(
values.channels.species?.value[i] ?? ""
)}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
`
);
return g;
}
})
)
]
})
videos = new Map([
["Adelie", "https://www.youtube.com/embed/anUp2L_7b3w"],
["Chinstrap", "https://www.youtube.com/embed/xlUm-0TSjNA"],
["Gentoo", "https://www.youtube.com/embed/X8B7jdB-YR8"]
])
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
