Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
c1 = rgb_lrgb(d3.rgb(colors.background))
c2 = rgb_lrgb(d3.rgb(colors.foreground))
function rgb_lrgb({r, g, b}) {
return [r / 255, g / 255, b / 255].map(rgb_lrgb1);
}
function rgb_lrgb1(v) {
return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
}
l1 = lrgb_luminance(c1)
l2 = lrgb_luminance(c2)
function lrgb_luminance([r, g, b]) {
return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}
c = (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05)
function contrast(c1, c2) {
const l1 = lrgb_luminance(rgb_lrgb(d3.rgb(c1)));
const l2 = lrgb_luminance(rgb_lrgb(d3.rgb(c2)));
return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
}
contrast("yellow", "blue")
criteria = [
{level: "AAA", content: "normal text", value: 7.0},
{level: "AAA", content: "large text", value: 4.5},
{level: "AA", content: "normal text", value: 4.5},
{level: "AA", content: "large text", value: 3.0},
{level: "AA", content: "graphics", value: 3.0}
]
d3 = require("d3-color@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.
