webPositions = Object.entries(WEB_COLORS).map(([name, [r, g, b]]) => {
const rgb = { mode: "rgb", r: r / 255, g: g / 255, b: b / 255 };
const hex = culori.formatHex(rgb);
const { l, a, b: bp } = culori.oklab(rgb);
return {
name,
hex,
a: a + Math.sin(l * Math.PI) / SHUNT_FACTOR,
b: bp + Math.cos(l * Math.PI) / SHUNT_FACTOR,
l
};
})
abDisplayabilityCoordinates = {
const ranges = culori.modeOklab.ranges;
const lRange = [...d3.range(...ranges.l, 0.005), ranges.l];
const aRange = [...d3.range(...ranges.a, 0.005), ranges.a];
const bRange = [...d3.range(...ranges.b, 0.005), ranges.b];
const isDisplayableAtAnyLightness = (a, b) =>
lRange.some((l) => {
return culori.displayable({ mode: "oklab", l, a, b });
});
return aRange.flatMap((a) =>
bRange.map((b) => {
const displayable = isDisplayableAtAnyLightness(a, b);
return { a, b, displayable };
})
);
}
displayabilityMaskMark = Plot.voronoi(abDisplayabilityCoordinates, {
x: "a",
y: "b",
fill: "white",
stroke: "white",
strokeWidth: 0,
fillOpacity: (d) => (d.displayable ? 0 : 1)
})
xkcdColors = Object.fromEntries(
rgb
.split("\n")
.slice(1)
.map((line) => {
const [name, hex] = line.split("\t");
return [name, hex];
})
)
xkcdPositions = Object.entries(xkcdColors).map(([name, hex]) => {
const oklab = culori.oklab(culori.parseHex(hex || "#000000"));
return { name, hex, ...oklab };
})
satfaces = (await FileAttachment("satfaces.txt").text())
satPositions = satfaces.split("\n").map((line) => {
// Be careful here, a lot of overwriting already used variables and names.
let [r, g, b, ...name] = line.split(" ");
name = name.join(" ");
let triplet;
try {
triplet = JSON.parse(r + g + b);
} catch (error) {
triplet = [0, 0, 0];
}
[r, g, b] = triplet;
const rgb = { mode: "rgb", r: r / 255, g: g / 255, b: b / 255 };
const oklab = culori.oklab(rgb);
const hex = culori.formatHex(rgb);
return { l: oklab.l, a: oklab.a, b: oklab.b, name, hex };
})
hullNames = new Set(satPositions.map((p) => p.name))
hullNamePositions = [...hullNames].map((name) =>
xkcdPositions.find((p) => p.name === name)
)
hullNameAveragePositions = _(satPositions)
.groupBy((d) => d.name)
.mapValues((vs) => ({
a: _.mean(vs.map((p) => p.a)),
b: _.mean(vs.map((p) => p.b))
}))
.entries()
.map(([name, average]) => ({ name, ...average }))
.value()
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.
