Spilhaus shoreline mapNew Jersey State PlaneCustom cartesian projectionU.S. state choroplethWorld choroplethSpike mapBubble mapChoroplethRotating orthographicOceansWinding orderOrthographic shadingSolar TerminatorU.S. airports VoronoiStar mapSolar pathRaster tilesThreshold ChoroplethMapbox Vector TilesRaster Tiles (Canvas)Raster & vector IIClipped map tilesSketchy EarthCloud ContoursCountries by AreaVector fieldRaster & vectorVector tilesHexbin mapAntimeridian CuttingWorld AirportsWorld Airports DelaunayWorld airports Voronoiprojection.reflectXTesting projection visibilityNon-contiguous cartogramVersor ZoomingThree-Axis RotationContext to CurveOrthographic to equirectangularU.S. Map with Puerto RicoProjection TransitionsZoom to bounding boxZoomable Raster & VectorWorld Map (SVG)Web Mercator tilesU.S. Map (Canvas)Bivariate choroplethTissot’s indicatrixProjection comparisonCassiniWorld tourU.S. State CapitalsWorld map (canvas)U.S. MapConic Equal-AreaTransverse MercatorVersor draggingStereographicGnomonicOrthographicMercatorAzimuthal Equal-AreaAzimuthal EquidistantEquirectangularConic ConformalTobler–MercatorConic EquidistantNatural EarthEqual EarthOrthographic (SVG)Quantile Choropleth
Graticule labels (stereographic)
Also listed in…
Gallery
map = {
const clipIn = DOM.uid();
const clipOut = DOM.uid();
return html`<svg width=${width} height=${height} viewBox="0 0 ${width} ${height}" style="display:block;">
<defs>
<clipPath id="${clipIn.id}"><path d="${path(outline)}"></path></clipPath>
<clipPath id="${clipOut.id}"><path d="M0,0V${height}H${width}V0Z${path(outline)}"></path></clipPath>
</defs>
<path d="${path(graticule)}" stroke="#ccc" fill="none"></path>
<path clip-path="${clipIn}" d="${path(land)}"></path>
<path fill-opacity="0.1" clip-path="${clipOut}" d="${path(land)}"></path>
<path d="${path(outline)}" stroke="#000" fill="none"></path>
<g font-size="10" font-family="sans-serif" text-anchor="middle">
${d3.range(-80, 80 + 1, 10).map(y => svg`
<text transform="translate(${offset(projection([longitude + 90, y]), 10) + ""})" dy="0.35em" x="6">${formatLatitude(y)}</text>
<text transform="translate(${offset(projection([longitude - 90, y]), 10) + ""})" dy="0.35em" x="-6">${formatLatitude(y)}</text>`)}
</g>
</svg>`;
}
formatLatitude = y => `${Math.abs(y)}°${y < 0 ? "S" : "N"}`
formatLongitude = x => `${Math.abs(x)}°${x < 0 ? "W" : "E"}`
path = d3.geoPath(projection)
longitude = -100
projection = d3.geoStereographic().rotate([-longitude, 0])
offset = ([x, y], k) => {
const [cx, cy] = projection.translate();
const dx = x - cx, dy = y - cy;
k /= Math.hypot(dx, dy);
return [x + dx * k, y + dy * k];
}
marginTop = 30
marginRight = 40
marginBottom = 30
marginLeft = 40
height = {
const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, outline)).bounds(outline);
const dx = x1 - x0;
const k = (dx - marginLeft - marginRight) / dx;
const dy = (y1 - y0) * k + marginBottom + marginTop;
projection.scale(projection.scale() * k);
projection.translate([(dx + marginLeft - marginRight) / 2, (dy + marginTop - marginBottom) / 2]);
projection.precision(0.2);
return Math.round(dy);
}
outline = d3.geoCircle().radius(90).center([longitude, 0])()
graticule = d3.geoGraticule10()
land = topojson.feature(world, world.objects.land)
world = FileAttachment("land-50m.json").json()
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.
