function swatches(name) {
const colors = d3[`scheme${name}`];
const n = colors.length;
const dark = d3.lab(colors[0]).l < 50;
const canvas = svg`<svg viewBox="0 0 ${n} 1" style="display:block;width:${
n * 33
}px;height:33px;margin:10 2 -5 2px;cursor:pointer; opacity: ${opacity}%;">${colors.map(
(c, i) => svg`<rect x=${i} width=1 height=1 fill=${c}>`
)}`;
const label = document.createElement("DIV");
label.textContent = name;
label.style.position = "relative";
label.style.top = "4px";
label.style.color = `#000`;
canvas.onclick = () => {
label.textContent = "Copied!";
navigator.clipboard.writeText(JSON.stringify(colors));
setTimeout(() => (label.textContent = name), 2000);
};
return html`${canvas}${label}`;
}
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(95% + 28px);height:33px;margin:10 2 -5 2px;cursor:pointer;opacity: ${opacity}%;" 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 = "10 2 -5 2px";
canvas.style.width = "calc(95% + 28px)";
canvas.style.height = "33px";
canvas.style.cursor = "pointer";
canvas.style.opacity = opacity + "%";
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 = "relative";
label.style.top = "4px";
label.style.color = `#000`;
canvas.onclick = () => {
label.textContent = "Copied!";
navigator.clipboard.writeText(JSON.stringify(colors));
setTimeout(() => (label.textContent = name), 2000);
};
return html`${canvas}${label}`;
}
import {slider} from "@jashkenas/inputs"
import { ramp as ramp2 } from "@mbostock/color-ramp"
interpolatePainbow = d3.scaleSequential(
(t) => painbow[(Math.max(0, Math.min(t, 1)) * (painbow.length - 1)) | 0]
)
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.
