Published
Edited
Nov 23, 2020
Insert cell
Insert cell
map = {
const context = DOM.context2d(width, height);
const path = d3.geoPath(null, context);
context.canvas.style.maxWidth = "100%";
context.lineJoin = "round";
context.lineCap = "round";

context.fillStyle = "green";
context.globalAlpha = 0.2;

data.objects.BAUMKATOGDPoint.geometries.forEach(tree => {
context.fillRect(
projection(tree.coordinates)[0],
projection(tree.coordinates)[1],
1,
1
);
});

context.globalAlpha = 0.6;
context.beginPath();
d3
.geoPath()
.projection(projection)
.context(context)(danubeGeojson);
context.lineWidth = 6;
context.strokeStyle = "lightblue";
context.stroke();

return context.canvas;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more