{
const x = (d, i) => i % 5;
const y = (d, i) => Math.floor(i / 5);
const src = (d, i) => `https://placekitten.com/${100 + 2 * i}/${100 + 2 * i}`;
return Plot.plot({
inset: 60,
width: 520,
height: 520,
axis: null,
r: { range: [10, 60] },
marks: [
Plot.image({ length: 25 }, { x, y, src, r: 49 }),
Plot.image(
{ length: 25 },
Plot.pointer({
x,
y,
src,
maxRadius: 49,
rotate: 18,
r: 49
})
),
Plot.dot(
{ length: 25 },
Plot.pointer({
x,
y,
stroke: "red",
strokeWidth: 3,
maxRadius: 49,
rotate: 18,
r: 49
})
)
]
});
}
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.
