{
const svg = d3.select(
Plot.plot({
width,
height: 160,
inset: 70,
marks: [
Plot.image(apod.slice(0, 10), { x: "index", src: "url", height: 120 })
]
})
);
const stroke = "lime";
const radius = 2;
const id = "outline";
svg.selectAll("image").attr("filter", `url(#${id})`);
svg.append("defs").html(`<filter id="${id}">
<feMorphology in="SourceAlpha" result="expanded" operator="dilate" radius="${radius}"/>
<feFlood flood-color="${stroke}"/>
<feComposite in2="expanded" operator="in"/>
<feComposite in="SourceGraphic"/>
</filter>`);
return svg.node();
}
import {apod} from "@observablehq/plot-image"
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.
