41:null 42:["$","title",null,{"children":"Projection comparison | nikolay kits | Observable"}] 48: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; } }49: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} ]4a:[{"id":"85b1800385297a1dfa0e2a821f55b7c95866affef1cb64b10f22a923f79498bf8a786105ab97d8953c1b25c0bcf223c7f6342046349b8bb0ea088d2138896138","href":"https://static.observableusercontent.com/files/85b1800385297a1dfa0e2a821f55b7c95866affef1cb64b10f22a923f79498bf8a786105ab97d8953c1b25c0bcf223c7f6342046349b8bb0ea088d2138896138","name":"world.json","type":"application/json","lastModified":1689595167479.692,"size":545533}] 46:{"id":"a77e6976ad87cffe","slug":"projection-comparison","title":"Projection comparison","thumbnail":"7ca113824f78945039682c36cb7394cd6e50bd947c4bfe5f03d19e58fff4d334","access_level":"public","create_time":"$D2026-09-11T00:55:49.958Z","update_time":"$D2026-09-11T01:32:39.583Z","view_time":null,"first_public_time":"$D2026-09-11T01:31:11.988Z","has_unpublished_edits":null,"fork":{"id":"e1ede52dc01ead30","slug":"projection-comparison","title":"Projection comparison","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"62f3af1507824acf","login":"nikolay-kits","name":"nikolay kits","avatar_url":"https://avatars-next.observableusercontent.com/2c492e6497c0116a108a83be17e54a40a51c1306a34a781bd83c9a4e2f9dce81","tier":"starter_2024","bio":"","following":false},"version":273,"publish_version":273,"role":null,"authored":false,"authors":[{"type":"individual","id":"6aa881f547f3056a","login":"nikolay-kits","name":"nikolay kits","avatar_url":"https://avatars-next.observableusercontent.com/2c492e6497c0116a108a83be17e54a40a51c1306a34a781bd83c9a4e2f9dce81","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"62f3af1507824acf","login":"nikolay-kits","name":"nikolay kits","avatar_url":"https://avatars-next.observableusercontent.com/2c492e6497c0116a108a83be17e54a40a51c1306a34a781bd83c9a4e2f9dce81","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"viewof red = projectionInput({\n name: \"red\",\n value: new URLSearchParams(location.search).get(\"red\") || \"Mercator\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"viewof blue = projectionInput({\n name: \"blue\",\n value: new URLSearchParams(location.search).get(\"blue\") || \"Equal Earth\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":100,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"world = FileAttachment(\"world.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"d3 = require(\"d3-geo@3\", \"d3-geo-projection@4\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 47:"$46:body"