Color Schemes
color_schemes = ["Blues", "Greens", "Greys", "Oranges", "Purples", "Reds", "BuGn", "BuPu", "GnBu", "OrRd", "PuBuGn", "PuBu", "PuRd", "RdPu", "YlGnBu", "YlGn", "YlOrBr", "YlOrRd", "Cividis", "Viridis", "Inferno", "Magma", "Plasma", "Warm", "Cool", "CubehelixDefault", "Turbo", "BrBG", "PRGn", "PiYG", "PuOr", "RdBu", "RdGy", "RdYlBu", "RdYlGn", "Spectral", "Rainbow", "Sinebow",
]
Object.keys(d3)
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 = 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) => svg`<rect x=${i} width=1 height=1 fill=${c}>`)}`;
} else {
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`;
canvas.onclick = () => {
label.textContent = "Copied!";
copy(JSON.stringify(colors));
setTimeout(() => label.textContent = name, 2000);
};
return html`${canvas}${label}`;
}
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);
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}`;
}
md` ## Appendix
- [d3-color](https://github.com/d3/d3-color)
`
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.
