Plot.plot({
height: 200,
x: {
label: "hue (degrees)",
ticks: [0, 60, 120, 180, 240, 300, 360],
grid: true
},
y: { label: "luminance" },
insetBottom: 15,
marks: [
Plot.ruleY([0]),
Plot.lineY(data, { x: "h", y: "lum" }),
// color bar
(_index, scales, _values, { width, height }) =>
Plot.raster({
width: 360,
height: 1,
fill: (h) => {
const [r, g, b] = hsv2rgb(h, 1, 1);
return d3.rgb(r * 255, g * 255, b * 255).formatHex();
}
})
.plot({
width,
height,
x: scales.scales.x,
y: { range: [scales.y(0), scales.y(0) + 15] },
axis: null
})
.querySelector("g") // fixed in Plot 0.6.17, see https://github.com/observablehq/plot/pull/2219
]
})
// Change interval between h values
dh = 2
data = {
var d = [];
for (var h = 0; h <= 360; h += dh) {
var [r, g, b] = hsv2rgb(h, 1, 1);
// quick & dirty estimate of rgb luminance
var lum =
0.2126 * Math.pow(r, 2.2) +
0.7152 * Math.pow(g, 2.2) +
0.0722 * Math.pow(b, 2.2);
d.push({ h, lum, css: `rgb(${r * 255} ${g * 255} ${b * 255})` });
}
return d;
}
function hsv2rgb(h,s,v)
{
let f= (n,k=(n+h/60)%6) => v - v*s*Math.max( Math.min(k,4-k,1), 0);
return [f(5),f(3),f(1)];
}
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.
