Interactive Data Journalist at The Economist
Published
Edited
Jan 26, 2021
Importers
1 star
md`# Color schemes playground`
links = [
"https://visme.co/blog/website-color-schemes/",
"https://medium.com/eightshapes-llc/light-dark-9f8ea42c9081",
"https://naldzgraphics.net/gradient-web-design/"
]
ramp(d3.piecewise(d3.interpolateRgb, ["#1a1a1d", "#4e4e50", "#6f2232", "#950740", "#C3073F"]))
ramp(d3.piecewise(d3.interpolateHsl, ["#0b0c10", "#1f2833", "#45a29e", "#66fcf1"]))
ramp(d3.piecewise(d3.interpolateHsl, ["#e3e2df", "#e3afbc", "#ee4c7c", "#9a1750", "#5d001e", "#000000"]))
ramp(d3.piecewise(d3.interpolateHsl, ["#d6ce15", "#a4a71e", "#53900f", "#1f6521", "#1f2605"]))
ramp(d3.piecewise(d3.interpolateRgb, ["#000000", "#00fdf8", "#52ff9a", "#eaff00"]))
ramp(d3.piecewise(d3.interpolateRgb, ["#000000", "#03283c", "#18928a", "#31dfb4", "#97d3a8", "#daa64b", "#f46c1d", "#f83915", "#f71211"]))
ramp(d3.piecewise(d3.interpolateRgb, ["#000000", "#03283c", "#18928a", "#31dfb4", "#97d3a8", "#52ff9a", "#eaff00"]))
// Adapted from "@mbostock/color-ramp"
function ramp(color, numscale, n = 256) {
const canvas = DOM.canvas(n, 1);
const context = canvas.getContext("2d"),
w = width + 28;
canvas.style.margin = "0 -14px";
canvas.style.width = `${w}px`;
canvas.style.height = "40px";
canvas.style.imageRendering = "pixelated";
// companion numerical scale, to define the axis.
if (numscale === undefined) numscale = d3.scaleLinear();
if (color.domain) numscale.domain(color.domain());
numscale.range([0, n]);
const t = color.ticks ? color.ticks(n) : d3.range(n).map(i => i / (n - 1));
for (let i = 0; i < t.length; ++i) {
context.fillStyle = color(t[i]);
context.fillRect((i * n) / t.length, 0, 100, 1);
}
d3.select(canvas).on("mousemove click", function() {
const t = numscale.invert((d3.mouse(this)[0] / w) * n);
canvas.value = t;
canvas.dispatchEvent(new CustomEvent("input"));
});
canvas.value = 0;
return canvas;
}
d3 = require("d3@5", "d3-scale@^3.2.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.
