Petroff QuincuncialTwo point equidistantCylindrical Equal-Area ProjectionsSatellite ExplorerHufnagelGeoTIFF contours IILee Oblated StereographicModified Stereographic AlaskaMiller Oblated StereographicInterrupted Homolosine OceansInterrupted Mollweide OceansFoucautGringorten QuincuncialWaterman’s ButterflyPolyhedral GnomonicGingeryGilbertFoucaut SinusoidalPolyhedral CollignonCollignonCylindrical Equal-AreaSatelliteCraigCrasterCylindrical StereographicEckert IEckert IIEckert IIIEckert VEckert VIEisenlohrFaheyGinzburg IVGinzburg VGinzburg VIGinzburg VIIIGinzburg IXGringortenGuyouHammer RetroazimuthalHEALPixEckert IVHill EucyclicLagrangeLarrivéeLaskowski Tri-OptimalLittrowLoximuthalRobinsonRectangular PolyconicPolyconicPatterson CylindricalNell–HammerNatural Earth IIFlat-Polar QuarticFlat-Polar ParabolicMillerFlat-Polar SinusoidalTimesVan der Grinten IVan der Grinten IIVan der Grinten IIIVan der Grinten IVWagner IVKavrayskiy VIIWagner VIWagner VIIWiechelWinkel TripelInterrupted SinusoidalPeirce QuincuncialBottomleyWernerBonneAtlantisMollweide HemispheresInterrupted MollweideInterrupted Goode HomolosineGoode HomolosineBromleyInterrupted Boggs EumorphicSinu-MollweideMollweideSinusoidalBoggs EumorphicBerghaus StarBaker DinomicAugustArmadilloAitoffAiry’s Minimum-ErrorHammerBriesemeisterInterrupted Sinu-Mollweide
Gs50
projection = d3.geoModifiedStereographicGs50()
{
const context = DOM.context2d(w, h);
const path = d3.geoPath(projection.fitSize([w,h], outline), context);
context.save();
context.beginPath(), path(outline), context.clip(), context.fillStyle = "#fff", context.fillRect(0, 0, w, h);
context.beginPath(), path(graticule), context.lineWidth = 0.5, context.strokeStyle = "#ccc", context.stroke();
context.beginPath(), path(land), context.fillStyle = "#a8a8a8", context.fill();
context.beginPath(), path(us), context.fillStyle = "#cecece", context.fill();
context.beginPath(), path(countries), context.lineWidth = 1, context.strokeStyle = "#333", context.stroke();
context.restore();
context.beginPath(), path(outline), context.strokeStyle = "#000", context.stroke();
return context.canvas;
}
// Outline from https://www.jasondavies.com/maps/modified-stereographic/gs50/
outline = {
return {
type: "Polygon",
coordinates: [
[[-180, 30]]
.concat(parallel(75, -180, -60))
.concat([
[-60, 70],
[-50, 70],
[-50, 40],
[-60, 40],
[-60, 30],
[-65, 30]
])
.concat(parallel(15, -65, -165))
.concat([[-165, 30], [-180, 30]])
]
};
function parallel(y, x0, x1) {
var dx = x0 < x1 ? 5 : -5;
return d3.range(x0, x1 + dx / 2, dx).map(x => [x, y]);
}
}
graticule = d3
.geoGraticule()
.extent([[-180, 0], [-50, 80 + 1e-6]])
.step([5, 5])()
w = width
h = (width * (710 / 960)) | 0
world = d3.json("https://unpkg.com/world-atlas@2.0.2/countries-50m.json")
land = topojson.feature(world, world.objects.land)
countries = topojson.mesh(world, world.objects.countries)
us = topojson.feature(world, world.objects.countries).features.filter(d => d.id === "840")[0]
topojson = require("topojson-client@3")
d3 = require("d3@6", "d3-geo-projection@3")
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.
