function chart(interpolators) {
const samples = 300,
w = Math.min(width, 600),
h = 250,
chart = d3
.create("svg")
.attr("width", w)
.attr("height", h),
x = d3.scaleLinear().range([w * 0.05, w * 0.875]),
y = d3.scaleLinear().range([h * 0.9, h * 0.05]),
line = d3
.line()
.x((_, i) => x(i / samples))
.y(y);
let l = 0;
for (const [name, interpolator] of interpolators) draw(interpolator, name);
chart
.append("g")
.attr("transform", `translate(0,${y(0)})`)
.call(d3.axisBottom(x))
.append("text")
.attr("transform", `translate(${x(1)}, -5)`)
.attr("fill", "black")
.attr("font-style", "italic")
.text("t");
chart
.append("g")
.attr("transform", `translate(${x(0)},0)`)
.call(d3.axisLeft(y))
.append("text")
.attr("transform", `translate(5, ${y(1) + 5})`)
.attr("text-anchor", "start")
.attr("fill", "black")
.attr("font-style", "italic")
.text("value");
return chart.node();
function draw(interpolator, name) {
chart
.append("path")
.attr("fill", "none")
.attr("stroke", color(name))
.attr("d", line(d3.quantize(interpolator, 1 + samples)));
chart
.append("text")
.style("font-family", "sans-serif")
.style("font-size", "12px")
.attr("text-anchor", "end")
.text(name)
.attr("fill", color(name))
.attr("dx", w - 1)
.attr("dy", 16 * (0.6 + l++));
}
}