dataviz engineer w/ passion for algorithms, maps & music
function pick(event, vertices) {
const x = event.layerX;
const y = event.layerY;
mutable t = cartesian2barycentric(x, y, vertices);
mutable color = d3.rgb(...getColor(x, y, vertices, colors)).hex();
}
mutable t = [0, 0, 0];
function getColor(x, y, vertices, colors) {
const t = cartesian2barycentric(x, y, vertices);
if (!showOutside && t.some(t => t < 0)) return [255, 255, 255];
return [
Math.floor(colors[0].r * t[0] + colors[1].r * t[1] + colors[2].r * t[2]),
Math.floor(colors[0].g * t[0] + colors[1].g * t[1] + colors[2].g * t[2]),
Math.floor(colors[0].b * t[0] + colors[1].b * t[1] + colors[2].b * t[2]),
];
}
function cartesian2barycentric(x, y, [[x1, y1], [x2, y2], [x3, y3]]) {
const y2y3 = y2 - y3,
x3x2 = x3 - x2,
x1x3 = x1 - x3,
y1y3 = y1 - y3,
y3y1 = y3 - y1,
xx3 = x - x3,
yy3 = y - y3;
const d = y2y3 * x1x3 + x3x2 * y1y3,
lambda1 = (y2y3 * xx3 + x3x2 * yy3) / d,
lambda2 = (y3y1 * xx3 + x1x3 * yy3) / d;
return [
lambda1,
lambda2,
1 - lambda1 - lambda2
];
}
function hex2rgb(str) {
const i = parseInt(str.slice(1), 16);
return {
r: i >> 16,
g: i >> 8 & 0xff,
b: i & 0xff
}
}
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.
