Contour Labels (canvas)Coordinated mapsgeoformatSmall circle testKruskal MazeAll the geoshapesReprojecting Vector TilesCloud ContoursHello h3-jsClipping AlbersTranslucent EarthThe truth about the Mercator projectionUsing d3-inertia with observableMercator projection of a Mercator globeD3 Vector Tiles (WIP)Finding intersections between the graticule and the clip sphere of the stereographic projection, method 2Plate tectonicsAnother hex mapEquateur & tropiquesTissot's indicatrixDistance to shoreMultiPolygon clippingSouth Africa’s medial axisSpherical intersectionVolcano Semis (points circulaires)Pencil Airocean45° mapNetCDFBlue noise sphereRubber DymaxionSpherical quasi-random (R2) distributionAutomated label placement (countries)Automated label placement (France)Automated label placement (cities)d3.geoIntersectArcDelaunay.findTriangled3-geo-voronoi and gridded dataElevation vtk.jsMapfillKrigingSpherical HeatmapReproject elevation tiles — detailReproject elevation tiles — worldFisheye Conformal MapSpherical KDE InterpolationSpherical kernel interpolation with nearest neighborsShepard’s methodModified Shepard’s methodSpherical contoursGeo Voronoi interpolationBlurry contoursHow much warmer? (BBC)H3 hexagons & geoContoursHillshading & supersamplingH3 odditiesManhattan VoronoiManhattan Voronoi IIGeoJSON feature editorColorized Manhattan Spanning Treelegra mapslegra country mapsThe complex logarithm projectionCountries small multipleThe 2D approximate Newton-Raphson methodOceanAttitudeThe Gray-Fuller spatial gridGray-Fuller grid metricsGray-Fuller grid odditiesSpherical smallest-circle problemBounding CirclesCountries Enclosing CirclesFullscreen Seamless Zoomable Map TilesMap Pan & ZoomSpherical EllipsesSynchronized projectionsThe closest countryTriangular tiling of icosahedronHello, polygon-clippingCorées / KoreasHello, procedural-glHello, placekeyZoom World ChoroplethClipping spherical polygonsSpherical phyllotaxisFour-color world map with ClingoHello, jsgeoda!The Sun’s analemmaWorld of squaresWorld of squares (spherical)A map of AfricaTagged bordersClipped geoVoronoiBlue noise sphere IISpherical Perlin NoiseSpherical Delaunay triangulationDynamic simplificationRewindPlot: Voronoi labelsAoC 12: shortest path under constraintsHello, pixi.jsFlight PathsRay out of a convex hullDistance to a segmentHello, A5
Count visible objects
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.
