map = {
const context = DOM.context2d(width, height);
const path = d3.geoPath(projection, context);
context.save();
context.beginPath(),
path(outline),
context.clip(),
(context.fillStyle = "#fff"),
context.fillRect(0, 0, width, height);
context.beginPath(),
path(graticule),
(context.strokeStyle = "#ccc"),
context.stroke();
// Draw the land layer with an opacity setting
//////////////////////////////////////////////
context.beginPath();
path(land);
// This is set in the pull down at the top
context.globalCompositeOperation = operation;
// This is calculated in the function in the next box down
context.fillStyle = rbga;
context.fill();
//////////////////////////////////////////////
context.restore();
context.beginPath(),
path(outline),
(context.strokeStyle = "#000"),
context.stroke();
return context.canvas;
}
rbga = {
const rgba = d3.color(color);
rgba.opacity = alpha;
return rgba.toString();
}
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.
