Public
Edited
May 8, 2023
Paused
viewof color = Inputs.color({label: "Favorite color", value: "#CB2E2E"})
hsl = hexToHSL(color)
Plot.plot({
marks: [
Plot.rectY(olympians, Plot.binX({y: "count"}, {x: "weight", fill: hsl})),
Plot.ruleY([0])
]
})
function hexToHSL(hex) {
// Convert hex to RGB first
let r = 0, g = 0, b = 0;
if (hex.length == 4) {
r = "0x" + hex[1] + hex[1];
g = "0x" + hex[2] + hex[2];
b = "0x" + hex[3] + hex[3];
} else if (hex.length == 7) {
r = "0x" + hex[1] + hex[2];
g = "0x" + hex[3] + hex[4];
b = "0x" + hex[5] + hex[6];
}
// Convert RGB to HSL
r /= 255;
g /= 255;
b /= 255;
let cmin = Math.min(r,g,b),
cmax = Math.max(r,g,b),
delta = cmax - cmin,
hue = 0,
saturation = 0,
lightness = 0;
if (delta == 0) {
hue = 0;
} else if (cmax == r) {
hue = ((g - b) / delta) % 6;
} else if (cmax == g) {
hue = (b - r) / delta + 2;
} else {
hue = (r - g) / delta + 4;
}
hue = Math.round(hue * 60);
if (hue < 0) {
hue += 360;
}
lightness = (cmax + cmin) / 2;
saturation = delta == 0 ? 0 : delta / (1 - Math.abs(2 * lightness - 1));
saturation = +(saturation * 100).toFixed(1);
lightness = +(lightness * 100).toFixed(1);
return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
}
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.
