29:null 2a:["$","title",null,{"children":"Projection comparison | travisdoesmath | Observable"}] 2f:T5cb,map = { const outline = ({type: "Sphere"}); const graticule = d3.geoGraticule10(); const land = topojson.feature(world, world.objects.land); const width = 928; const heightRed = fitWidth(red); const heightBlue = fitWidth(blue); const height = Math.max(heightRed, heightBlue); const context = DOM.context2d(width, height); function render(projection, color) { const path = d3.geoPath(projection, context); context.fillStyle = context.strokeStyle = color; context.save(); context.beginPath(), path(outline), context.clip(); context.beginPath(), path(graticule), context.globalAlpha = 0.3, context.stroke(); context.beginPath(), path(land), context.globalAlpha = 1.0, context.fill(); context.restore(); context.beginPath(), path(outline), context.stroke(); } context.fillStyle = "#fff"; context.fillRect(0, 0, width, height); context.save(); context.translate(0, (height - heightRed) / 2); render(red, "#f00"); context.restore(); context.save(); context.globalCompositeOperation = "multiply"; context.translate(0, (height - heightBlue) / 2); render(blue, "#00f"); context.restore(); return context.canvas; function fitWidth(projection) { 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; } }30:T15ba,projections = [ {name: "Airy’s minimum error", value: d3.geoAiry}, {name: "Aitoff", value: d3.geoAitoff}, {name: "American polyconic", value: d3.geoPolyconic}, {name: "armadillo", value: d3.geoArmadillo}, {name: "August", value: d3.geoAugust}, {name: "azimuthal equal-area", value: d3.geoAzimuthalEqualArea}, {name: "azimuthal equidistant", value: d3.geoAzimuthalEquidistant}, {name: "Baker dinomic", value: d3.geoBaker}, {name: "Berghaus’ star", value: d3.geoBerghaus}, {name: "Bertin’s 1953", value: d3.geoBertin1953}, {name: "Boggs’ eumorphic", value: d3.geoBoggs}, {name: "Boggs’ eumorphic (interrupted)", value: d3.geoInterruptedBoggs}, {name: "Bonne", value: d3.geoBonne}, {name: "Bottomley", value: d3.geoBottomley}, {name: "Bromley", value: d3.geoBromley}, {name: "Butterfly (gnomonic)", value: d3.geoPolyhedralButterfly}, {name: "Butterfly (Collignon)", value: d3.geoPolyhedralCollignon}, {name: "Butterfly (Waterman)", value: d3.geoPolyhedralWaterman}, {name: "Collignon", value: d3.geoCollignon}, // {name: "conic conformal", value: d3.geoConicConformal}, // Not suitable for world maps. {name: "conic equal-area", value: d3.geoConicEqualArea}, {name: "conic equidistant", value: d3.geoConicEquidistant}, {name: "Craig retroazimuthal", value: d3.geoCraig}, {name: "Craster parabolic", value: d3.geoCraster}, {name: "cylindrical equal-area", value: d3.geoCylindricalEqualArea}, {name: "cylindrical stereographic", value: d3.geoCylindricalStereographic}, {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}, {name: "Equirectangular (plate carrée)", value: d3.geoEquirectangular}, {name: "Fahey pseudocylindrical", value: d3.geoFahey}, {name: "flat-polar parabolic", value: d3.geoMtFlatPolarParabolic}, {name: "flat-polar quartic", value: d3.geoMtFlatPolarQuartic}, {name: "flat-polar sinusoidal", value: d3.geoMtFlatPolarSinusoidal}, {name: "Foucaut’s stereographic equivalent", value: d3.geoFoucaut}, {name: "Foucaut’s sinusoidal", value: d3.geoFoucautSinusoidal}, {name: "general perspective", value: d3.geoSatellite}, {name: "Gilbert’s two-world", value: d3.geoGilbert}, {name: "Gingery", value: d3.geoGingery}, {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: "Goode’s homolosine", value: d3.geoHomolosine}, {name: "Goode’s homolosine (interrupted)", value: d3.geoInterruptedHomolosine}, {name: "gnomonic", value: d3.geoGnomonic}, {name: "Gringorten square", value: d3.geoGringorten}, {name: "Gringorten quincuncial", value: d3.geoGringortenQuincuncial}, {name: "Guyou square", value: d3.geoGuyou}, {name: "Hammer", value: d3.geoHammer}, {name: "Hammer retroazimuthal", value: d3.geoHammerRetroazimuthal}, {name: "HEALPix", value: d3.geoHealpix}, {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: "Mercator", value: d3.geoMercator}, {name: "Miller cylindrical", value: d3.geoMiller}, {name: "Mollweide", value: d3.geoMollweide}, {name: "Mollweide (Goode’s interrupted)", value: d3.geoInterruptedMollweide}, {name: "Mollweide (interrupted hemispheres)", value: d3.geoInterruptedMollweideHemispheres}, {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: "orthographic", value: d3.geoOrthographic}, {name: "Patterson cylindrical", value: d3.geoPatterson}, {name: "Peirce quincuncial", value: d3.geoPeirceQuincuncial}, {name: "rectangular polyconic", value: d3.geoRectangularPolyconic}, {name: "Robinson", value: d3.geoRobinson}, {name: "sinusoidal", value: d3.geoSinusoidal}, {name: "sinusoidal (interrupted)", value: d3.geoInterruptedSinusoidal}, {name: "sinu-Mollweide", value: d3.geoSinuMollweide}, {name: "sinu-Mollweide (interrupted)", value: d3.geoInterruptedSinuMollweide}, {name: "stereographic", value: d3.geoStereographic}, {name: "Times", value: d3.geoTimes}, {name: "Tobler hyperelliptical", value: d3.geoHyperelliptical}, {name: "transverse Mercator", value: d3.geoTransverseMercator}, {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} ]31:[{"id":"85b1800385297a1dfa0e2a821f55b7c95866affef1cb64b10f22a923f79498bf8a786105ab97d8953c1b25c0bcf223c7f6342046349b8bb0ea088d2138896138","href":"https://static.observableusercontent.com/files/85b1800385297a1dfa0e2a821f55b7c95866affef1cb64b10f22a923f79498bf8a786105ab97d8953c1b25c0bcf223c7f6342046349b8bb0ea088d2138896138","name":"world.json","type":"application/json","lastModified":1691856259465.269,"size":545533}] 2d:{"id":"a69a6d1894848375","slug":null,"title":"Projection comparison","thumbnail":"f3dd690ff189748a4b4a70b381d04d77e78f3b73ce669dabb98c6b47eca79e3d","access_level":"public","create_time":"$D2023-08-12T16:04:19.465Z","update_time":"$D2023-08-12T16:04:19.465Z","view_time":null,"first_public_time":"$D2023-08-12T16:04:19.465Z","fork":{"id":"e1ede52dc01ead30","slug":"projection-comparison","title":"Projection comparison","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"d558a976c3a06a1b","login":"travisdoesmath","name":"","avatar_url":"https://avatars-next.observableusercontent.com/b72974d38cf63ff53ee5f26a94c21739e651d18997aa47dfdae4d9911d0f1ceb","tier":"starter_2024"},"version":252,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e8f44792057df857","login":"travisdoesmath","name":"","avatar_url":"https://avatars-next.observableusercontent.com/b72974d38cf63ff53ee5f26a94c21739e651d18997aa47dfdae4d9911d0f1ceb","tier":null}],"members":[{"type":"individual","id":"e8f44792057df857","login":"travisdoesmath","name":"","avatar_url":"https://avatars-next.observableusercontent.com/b72974d38cf63ff53ee5f26a94c21739e651d18997aa47dfdae4d9911d0f1ceb","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Projection comparison","cells":[{"id":0,"value":"

Projection comparison

D3 › Gallery

\n\n# Projection comparison\n\nChoose two projections below to compare.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3,"value":"viewof red = projectionInput({\n name: \"red\",\n value: new URLSearchParams(location.search).get(\"red\") || \"American polyconic\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"viewof blue = projectionInput({\n name: \"blue\",\n value: new URLSearchParams(location.search).get(\"blue\") || \"rectangular polyconic\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":112,"value":"---\n\n## Appendix\n\nEdit the *projections* array below, or *red* and *blue* above, to define a new projection.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":100,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":71,"value":"function projectionInput({name = \"\", value} = {}) {\n const form = html`

${name}`;\n form.onchange = () => form.dispatchEvent(new CustomEvent(\"input\"));\n form.oninput = () => form.value = projections[form.i.selectedIndex].value();\n form.oninput();\n return form;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":173,"value":"world = FileAttachment(\"world.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"d3 = require(\"d3-geo@3\", \"d3-geo-projection@4\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"