yvaralStyle = new g.Style({
drawFun: (cells, cg, r) => {
//select cells with population
cells = cells.filter((c) => c.ind);
//compute min/max population
const ext = d3.extent(cells, (c) => +c.ind);
for (let c of cells) {
//compute shading parameter, based on the distance of the cell center to the map center
const xS = cg.geoToPixX(c.x + r / 2),
yS = cg.geoToPixY(c.y + r / 2),
d = Math.hypot(xS - cg.w / 2, yS - cg.h / 2),
ref = cg[cg.w > cg.h ? "w" : "h"] / 2,
dr = d / ref;
// triangle direction, such that it changes wrt angle
// TODO: Maybe base on nearest coast for more ambiguity?
const sX = Math.sign(yS - cg.h / 2),
sY = Math.sign(xS - cg.w / 2),
idx = sX + (sY + 3) / 2,
mY = idx % 2,
mX = (idx > 1) | 0,
cx = c.x + r * mX,
cy = c.y + r * mY,
dx = (1 - 2 * mX) * r,
dy = (1 - 2 * mY) * r;
//fill triangle 1 - darker
cg.ctx.beginPath();
cg.ctx.moveTo(cx, cy);
cg.ctx.lineTo(cx, cy + dy);
cg.ctx.lineTo(cx + dx, cy + dy);
cg.ctx.closePath();
cg.ctx.fillStyle = colorRampDarkPurple(dr);
cg.ctx.fill();
//fill triangle 2 - brighter
cg.ctx.beginPath();
cg.ctx.moveTo(cx, cy);
cg.ctx.lineTo(cx + dx, cy);
cg.ctx.lineTo(cx + dx, cy + dy);
cg.ctx.closePath();
cg.ctx.fillStyle = colorRampBrightPurple(dr);
cg.ctx.fill();
//square color
let t = (c.ind - ext[0]) / (ext[1] - ext[0]);
t = scale(t);
cg.ctx.fillStyle = colorRamp(t);
//fill square
t = t * 0.8 + 0.1;
cg.ctx.fillRect(cx, cy, dx * t, dy * t);
}
}
})
scale = g.logarithmicScale(-stretch)
colorRamp = d3.scaleLinear([0, 0.5, 1], ["black", "red", "orange"])
colorRampDarkPurple = d3.scaleLinear([0, 1], ["#2c2837", "#524885"])
colorRampBrightPurple = d3.scaleLinear([0, 1], ["#b9afd2", "#b9afd2"])
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.
