Published
Edited
Aug 17, 2022
1 star
{
let spans = [];
let numSteps = 5;
for (let i = 0; i < numSteps; i++) {
let color = d3.color(d3.interpolateLab('#000000','#ff0000')(i / numSteps));
spans.push(getColorSpan(color, color.formatHex()));
}
for (let i = 0; i <= numSteps; i++) {
let color = d3.color(d3.interpolateLab('#ff0000','#ffffff')(i / numSteps));
spans.push(getColorSpan(color, color.formatHex()));
}
return html`${spans.join(' ')}`;
}
getJNDspans('#d6604d',[-18,-12,-6,0,6,12,18])
getJNDspans('#bb4838',[0,3,6,12,18,6,9,12,18,24,12,15,18,24,30].map(d=>d-9),22)
getJNDspans('#a03024',[0,3,6,9,12,15,18,21,24,27,30,33],22)
d3.lab('#7d070a')
d3.lab('#8e1e17')
{
let c = d3.lab('#a03024');
c.l += 6;
return c.formatHex()
}
{
let arr = [];
for (let i = 0; i < 6; i+=.25) {
arr.push([i,3*Math.round(i / 3)]);
}
return arr;
}
{
let color = d3.lab('#bb4838');
let color2 = d3.lab('#bb4838');
color2.l += 15;
return [color, color2, color.formatHex(), color2.formatHex()];
}
d3.lab(d3.lab('#ff8872').l, d3.lab('#ff8872').a, d3.lab('#ff8872').b).formatHex()
function getJNDspans(baseColor, deltas, fontSize) {
let color = d3.lab(baseColor);
if (deltas === undefined) { deltas = [-9,-6,-3,0,3,6,9]; }
if (fontSize === undefined) { fontSize == 22; }
let colors = [];
deltas.forEach(function(delta) {
colors.push(getColorPlusL(baseColor, delta));
});
return html`${colors.map(c=>getColorSpan(c, c.formatHex(), 'NOPE', fontSize)).join(' ')}`;
}
function getColorPlusL(color, lStar) {
let labColor = d3.lab(color);
labColor.l += lStar;
return labColor;
}
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.
