The avatar for @d3
D3
Bring your data to life.
Public
Edited
Jul 25, 2024
38 forks
Importers
270 stars
d3-scale-chromatic
ColorBrewer splinesPiecewise color interpolationSequential scales
Color Schemes
Also listed in…
Gallery
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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:0 -14px;cursor:pointer;">${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 = "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}`;
}
Insert cell
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}`;
}
Insert cell

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.
Learn more