Dataviz at Office for National Statistics (UK)
apcaTable = {
const table = d3.create("table");
const thead = table.append("thead");
thead
.append("tr")
.selectAll("th")
.data(["", ...colours])
.join("th")
.style("color", (d) => d)
.style("text-shadow", "none")
.style("background", "white")
.text((d) => d);
const tbody = table.append("tbody");
colours.forEach((colour, row) => {
tbody
.append("tr")
.selectAll("td")
.data([colour, ...colours])
.join("td")
.style("text-shadow", "none")
.style("background", colour)
.style("color", (d, i) => (i ? d : "black"))
/*.style("font-weight", (d, i) =>
i > 0 && apca(d, colour) < 45 ? "normal" : "bold"
)*/
.text((d, i) =>
i === 0 ? d : i === row + 1 ? "" : apca(d, colour).toFixed(1)
);
});
return table.node();
}
extremes = {
let extremes = { worst: Infinity, best: 0 };
colours.forEach((d, i) => {
colours.forEach((e, j) => {
if (i <= j) return;
let contrast = chroma.contrast(d, e);
extremes.worst = Math.min(extremes.worst, contrast);
extremes.best = Math.max(extremes.best, contrast);
});
});
return extremes;
}
chroma = require("chroma-js")
chroma("#aabbcc").rgba()
apca = (fg, bg) =>
apcaw3.APCAcontrast(
apcaw3.sRGBtoY(chroma(fg).rgba()),
apcaw3.sRGBtoY(chroma(bg).rgba())
)
apcaw3 = import("https://cdn.skypack.dev/apca-w3")
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.
