Contour Labels (canvas)Coordinated mapsgeoformatSmall circle testKruskal MazeAll the geoshapesReprojecting Vector TilesCloud ContoursHello h3-jsTranslucent 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 methodOceanAttitudeCount visible objectsThe 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 segment
Clipping Albers
preclip = {
// Pre-clipping happens independently of the projection's rotate.
// If we want it to happen at the correct location (given in “Earth coordinates”)
// we need to rotate the polygon manually
var rotate = d3.geoRotation(projection.rotate());
var P1rotated = {type: "Polygon", coordinates: [ P1.coordinates[0].slice().map(rotate) ]};
return d3.geoClipPolygon(P1rotated);
}
P1 = ({type:"Polygon", coordinates:[ [ [ 30, 60 ], [ 90, 60 ], [ 90, 30 ], [ 30, 30 ], [ 30, 60 ] ] ]})
P2 = ({type:"Polygon", coordinates:[ [ [ 45, 75 ], [ 75, 75 ], [ 75, 15 ], [ 45, 15 ], [ 45, 75 ] ] ]})
function map(projection) {
const height = width / 2;
const context = DOM.context2d(width, height);
projection.preclip(preclip);
projection.fitExtent([[width/6,height/6],[width*5/6, height*5/6]], {type:"Sphere"});
var path = d3.geoPath(projection, context);
context.clearRect(0,0,width, width/2);
context.beginPath(), path(P1), context.fillStyle = "lime", context.fill();
context.beginPath(), path(P2), context.fillStyle = "cyan", context.fill(), context.stroke();
projection.preclip(d3.geoClipAntimeridian)
context.globalAlpha = 0.3;
context.beginPath(), path(P1), context.fillStyle = "lime", context.fill();
context.beginPath(), path(P2), context.fillStyle = "cyan", context.fill();
context.beginPath(), path(d3.geoGraticule()()), context.strokeStyle = "#ccc", context.stroke();
context.globalAlpha = 1;
return context.canvas;
}
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.
