viewof visiblePoints = {
const context = DOM.context2d(width, height);
const projection = d3.geoOrthographic()
.fitExtent([[-1, -1], [width + 1, height + 1]], sphere)
.clipExtent([[-1, -1], [width + 1, height + 1]])
.rotate([0, -30]);
const path = d3.geoPath(projection, context)
.pointRadius(1.5);
function render() {
context.clearRect(0, 0, width, height);
context.beginPath();
path(graticule);
context.lineWidth = 0.5;
context.strokeStyle = "#aaa";
context.stroke();
context.beginPath();
path(land);
context.fillStyle = "#ddd";
context.fill();
context.beginPath();
path(sphere);
context.lineWidth = 1.5;
context.strokeStyle = "#000";
context.stroke();
context.beginPath();
path({type: "MultiPoint", coordinates: points});
context.fillStyle = "#000";
context.fill();
context.canvas.value = points.filter(tester(projection));
context.canvas.dispatchEvent(new CustomEvent("input"));
}
return d3.select(context.canvas)
.call(zoom(projection).on("zoom.render", render))
.call(render)
.node();
}