29:null 2a:["$","title",null,{"children":"Map Projection Playground | Florian Ledermann | Observable"}] 2f:T18c0,projections = [ { category: "Azimuthal Projections", projections: [] }, {name: "Airy’s minimum error", value: d3.geoAiry}, {name: "Azimuthal equidistant", value: d3.geoAzimuthalEquidistant, highlight: true}, {name: "General perspective", value: d3.geoSatellite, highlight: true}, {name: "Gnomonic", value: d3.geoGnomonic}, {name: "Lambert Azimuthal equal-area", value: d3.geoAzimuthalEqualArea, highlight: true}, {name: "Orthographic", value: d3.geoOrthographic, highlight: true}, {name: "Stereographic", value: d3.geoStereographic}, {category: "Conic Projections"}, {name: "Conic equal-area", value: d3.geoConicEqualArea, highlight: true}, {name: "Conic equidistant", value: d3.geoConicEquidistant}, //{name: "conic conformal", value: d3.geoConicConformal}, // Not suitable for world maps. {category: "Cylindrical Projections"}, {name: "Equirectangular (plate carrée)", value: d3.geoEquirectangular, highlight: true}, {name: "Cylindrical equal-area", value: d3.geoCylindricalEqualArea, highlight: true}, {name: "Cylindrical stereographic", value: d3.geoCylindricalStereographic}, {name: "Collignon", value: d3.geoCollignon}, {name: "Mercator", value: d3.geoMercator, highlight: true}, {name: "Transverse Mercator", value: d3.geoTransverseMercator, highlight: true}, {name: "Miller cylindrical", value: d3.geoMiller}, {name: "Patterson cylindrical", value: d3.geoPatterson}, {category: "Interrupted / Polyhedral Projections"}, {name: "Berghaus’ star", value: d3.geoBerghaus}, {name: "Boggs’ eumorphic (interrupted)", value: d3.geoInterruptedBoggs}, {name: "Butterfly (gnomonic)", value: d3.geoPolyhedralButterfly}, {name: "Butterfly (Collignon)", value: d3.geoPolyhedralCollignon}, {name: "Butterfly (Waterman)", value: d3.geoPolyhedralWaterman}, {name: "Gingery", value: d3.geoGingery}, {name: "Goode’s homolosine (interrupted)", value: d3.geoInterruptedHomolosine}, {name: "HEALPix", value: d3.geoHealpix}, {name: "Mollweide (Goode’s interrupted)", value: d3.geoInterruptedMollweide}, {name: "Mollweide (interrupted hemispheres)", value: d3.geoInterruptedMollweideHemispheres}, {name: "sinusoidal (interrupted)", value: d3.geoInterruptedSinusoidal}, {name: "sinu-Mollweide (interrupted)", value: d3.geoInterruptedSinuMollweide}, {category: "Hybrid / Compromise / Other Projections"}, {name: "Aitoff", value: d3.geoAitoff}, {name: "American polyconic", value: d3.geoPolyconic}, {name: "Armadillo", value: d3.geoArmadillo}, {name: "August", value: d3.geoAugust}, {name: "Baker dinomic", value: d3.geoBaker}, {name: "Bertin’s 1953", value: d3.geoBertin1953}, {name: "Boggs’ eumorphic", value: d3.geoBoggs}, {name: "Bonne", value: d3.geoBonne, highlight: true}, {name: "Bottomley", value: d3.geoBottomley}, {name: "Bromley", value: d3.geoBromley}, {name: "Craig retroazimuthal", value: d3.geoCraig}, {name: "Craster parabolic", value: d3.geoCraster}, {name: "Eckert I", value: d3.geoEckert1}, {name: "Eckert II", value: d3.geoEckert2}, {name: "Eckert III", value: d3.geoEckert3}, {name: "Eckert IV", value: d3.geoEckert4}, {name: "Eckert V", value: d3.geoEckert5}, {name: "Eckert VI", value: d3.geoEckert6}, {name: "Eisenlohr conformal", value: d3.geoEisenlohr}, {name: "Equal Earth", value: d3.geoEqualEarth, highlight: true}, {name: "Fahey pseudocylindrical", value: d3.geoFahey}, {name: "Foucaut’s stereographic equivalent", value: d3.geoFoucaut}, {name: "Foucaut’s sinusoidal", value: d3.geoFoucautSinusoidal}, {name: "Gilbert’s two-world", value: d3.geoGilbert}, {name: "Ginzburg V", value: d3.geoGinzburg5}, {name: "Ginzburg VI", value: d3.geoGinzburg6}, {name: "Ginzburg VIII", value: d3.geoGinzburg8}, {name: "Ginzburg IX", value: d3.geoGinzburg9}, {name: "Gringorten quincuncial", value: d3.geoGringortenQuincuncial}, {name: "Gringorten square", value: d3.geoGringorten}, {name: "Guyou square", value: d3.geoGuyou}, {name: "Goode’s homolosine", value: d3.geoHomolosine}, {name: "Hammer", value: d3.geoHammer}, {name: "Hammer retroazimuthal", value: d3.geoHammerRetroazimuthal}, {name: "Hill eucyclic", value: d3.geoHill}, {name: "Hufnagel pseudocylindrical", value: d3.geoHufnagel}, {name: "Kavrayskiy VII", value: d3.geoKavrayskiy7}, {name: "Lagrange conformal", value: d3.geoLagrange}, {name: "Larrivée", value: d3.geoLarrivee}, {name: "Laskowski tri-optimal", value: d3.geoLaskowski}, // {name: "Littrow retroazimuthal", value: d3.geoLittrow}, // Not suitable for world maps. {name: "Loximuthal", value: d3.geoLoximuthal}, {name: "Mollweide", value: d3.geoMollweide}, {name: "McBryde–Thomas flat-polar parabolic", value: d3.geoMtFlatPolarParabolic}, {name: "McBryde–Thomas flat-polar quartic", value: d3.geoMtFlatPolarQuartic}, {name: "McBryde–Thomas flat-polar sinusoidal", value: d3.geoMtFlatPolarSinusoidal}, {name: "Natural Earth", value: d3.geoNaturalEarth1}, {name: "Natural Earth II", value: d3.geoNaturalEarth2}, {name: "Nell–Hammer", value: d3.geoNellHammer}, {name: "Nicolosi globular", value: d3.geoNicolosi}, {name: "Peirce quincuncial", value: d3.geoPeirceQuincuncial}, {name: "rectangular polyconic", value: d3.geoRectangularPolyconic}, {name: "Robinson", value: d3.geoRobinson, highlight: true}, {name: "sinusoidal", value: d3.geoSinusoidal}, {name: "sinu-Mollweide", value: d3.geoSinuMollweide}, {name: "Times", value: d3.geoTimes}, {name: "Tobler hyperelliptical", value: d3.geoHyperelliptical}, {name: "Van der Grinten", value: d3.geoVanDerGrinten}, {name: "Van der Grinten II", value: d3.geoVanDerGrinten2}, {name: "Van der Grinten III", value: d3.geoVanDerGrinten3}, {name: "Van der Grinten IV", value: d3.geoVanDerGrinten4}, {name: "Wagner IV", value: d3.geoWagner4}, {name: "Wagner VI", value: d3.geoWagner6}, {name: "Wagner VII", value: d3.geoWagner7}, {name: "Werner", value: () => d3.geoBonne().parallel(90)}, {name: "Wiechel", value: d3.geoWiechel}, {name: "Winkel tripel", value: d3.geoWinkel3} ]30:T42a,function projectionInput({ name = "", value } = {}) { const form = html`

${name}`; form.onchange = () => form.dispatchEvent(new CustomEvent("input")); //form.i.selectedIndex = 2; form.oninput = () => { let proj = projections[form.i.selectedIndex]; let nextProj = projections[form.i.selectedIndex + 1]; if (typeof proj.value === "function") { proj = proj.value(); } else if (typeof nextProj.value === "function") { proj = nextProj.value(); } else { proj = d3.geoEquirectangular; } form.value = proj; return proj; }; form.oninput(); return form; }31:[{"id":"efcaaf9f0b260e09b6afeaee6dbc1b91ad45f3328561cd67eb16a1754096c1095f70d284acdc4b004910e89265b60eba2706334e0dc84ded38fd9209083d4cef","href":"https://static.observableusercontent.com/files/efcaaf9f0b260e09b6afeaee6dbc1b91ad45f3328561cd67eb16a1754096c1095f70d284acdc4b004910e89265b60eba2706334e0dc84ded38fd9209083d4cef","name":"land-50m.json","type":"application/octet-stream","lastModified":1632212867882.221,"size":545534}] 2d:{"id":"6770d9bf1944219a","slug":"projection-playground","title":"Map Projection Playground","thumbnail":"02e3268b1d802576944c4dc57ebf4e46fa106078d6addfea73d57c35f26f7a97","access_level":"public","create_time":"$D2021-09-21T08:27:47.882Z","update_time":"$D2025-10-13T09:26:57.910Z","view_time":null,"first_public_time":"$D2021-09-21T08:52:31.907Z","has_unpublished_edits":null,"fork":{"id":"97574284e9c634aa","slug":"world-map-svg","title":"World Map (SVG)","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":69,"starred":false,"owner":{"type":"team","id":"5952e5f3991fd83c","login":"floledermann","name":"Florian Ledermann","avatar_url":"https://avatars-next.observableusercontent.com/6a0df0eeae726b31981d0e7972c010612aa76ce1f8d25615d7a1a554faf9ae1e","tier":"starter_2024"},"version":342,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"bb2fc280c71d473c","login":"floledermann","name":"Florian Ledermann","avatar_url":"https://avatars-next.observableusercontent.com/6a0df0eeae726b31981d0e7972c010612aa76ce1f8d25615d7a1a554faf9ae1e","tier":null}],"members":[{"type":"individual","id":"bb2fc280c71d473c","login":"floledermann","name":"Florian Ledermann","avatar_url":"https://avatars-next.observableusercontent.com/6a0df0eeae726b31981d0e7972c010612aa76ce1f8d25615d7a1a554faf9ae1e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":29,"collection":{"id":"153060e123a59638","slug":"maps","title":"Maps","owner":{"id":"5952e5f3991fd83c","login":"floledermann","name":"Florian Ledermann"}},"type":"notebook","body":{"title":"Map Projection Playground","cells":[{"id":0,"value":"# Map Projection Playground","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"Adapted for my course \"Cartographic and Geodetic Foundations for Planners\". You can find even more static examples map projections [in this overview](https://map-projections.net/singleview.php). ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"viewof selectedProjection = projectionInput({\n value: new URLSearchParams(location.search).get(\"projection\") || \"Conic equal-area\", \n name: \"Projection\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"viewof lambda0 = Inputs.range([-180, 180], {value: 0, step: 0.1, label: \"λ₀ (Center Meridian)\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"viewof phi0 = Inputs.range([-90, 90], {value: 0, step: 1, label: \"φ₀ (Pitch)\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"viewof gamma0 = Inputs.range([-180, 180], {value: 0, step: 1, label: \"γ₀ (Roll)\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"viewof phi1 = Inputs.range([-90, 90], {value: 0, step: 1, label: \"φ₁ (Std. parallel 1, for conic proj.)\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"viewof phi2 = Inputs.range([-90, 90], {value: 60, step: 1, label: \"φ₂ (Std. parallel 2, for conic proj.)\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"viewof zoom = Inputs.range([1, 8], {value: 1, step: 0.01, label: \"Zoom\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"viewof tissot = Inputs.toggle({label: \"Pseudo-Tissot's indicatrix⁽¹⁾\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"map = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"Map Style:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"viewof landColor = Inputs.text({label: \"Land Color\", value: \"rgba(230,230,230,0.7)\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"viewof landStrokeWidth = Inputs.range([0, 3], {value: 0.3, step: 0.1, label: \"Land stroke width\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"viewof landStroke = Inputs.text({label: \"Land stroke color\", value: \"#000000\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"⚠️ This causes rendering errors for some projections:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"viewof angle = Inputs.range([-180, 180], {value: 0, step: 1, label: \"⚠️ Post-projection rotation\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"For some interrupted projections, you can set the number of lobes:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"viewof lobes = Inputs.range([3, 20], {value: 5, step: 1, label: \"Lobes\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"viewof tilt = Inputs.range([0, 90], {value: 0, step: 0.1, label: \"Tilt\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"viewof distance = Inputs.range([1.1, 10], {value: 2, step: 0.1, label: \"Distance\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"[1] The circles for visualizing distortions are taken from [here](https://observablehq.com/@d3/tissots-indicatrix). This is not actually a true implementation of [Tissot's indicatrix](https://en.wikipedia.org/wiki/Tissot%27s_indicatrix), which would require to compute partial derivatives of the projection function at the indicated points. Instead, simple circular geometry on the Earth's surface is generated, which serves the purpose of estimating the projection's distortions equally well, IMO.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"circles = {\n const step = 20;\n const circle = d3.geoCircle().center(d => d).radius(step / 6).precision(10);\n const coordinates = [];\n for (let y = -80; y <= 80; y += step) {\n for (let x = -180; x < 180; x += step) {\n // draw only every second circle near poles\n if (Math.abs(y) < 70 || ((x / step) % 2 == 0)) {\n coordinates.push(circle([x, y]).coordinates);\n }\n }\n }\n return {type: \"MultiPolygon\", coordinates};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"projection = {\n let proj = selectedProjection;\n if (proj.rotate) proj.rotate([-lambda0,-phi0,gamma0]);\n if (proj.angle) proj.angle(angle);\n // for conic projections\n if (proj.parallels) proj.parallels([phi1, phi2]);\n if (proj.parallel) proj.parallel(phi1);\n if (proj.tilt) proj.tilt(tilt);\n if (proj.distance) proj.distance(distance);\n try {\n if (proj.lobes) proj.lobes(lobes);\n }\n catch (e) {\n // happens for Bogg's interrupted :\\\n }\n return proj;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"height = {\n const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, outline)).bounds(outline);\n const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);\n projection.scale(projection.scale() * (l - 1) / l).precision(0.2);\n return dy;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"outline = ({type: \"Sphere\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"graticule = d3.geoGraticule10()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"land = topojson.feature(world, world.objects.land)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"world = FileAttachment(\"land-50m.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3-geo@2\", \"d3-geo-projection@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"