show = (interpolate, caption) => {
const N = 300;
const asNumber = numeric(interpolate);
const V = []
.concat(
d3
.range(0, 1.000001, 1 / N)
.map((x) => ({ y: x, color: color(x) }))
)
.concat(
d3
.range(0, 1.000001, 1 / N)
.map((x) => ({ x: x, y: asNumber(x), color: interpolate(x) }))
);
return Plot.plot({
marks: [
Plot.ruleY(V, { y: "y", stroke: "color", strokeWidth: 2 }),
Plot.line(V, { x: "x", y: "y", strokeWidth: 2 }),
Plot.ruleX([0]),
Plot.ruleY([0])
],
color: { type: "identity" },
height: 200,
x: { label: "t →", domain: [0, 1] },
y: { label: "↑ color value", nice: true, grid: true, ticks: 8 },
caption
});
}