Published
Edited
Mar 26, 2022
1 star
compare([ '#9ad0ef', d3Color128.hcl(NaN, NaN, 100) ])
compare([ d3Color128.hcl(NaN, 0, 0), 'yellow', d3Color128.hcl(NaN, NaN, 100) ])
compare(['black', "yellow", 'white'])
compare(['#9ad0ef', 'white'])
interpolateHclClamped = function() {
return function(start, end) {
var h = hue((start = d3Color128.hcl(start)).h,
(end = d3Color128.hcl(end)).h),
l = color(start.l, end.l);
// use max chroma instead; this should move to hcl in d3-color lab.js; but for demonstration
var c = color(Math.min(start.c, max_chroma(start.h, start.l)),
Math.min(end.c, max_chroma(end.h, end.l)));
var opacity = color(start.opacity, end.opacity);
return function(t) {
start.h = h(t);
start.l = l(t);
// ''
start.c = Math.min(c(t), max_chroma(start.h, start.l));
start.opacity = opacity(t);
return start + "";
};
}
}
function compare(colors) {
return html`${[
ramp(d3.piecewise(d3.interpolateHcl, colors)),
ramp(d3.piecewise(d3.interpolateLab, colors)),
ramp(d3.piecewise(interpolateHcl(), colors)),
ramp(d3.piecewise(interpolateHclClamped(), colors))
]}`;
}
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.
