ciede2000 = (await require("d3-color-difference")).differenceCiede2000
ramp(d3.interpolatePlasma)
ramp(d3.interpolateRainbow) // interpolateWarm + interpolateCool
ramp(d3.interpolateCividis)
ramp(d3.interpolateSinebow)
ramp(d3.interpolateSpectral)
ramp(d3.interpolateViridis)
ramp(d3.interpolateTurbo)
ramp(d3.interpolateInferno)
ramp(d3.interpolateMagma)
ramp(d3.interpolateReds)
ramp(d3.interpolateGreens)
ramp(d3.interpolateGreys)
import { lut } from "@fil/cmocean"
ramp(await lut("Thermal"))
ramp(await lut("Phase"))
import { ramp as framp, schemes } from "@fil/colormaps" // fcrameri
ramp(framp(schemes.roma))
ramp(framp(schemes.berlin))
function ramp(interpolate) {
const color = d3.scaleSequential(interpolate),
res = getProfile(color);
const height = 200,
context = DOM.context2d(width, height),
x = d3.scaleLinear([0, res.colors.length - 1], [0, width]),
diff = blur().radius(4)(res.diff),
y = d3.scaleLinear([0, 1], [height, 1]),
line = d3
.line()
.x((_, i) => x(i + .5))
.y(y)
.context(context),
data = [];
for (let i = 0; i < res.colors.length; i++) {
context.fillStyle = res.colors[i];
context.fillRect(x(i), 0, x(i + 1) + 1 - x(i), height);
}
context.strokeStyle = "white";
context.beginPath();
line(diff);
context.stroke();
return context.canvas;
}
function getProfile(color) {
const diff = [],
colors = linspace(0, 1, width / 2).map(color);
for (let i = 0; i < colors.length; i++)
diff.push(ciede2000(colors[i], colors[i - 1]));
diff.shift();
return { colors, diff };
}
d3 = require("d3@5", "d3-scale-chromatic@1")
function linspace(start, stop, n = 50, endpoint = true) {
(n = Math.floor(n)),
(start = +start),
(stop = (stop - start) / (endpoint ? n - 1 : n));
var i = -1,
range = new Array(n);
while (++i < n) {
range[i] = start + i * stop;
}
return range;
}
import { blur } from "@fil/moving-average-blur"
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.
