bertinPointsStyle = new g.Style({
drawFun: (cells, cg, r) => {
//keep only cells with population
cells = cells.filter((c) => c.ind);
//
const z = cg.view.z;
//sort cells by decreasing x and increasing y
cells.sort((c1, c2) => (c2.y == c1.y ? c1.x - c2.x : c2.y - c1.y));
//compute min/max value
const ext = d3.extent(cells, (c) => +c.ind);
//set canvas color and line width
if (!randomColor) cg.ctx.fillStyle = fillColor;
if (strokeWidthPix) {
cg.ctx.strokeStyle = strokeColor;
cg.ctx.lineWidth = strokeWidthPix * z;
}
for (let c of cells) {
//get circle size
const sG = radiusFactor * r * scale((c.ind - ext[0]) / (ext[1] - ext[0]));
//set random color (if)
if (randomColor)
cg.ctx.fillStyle = "rgb(" + r255() + "," + r255() + "," + r255() + ")";
//draw circle
cg.ctx.beginPath();
cg.ctx.arc(c.x + r / 2, c.y + r / 2, sG * 0.5, 0, 2 * Math.PI, false);
cg.ctx.fill();
if (strokeWidthPix) cg.ctx.stroke();
}
}
})
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.
