projection = d3.geoEqualEarth()
.scale(200)
.translate([0, 0])
.clipExtent([[-100, -100], [100, 100]])
function visible(points, projection) {
const path = d3.geoPath(projection);
return points.filter(
coordinates => path({ type: "Point", coordinates }) !== null
);
}
{
const context = DOM.context2d(width, 510),
projection = d3
.geoOrthographic()
.translate([width / 2, 255])
.rotate([0, -30]),
path = d3.geoPath(projection, context);
context.beginPath();
path(d3.geoGraticule10());
path({ type: "Sphere" });
context.stroke();
context.beginPath();
path.pointRadius(2);
path({ type: "MultiPoint", coordinates: points });
context.fill();
context.beginPath();
path.pointRadius(3);
path({ type: "MultiPoint", coordinates: visiblePoints });
context.fillStyle = "red";
context.fill();
return context.canvas;
}
points = Array.from({ length: 10000 }, () => [
360 * Math.random(),
90 * (Math.random() - Math.random())
])
visiblePoints = visible(points, projection)
count = visiblePoints.length
d3 = require("d3@5")
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.
