Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published
Edited
Mar 6, 2020
7 forks
Importers
62 stars
function ramp(color, n = 512) {
const canvas = DOM.canvas(n, 1);
const context = canvas.getContext("2d");
canvas.style.margin = "0 -14px";
canvas.style.width = "calc(100% + 28px)";
canvas.style.height = "40px";
canvas.style.imageRendering = "-moz-crisp-edges";
canvas.style.imageRendering = "pixelated";
for (let i = 0; i < n; ++i) {
context.fillStyle = color(i / (n - 1));
context.fillRect(i, 0, 1, 1);
}
return canvas;
}
ramp(t => `hsl(${t * 360},100%,50%)`) // The dreaded angry rainbow!
ramp(d3.interpolateRainbow) // A better cylical color scheme.
ramp(d3.interpolateViridis) // A nice sequential color scheme.
ramp(d3.interpolateViridis, 12) // With a discrete number of steps.
ramp(d3.interpolateRgb("red", "blue")) // Also works nicely with D3 interpolators.
ramp(d3.interpolateLab("red", "blue"))
ramp(d3.interpolateHclLong("red", "blue"))
d3 = require("d3-scale-chromatic@1", "d3-interpolate@1")
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.
