ramp_xyz(t => {
const i = Math.round(t * (830 - 390) + 390) - 390;
return cmf.slice(i * 3, i * 3 + 3);
})
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
function spectrum_xyz(spectrum) {
let X = 0, Y = 0, Z = 0;
for (let i = -1, lambda = 390; lambda <= 830; ++lambda) {
const v = c / (lambda * 1e-9);
const B = spectrum(v);
X += B * cmf[++i];
Y += B * cmf[++i];
Z += B * cmf[++i];
}
const K = X + Y + Z;
return [X / K, Y / K, Z / K];
}
function ramp_xyz(xyz) {
// const clamp = culori.clamp('lch');
const height = 66;
const context = DOM.context2d(width, height, 1);
context.canvas.style.imageRendering = "pixelated";
for (let x = 0; x < width; ++x) {
const rgb = xyz_rgb(xyz(x / width));
const c = clamp_lc(culori.lch({ mode:'rgb', r: rgb[0], g: rgb[1], b: rgb[2] }));
context.fillStyle = culori.formatRgb(c);
context.fillRect(x, 0, 1, height);
}
return context.canvas;
}
function normalize(color) {
const max = Math.max(...color);
return max > 0 ? color.map(c => c / max) : color;
}
function constrain(color) {
const min = -Math.min(0, ...color);
return min > 0 ? color.map(c => c + min) : color;
}
function xyz_rgb(xyz) {
return lrgb_rgb(matrix_multiply_vector(matrix_xyzd50_lrgb, xyz));
}
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.
