Public
Edited
Oct 24, 2023
2 forks
2 stars
Petroff QuincuncialTwo point equidistantCylindrical Equal-Area ProjectionsSatellite ExplorerHufnagelGeoTIFF contours IIGs50Lee Oblated StereographicModified Stereographic AlaskaMiller Oblated StereographicInterrupted 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
Interrupted Homolosine Oceans
Also listed in…
30 Day Map Challenge
projection = d3.geoInterrupt(
d3.geoHomolosineRaw,
[[ // northern hemisphere
[[-180, 0], [-130, 90], [-90, 0]],
[[-90, 0], [-30, 90], [60, 0]],
[[60, 0], [120, 90], [180, 0]]
], [ // southern hemisphere
[[-180, 0], [-120, -90], [-60, 0]],
[[-60, 0], [20, -90], [100, 0]],
[[100, 0], [140, -90], [180, 0]]
]]
).rotate([-200, 0])
map = {
const context = DOM.context2d(width, height);
const path = d3.geoPath(projection, context);
context.save();
context.beginPath(), path(outline), context.clip(), context.fillStyle = "#fff", context.fillRect(0, 0, width, height);
context.beginPath(), path(ocean), context.fillStyle = "#b7ccbb", context.fill();
context.beginPath(), path(graticule), context.lineWidth = 0.5, context.globalAlpha = 0.2, context.stroke();
context.restore();
context.beginPath(), path(outline), context.strokeStyle = "#000", context.stroke();
return context.canvas;
}
height = {
const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, outline)).bounds(outline);
const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);
projection.scale(projection.scale() * (l - 1) / l).precision(0.2);
return dy;
}
outline = ({type: "Sphere"})
graticule = d3.geoGraticule10()
ocean = topojson.feature(world, world.objects.ocean)
world = FileAttachment("ocean.json").json()
d3 = require("d3-geo@3", "d3-geo-projection@4")
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.
