Published
Edited
Mar 25, 2021
1 fork
3 stars
Insert cell
Insert cell
Insert cell
viewof view = vl.markSquare({size: 4, opacity: 1})
.data(vl.data().name('colors')) // empty named dataset, we will populate below!
.encode(
vl.x().fieldQ('0').scale({domain: [-100, 100]}).title('a*'),
vl.y().fieldQ('1').scale({domain: [-120, 100]}).title('b*'),
vl.color().fieldN('2').scale(null)
)
.width(400).height(440)
.render()
Insert cell
// update view data when backing colors update
view.data('colors', colors).runAsync(), md`${colors.length} colors!`
Insert cell
colors = {
const inGamut = v => (0 <= v && v <= 255);
const data = [];

// generate full grid of a-b coordinates
d3.cross(d3.range(-100, 101, 1), d3.range(-120, 101, 1))
.forEach(([a, b]) => {
// generate LAB color, keep those within RGB gamut
const c = d3.rgb(d3.lab(L, a, b));
if (inGamut(c.r) && inGamut(c.g) && inGamut(c.b)) {
data.push([a, b, c + ''])
}
});

return data;
}
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more