function ramp(name) {
let canvas;
let colors;
let dark;
if (d3[`scheme${name}`] && d3[`scheme${name}`][n]) {
colors = d3[`scheme${name}`][n];
dark = d3.lab(colors[0]).l < 50;
} else {
const interpolate = d3[`interpolate${name}`];
colors = [];
dark = d3.lab(interpolate(0)).l < 50;
for (let i = 0; i < n; ++i) {
colors.push(d3.rgb(interpolate(i / (n - 1))).hex());
}
}
if (n < 128) {
canvas = htl.svg`<svg viewBox="0 0 ${n} 1" style="display:block;shape-rendering:crispEdges;width:calc(100% + 28px);height:33px;margin:0 -14px;cursor:pointer;" preserveAspectRatio="none">${colors.map((c, i) => htl.svg`<rect x=${i} width=1 height=1 fill=${c}>`)}`;
} else {
canvas = document.createElement("canvas");
canvas.width = n;
canvas.height = 1;
const context = canvas.getContext("2d");
canvas.style.margin = "0 -14px";
canvas.style.width = "calc(100% + 28px)";
canvas.style.height = "33px";
canvas.style.cursor = "pointer";
for (let i = 0; i < n; ++i) {
context.fillStyle = colors[i];
context.fillRect(i, 0, 1, 1);
}
}
const label = document.createElement("DIV");
label.textContent = name;
label.style.position = "absolute";
label.style.top = "4px";
label.style.color = dark ? `#fff` : `#000`;
canvas.onclick = () => {
label.textContent = "Copied!";
navigator.clipboard.writeText(JSON.stringify(colors));
setTimeout(() => label.textContent = name, 2000);
};
return html`${canvas}${label}`;
}