hexagonal_map_w_canvas = {
const context = DOM.context2d(width, height);
const path = d3.geoPath(projection, context);
context.canvas.style.maxWidth = "100%";
context.lineJoin = "round";
context.lineCap = "round";
let _d = 0;
async function draw(transform) {
const me = ++_d;
context.restore();
context.save();
context.clearRect(0, 0, width, height);
context.translate(transform.x, transform.y);
context.scale(transform.k, transform.k);
context.beginPath();
path(nederland);
context.lineWidth = 1.5 / transform.k;
context.stroke();
context.clip();
context.lineWidth = 1.5 / transform.k;
for (let [i, d] of hex.grid.layout.entries()) {
if (i % 300 === 0) {
await wait(); if (me !== _d) return;
}
context.translate(d.x, d.y);
context.fillStyle = d.datapoints < 3 ? "#fff" : colourScale(d.datapoints);
context.fill(hexagon);
context.strokeStyle = "rgba(0, 0, 0, .15)";
context.stroke(hexagon);
context.translate(-d.x, -d.y);
}
}
d3.select(context.canvas)
.call(d3.zoom()
.scaleExtent([1, 8])
.on("zoom", () => draw(d3.event.transform)));
draw(d3.zoomIdentity);
return context.canvas;
}
d3.zoomIdentity.apply
hexagon = new Path2D(hex.hexagon())
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.
