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
]
color_lrgb = rgb_lrgb(color_rgb)
color_xyzd50 = lrgb_xyzd50(color_lrgb)
xn = tristimulus_d50[0]
yn = tristimulus_d50[1]
zn = tristimulus_d50[2]
un = 4 * xn / (xn + 15 * yn + 3 * zn)
vn = 9 * yn / (xn + 15 * yn + 3 * zn)
epsilon = 216 / 24389
kappa = 24389 / 27
function xyzd50_luv([x, y, z]) {
const d = x + 15 * y + 3 * z;
if (d === 0) return [0, 0, 0];
const yr = y / yn;
const l = yr > epsilon ? 116 * Math.cbrt(yr) - 16 : kappa * yr;
return [
l,
13 * l * (4 * x / d - un),
13 * l * (9 * y / d - vn)
];
}
color_luv = xyzd50_luv(color_xyzd50)
function luv_xyzd50([l, u, v]) {
if (l === 0) return [0, 0, 0];
const up = u / (13 * l) + un;
const vp = v / (13 * l) + vn;
const y = yn * (l > 8 ? ((l + 16) / 116) ** 3 : l / kappa);
const d = 4 * vp;
return [
y * 9 * up / d,
y,
y * (12 - 3 * up - 20 * vp) / d
];
}
luv_xyzd50(color_luv)
function luv_hcl([l, u, v]) {
const h = Math.atan2(v, u) * rad2deg;
return [h < 0 ? h + 360 : h, Math.hypot(u, v), l];
}
function hcl_luv([h, c, l]) {
h *= deg2rad;
return [l, c * Math.cos(h), c * Math.sin(h)];
}
color_hcl = luv_hcl(color_luv)
hcl_luv(color_hcl)
rad2deg = 180 / Math.PI
deg2rad = Math.PI / 180
import {
tristimulus_d50,
rgb_lrgb,
lrgb_rgb,
lrgb_xyzd50,
xyzd50_lrgb,
xyzd50_lab,
lab_xyzd50
} from "@mbostock/lab-and-rgb"
import {ramp} from "@mbostock/color-ramp"
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.
