function ramp(color, numscale, n = 512) {
const canvas = DOM.canvas(n, 1);
const context = canvas.getContext("2d"),
w = width + 28;
canvas.style.margin = "0 -14px";
canvas.style.width = `${w}px`;
canvas.style.height = "40px";
canvas.style.imageRendering = "pixelated";
if (numscale === undefined) numscale = d3.scaleLinear();
if (color.domain) numscale.domain(color.domain());
numscale.range([0, n]);
const t = color.ticks ? color.ticks(n) : d3.range(n).map(i => i / (n - 1));
for (let i = 0; i < t.length; ++i) {
context.fillStyle = color(t[i]);
context.fillRect((i * n) / t.length, 0, 100, 1);
}
d3.select(canvas).on("mousemove click", function(event) {
const t = numscale.invert((d3.pointer(event)[0] / w) * n);
canvas.value = t;
canvas.dispatchEvent(new CustomEvent("input"));
});
canvas.value = 0;
return canvas;
}