Color Schemes
Color Utilities
md`# Color Utilities`
md`
~~~js
import {rampRGB} from "@bchoatejr/color-utilities"
~~~
`
rampRGB({interpolateRGB:cX})
cX = d3.interpolateRgb("#0db", "#b0d");
cX(0)
cX(0.5)
cX(1)
function rampRGB(cfg) {
let {c1="#fff", c2="#00f", interpolateRGB=false} = cfg;
let canvas;
// let dark;
let n=256;
if (interpolateRGB == false) interpolateRGB = d3.interpolateRgb(c1, c2);
// const interpolateRGB = d3.interpolateRgb(c1, c2);
// const interpolate = d3[`interpolate${name}`];
let colors = [];
// dark = d3.lab(interpolate(0)).l < 50;
for (let i = 0; i < n; ++i) {
colors.push(interpolateRGB(i/n));
}
const context = (canvas = DOM.canvas(n, 1)).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`;
return html`${canvas}${label}`;
}
d3 = require("d3@5")
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.
