The avatar for @visionscarto
Visionscarto
Maps — and other representations of the world.
Published
#30DayMapChallenge
Edited
Mar 19, 2022
1 fork
Importers
15 stars
3
#30DayMapChallenge
Dotted OceansWorld Cities GabrielAntipodal ArchipelagoBi-Hexagonal ProjectionParis, TexasUSSR, 1938Hex NDVIIGRF-90🌖 Crater-shadingModified Stereographic Alaska GLSLVolcano on A-FrameBorn in AntarcticaNatural Earth issuesHello, spl.jsNéguentropieLoir-et-Cher isodémographiqueTheoretical land cover
Five Oceans
Pantelleria Joy PlotRouting dollarsDeriving PantelleriaGuessing CzechoslovakiaGHSL — Growing and decliningHistorical shapefilesThe E.N.D GameAnn Arbor pycnophylacticSpherical signed distanceWalk-on-Spheres… on a SpherePotential dollar flowsThirty days and as many maps
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
topo = FileAttachment("five-oceans@2.json").json()
Insert cell
Insert cell
oceans = topojson.feature(topo, topo.objects.oceans)
Insert cell
Insert cell
Insert cell
Insert cell
diff = (A, B) => {
const r = d3.geoCentroid(A)[0] < -120 ? -120 : 0; // fix Pacific
const p = d3.geoEquirectangular().rotate([r, 0]);
A = d3.geoProject(A, p).coordinates;
B = d3.geoProject(B, p).coordinates;

return d3.geoStitch({
type: "MultiPolygon",
coordinates: clip.difference(A, B).map((poly) =>
poly.map(
(ring) =>
ring
.map(p.invert)
.map((d) => (Math.abs(d[0]) === 180 && d[1] > 60 ? [d[0], 67] : d)) // fix Arctic
)
)
});
}
Insert cell
clippedOceans = ({
type: "FeatureCollection",
features: oceans.features.map((f) => ({
...f,
geometry: diff(f.geometry, land.features[0].geometry)
}))
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// https://observablehq.com/@mbostock/spilhaus-shoreline-map
function spilhaus(width) {
return d3
.geoStereographic()
.rotate([95, 45])
.translate([width / 2, width / 2])
.scale(width / 10.1)
.center([30, -5])
.clipAngle(166);
}
Insert cell
d3 = require("d3@7", "d3-geo-projection@4", "d3-geo-polygon@1.9")
Insert cell
// Plot.carto is an experimental plugin for Observable Plot
import { Plot } from "@fil/plot-carto-0-5"
Insert cell
land = d3.json(
"https://unpkg.com/visionscarto-world-atlas@0.0.6/world/110m_land.geojson"
)
Insert cell
labelPositions = [
[0, -60], // ATA
[-40, 20], // ATL
[85, -20], // IND
[45, 75], // ARC
[-145, 0] // PAC
]
Insert cell
color = (i) => d3.schemeBlues[8][i + 2]
Insert cell
clip = require("polygon-clipping@0.15.3")
Insert cell
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more