Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
color_rgb = [
parseInt(color.slice(1, 3), 16) / 255,
parseInt(color.slice(3, 5), 16) / 255,
parseInt(color.slice(5, 7), 16) / 255
]
function rgb_lrgb1(v) {
return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
}
function rgb_lrgb([r, g, b]) {
return [rgb_lrgb1(r), rgb_lrgb1(g), rgb_lrgb1(b)];
}
color_lrgb = rgb_lrgb(color_rgb)
matrix_lrgb_xyzd50 = [
0.4360747, 0.3850649, 0.1430804,
0.2225045, 0.7168786, 0.0606169,
0.0139322, 0.0971045, 0.7141733
]
function lrgb_xyzd50(rgb) {
return matrix_multiply_vector(matrix_lrgb_xyzd50, rgb);
}
color_xyzd50 = lrgb_xyzd50(color_lrgb)
matrix_lrgb_xyzd65 = [
0.4124564, 0.3575761, 0.1804375,
0.2126729, 0.7151522, 0.0721750,
0.0193339, 0.1191920, 0.9503041
]
matrix_xyzd65_xyzd50 = [
1.0478112, 0.0228866, -0.0501270,
0.0295424, 0.9904844, -0.0170491,
-0.0092345, 0.0150436, 0.7521316
]
matrix_multiply_vector(matrix_xyzd65_xyzd50, matrix_multiply_vector(matrix_lrgb_xyzd65, color_lrgb))
tristimulus_d50 = [
matrix_lrgb_xyzd50[0] + matrix_lrgb_xyzd50[1] + matrix_lrgb_xyzd50[2],
matrix_lrgb_xyzd50[3] + matrix_lrgb_xyzd50[4] + matrix_lrgb_xyzd50[5],
matrix_lrgb_xyzd50[6] + matrix_lrgb_xyzd50[7] + matrix_lrgb_xyzd50[8]
]
xyzd50_lab = {
function f(t) {
return t > ((6 / 29) ** 3)
? Math.cbrt(t)
: t / (3 * (6 / 29) ** 2) + (4 / 29);
}
return function xyzd50_lab([x, y, z]) {
const fx = f(x / tristimulus_d50[0]);
const fy = f(y / tristimulus_d50[1]);
const fz = f(z / tristimulus_d50[2]);
return [
116 * fy - 16,
500 * (fx - fy),
200 * (fy - fz)
];
};
}
color_lab = xyzd50_lab(color_xyzd50)
function rgb_lab(rgb) {
return xyzd50_lab(lrgb_xyzd50(rgb_lrgb(rgb)));
}
lab_xyzd50 = {
function f(t) {
return t > 6 / 29
? t ** 3
: 3 * (6 / 29) ** 2 * (t - 4 / 29);
}
return function lab_xyzd50([l, a, b]) {
const fl = (l + 16) / 116;
const fa = a / 500;
const fb = b / 200;
return [
tristimulus_d50[0] * f(fl + fa),
tristimulus_d50[1] * f(fl),
tristimulus_d50[2] * f(fl - fb)
];
};
}
inverse_xyzd50 = lab_xyzd50(color_lab)
matrix_xyzd50_lrgb = [
3.1338561, -1.6168667, -0.4906146,
-0.9787684, 1.9161415, 0.0334540,
0.0719453, -0.2289914, 1.4052427
]
function xyzd50_lrgb(xyz) {
return matrix_multiply_vector(matrix_xyzd50_lrgb, xyz);
}
inverse_lrgb = xyzd50_lrgb(inverse_xyzd50)
function lrgb_rgb1(v) {
return v <= 0.0031308 ? 12.92 * v : 1.055 * (v ** (1 / 2.4)) - 0.055;
}
function lrgb_rgb([r, g, b]) {
return [lrgb_rgb1(r), lrgb_rgb1(g), lrgb_rgb1(b)];
}
inverse_rgb = lrgb_rgb(inverse_lrgb)
function lab_rgb(lab) {
return lrgb_rgb(xyzd50_lrgb(lab_xyzd50(lab)));
}
inverse = `#${
Math.round(inverse_rgb[0] * 255).toString(16).padStart(2, "0")}${
Math.round(inverse_rgb[1] * 255).toString(16).padStart(2, "0")}${
Math.round(inverse_rgb[2] * 255).toString(16).padStart(2, "0")
}`
color
matrix_xyzd65_lrgb = [
3.2404542, -1.5371385, -0.4985314,
-0.9692660, 1.8760108, 0.0415560,
0.0556434, -0.2040259, 1.0572252
]
matrix_xyzd50_xyzd65 = [
0.9555766, -0.0230393, 0.0631636,
-0.0282895, 1.0099416, 0.0210077,
0.0122982, -0.0204830, 1.3299098
]
matrix_multiply_matrix(matrix_xyzd65_lrgb, matrix_xyzd50_xyzd65)
function matrix_multiply_vector([
a, b, c,
d, e, f,
g, h, i
], [
x,
y,
z
]) {
return [
a * x + b * y + c * z,
d * x + e * y + f * z,
g * x + h * y + i * z
];
}
function matrix_multiply_matrix([
a0, b0, c0,
d0, e0, f0,
g0, h0, i0
], [
a1, b1, c1,
d1, e1, f1,
g1, h1, i1
]) {
return [
a0 * a1 + b0 * d1 + c0 * g1, a0 * b1 + b0 * e1 + c0 * h1, a0 * c1 + b0 * f1 + c0 * i1,
d0 * a1 + e0 * d1 + f0 * g1, d0 * b1 + e0 * e1 + f0 * h1, d0 * c1 + e0 * f1 + f0 * i1,
g0 * a1 + h0 * d1 + i0 * g1, g0 * b1 + h0 * e1 + i0 * h1, g0 * c1 + h0 * f1 + i0 * i1
];
}
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.
