Public
Edited
Apr 11
1 star
// Change interval between h values
dh = 3
// change the start of our data
h_begin = 0
viewof value_scale = Inputs.range([0.1, 1], {label: "Value", value: 1, step: .001})
// a toy example of a data set that comes with a display color channel
data = {
var d = [];
for (var h = h_begin; h <= 360; h += dh) {
var [r, g, b] = hsv2rgb(h, 1, value_scale);
// 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: d3.rgb(r * 255, g * 255, b * 255).formatHex() });
}
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.
