2e:null 2f:["$","title",null,{"children":"30 Day Map Challenge: 26. Map Projections | Jo Wood | Observable"}] 34:T486,So many possibilities for this topic, and I've explored a number of map projections already in earlier challenges. I decided in the end to choose a favourite projection - The [Gingery projection](https://observablehq.com/@d3/gingery). It has quite some chutzpah, wearing its arrogance boldly, declaring the centre of the world with no shame. This was used to great effect in [Cram's Air Age, U.S. Centric World](https://www.davidrumsey.com/luna/servlet/detail/RUMSEY~8~1~272461~90058258:Cram-s-Air-Age--U-S--Centric-World-) in the early 1940s. I thought I'd attempt to reproduce the map, or at least those aspects that relate most strongly to the form of the projection. This turned out to be a project all about the little details. Plotting country outlines on a world map is simple; adding the graticule with different symbolisation for different parallels and meridians is more challenging; combining labels of the projection properties, continents, cities, oceans and other features, more challenging still. This is more a 'work in progress', but it has yielded the start of a map that looks very unlike those typically produced with Observable Plot. 35:T6bb,const airPaths = (() => { const p1 = []; addLink("Chongqing", p1); addLink("Fairbanks", p1); addLink("Edmonton", p1); addLink("Minneapolis", p1); addLink("Chicago", p1); addLink("New York", p1); addLink("St. John's", p1); addLink("Reykjavik", p1); addLink("Moscow", p1); addLink("Kolkata", p1); addLink("Karachi", p1); addLink("Baghdad", p1); addLink("Cairo", p1); addLink("London", p1); addLink("St. John's", p1); const p2 = []; addLink("Moscow", p2); addLink("London", p2); addLink("Lisbon", p2); addLink("Bubaque", p2); addLink("Kinshasa", p2); addLink("Cape Town", p2); const p3 = []; addLink("Lisbon", p3); addLink("Vila do Porto", p3); addLink("Hamilton", p3); addLink("New York", p3); addLink("Miami", p3); addLink("Port of Spain", p3); addLink("Natal", p3); addLink("Bubaque", p3); const p4 = []; addLink("Natal", p4); addLink("Rio De Janeiro", p4); addLink("Buenos Aires", p4); addLink("Santiago", p4); addLink("Lima", p4); addLink("Tocumen", p4); addLink("Houston", p4); addLink("Chicago", p4); const p5 = []; addLink("Tocumen", p5); addLink("Mexico City", p5); addLink("San Francisco", p5); addLink("Seattle", p5); addLink("Fairbanks", p5); addLink("Tokyo", p5); addLink("Manila", p5); addLink("Singapore", p5); const p6 = []; addLink("Manila", p6); addLink("Saipan Island", p6); addLink("Wake Island", p6); addLink("Sand Island", p6); addLink("Honolulu", p6); addLink("San Francisco", p6); const p7 = []; addLink("Honolulu", p7); addLink("Banana", p7); addLink("Apia", p7); addLink("Sydney", p7); return new GeoJSON().lines([p1, p2, p3, p4, p5, p6, p7]).featureCollection; })();36:T1f3e,function mainMap() { const [w, h] = [width, width * 0.714]; return Plot.plot({ style: `background: ${bgClr}; box-shadow: inset 0 0 8em 8em oklch(60% 0.2 90deg /5%);`, width: w, height: h, projection: geoGingery() .translate([0.5 * w, 0.52 * h]) .scale(w * 0.12), marks: [ Plot.sphere({fill: waterClr}), Plot.sphere({fill: "url(#stippleWaterLight)"}), Plot.sphere({fill: "url(#stippleWaterDark)"}), Plot.geo(land, { fill: "rgb(211,180,79)", stroke: "black", strokeWidth: w / 5000 }), Plot.geo(land, {fill: "url(#stippleLand)"}), Plot.geo(antarctica, { fill: "rgb(232,208,150)", stroke: "black", strokeWidth: w / 5000 }), Plot.geo(antarctica, {fill: "url(#stripes)"}), Plot.geo(rossIceShelf, { fill: bgClr, stroke: "black", strokeDasharray: [w / 700, w / 800], strokeWidth: w / 4500 }), // River networks and lakes Plot.geo( rivers.filter((d) => d.properties.scalerank < 5), { stroke: "rgb(29,32,48)", opacity: 0.9, strokeWidth: (d) => (w * d.properties.strokeweig) / 1500 } ), Plot.geo(lakes, { stroke: "rgb(29,32,48)", fill: waterClr, strokeWidth: w / 5000 }), // Airports and routes between them Plot.dot(airports, { x: "longitude_deg", y: "latitude_deg", fill: "firebrick", r: w / 500, opacity: 0.9 }), Plot.geo(airPaths, { stroke: "firebrick", strokeWidth: w / 700, opacity: 0.9 }), Plot.text(airports, { x: "longitude_deg", y: "latitude_deg", dx: w / 400, dy: h / 400, text: "municipality", textAnchor: "start", fontFamily: "Serif", fontWeight: 900, fontSize: w / 300, opacity: 0.7 }), // Custom graticule that stops before poles // Should not include equator, so we create separate N and S graticules Plot.geo(projLines.graticuleNorth, {strokeWidth: w / 5000}), Plot.geo(projLines.graticuleSouth, {strokeWidth: w / 5000}), // Prime meridian, equator, and tropics of Cancer and Capricorn Plot.geo(projLines.primeMeridian, {strokeWidth: w / 3000}), curvedText("GREENWICH MERIDIAN", { path: [ [-15, 85], [-3, 62] ], fontSize: w / 400, fill: "#000c" }), curvedText("180th MERIDIAN", { path: [ [-177, 66], [-165, 87] ], fontSize: w / 400, fill: "#000c" }), Plot.geo(projLines.equator, { strokeWidth: w / 1000, strokeDasharray: [w / 150, w / 150], opacity: 0.5 }), Plot.geo(projLines.equatorUpper, {strokeWidth: w / 3000, opacity: 0.5}), Plot.geo(projLines.equatorLower, {strokeWidth: w / 3000, opacity: 0.5}), Plot.geo(projLines.tropicCancer, { strokeWidth: w / 3000, strokeDasharray: [w / 700, w / 800], opacity: 0.8 }), Plot.geo(projLines.tropicCapricorn, { strokeWidth: w / 3000, strokeDasharray: [w / 700, w / 800], opacity: 0.8 }), Plot.geo(projLines.articCircle, { strokeWidth: w / 3000, strokeDasharray: [w / 700, w / 800], opacity: 0.8 }), Plot.geo(projLines.antarticCircle, { strokeWidth: w / 3000, strokeDasharray: [w / 700, w / 800], opacity: 0.8 }), // Meridians (South) d3.range(105, 180, 15).map((d) => curvedText(`${d}ᴱ`, { fontSize: w / 300, fontFamily: "Serif", path: [ [d - 14, -74], [d + 14, -74] ], fill: "#000c", letterSpacing: "0em" }) ), d3.range(-180, -90, 15).map((d) => curvedText(`${-d}ʷ`, { fontSize: w / 300, fontFamily: "Serif", path: [ [d - 14, -74], [d + 14, -74] ], fill: "#000c", letterSpacing: "0em" }) ), d3.range(0, 90, 15).map((d) => curvedText(`${d}${d === 0 ? "" : "ᴱ"}`, { fontSize: w / 300, fontFamily: "Serif", path: [ [d - 14, -69], [d + 14, -69] ], fill: "#000c", letterSpacing: "0em" }) ), d3.range(-15, -90, -15).map((d) => curvedText(`${-d}ʷ`, { fontSize: w / 300, fontFamily: "Serif", path: [ [d - 14, -69], [d + 14, -69] ], fill: "#000c", letterSpacing: "0em" }) ), // Meridians (North) d3.range(105, 181, 15).map((d) => curvedText(`${d}ᴱ`, { fontSize: w / 300, fontFamily: "Serif", path: [ [d - 14, 74], [d + 14, 74] ], fill: "#000c", letterSpacing: "0em" }) ), d3.range(-105, -180, -15).map((d) => curvedText(`${-d}ʷ`, { fontSize: w / 300, fontFamily: "Serif", path: [ [d - 14, 74], [d + 14, 74] ], fill: "#000c", letterSpacing: "0em" }) ), d3.range(75, 0, -15).map((d) => curvedText(`${d}ᴱ`, { fontSize: w / 300, fontFamily: "Serif", path: [ [d - 14, 74], [d + 14, 74] ], fill: "#000c", letterSpacing: "0em" }) ), d3.range(0, -90, -15).map((d) => curvedText(`${-d}${d === 0 ? "" : "ʷ"}`, { fontSize: w / 300, fontFamily: "Serif", path: [ [d - 14, 74], [d + 14, 74] ], fill: "#000c", letterSpacing: "0em" }) ), // Continental labels Plot.text(continents, { x: "lon", y: "lat", text: "name", fontFamily: "Gill Sans Bold", fontSize: (d) => d.scale * w, opacity: 0.8 }), // Ocean labels Plot.text(oceans, { x: "lon", y: "lat", text: "name", fontFamily: "serif", showPath: true, fontSize: (d) => d.scale * w, fontStyle: "italic", fontWeight: 700, opacity: 0.8 }), // Outer edge helps to erase rhumb lines that travel along edge of lobes Plot.sphere({stroke: bgClr, strokeWidth: w / 800}), Plot.sphere({stroke: "black", strokeWidth: w / 3000}), // Gore labels Plot.text(goreLabels, { x: "lon", y: "lat", text: "txt", fontSize: w / 200, fontFamily: "Gill Sans", fill: "firebrick" }), // Main title Plot.text(["CRAM'S AIR AGE"], { opacity: 0.8, frameAnchor: "top", fontSize: w / 70, fontFamily: "Gill Sans Bold", dy: h / 15 }), Plot.text(["U.S. CENTRIC WORLD"], { opacity: 0.8, frameAnchor: "top", fontSize: w / 36, fontFamily: "Condensed Bold", dy: h / 11 }), Plot.text(["GINGERY PROJECTION"], { opacity: 0.8, frameAnchor: "top", fontSize: w / 110, fontFamily: "Gill Sans Bold", dy: h / 8 }), // Tape instructions Plot.text(["U S E S O F T A P E F I N D E R"], { frameAnchor: "bottom", fontSize: w / 180, fontFamily: "Gill Sans Bold", dy: -h / 6.6 }), Plot.text([tapeFinderText], { textAnchor: "start", frameAnchor: "bottom", fontSize: w / 280, fontFamily: "Gill Sans", fontWeight: 600, dx: -w / 20, dy: -h / 20, lineWidth: 32 }) ] }); }37:T848,function polarMap(rot, title) { const [w, h] = [800, 800]; return Plot.plot({ projection: { type: "azimuthal-equidistant", rotate: [90, rot, 0], clip: 90.5 }, marks: [ Plot.sphere({fill: waterClr}), Plot.sphere({fill: "url(#stippleWaterLight)"}), Plot.sphere({fill: "url(#stippleWaterDark)"}), Plot.geo(land, { fill: "rgb(231,197,170)", stroke: "black", strokeWidth: w / 5000 }), Plot.geo(land, {fill: "url(#stippleLand)"}), Plot.geo( rivers.filter((d) => d.properties.scalerank < 5), { stroke: "rgb(29,32,48)", opacity: 0.9, strokeWidth: (d) => (w * d.properties.strokeweig) / 1500 } ), Plot.geo(lakes, { stroke: "rgb(29,32,48)", fill: waterClr, strokeWidth: w / 5000 }), // Custom graticule that stops before poles Plot.geo(projLines.graticuleNorth, {strokeWidth: w / 5000}), Plot.geo(projLines.graticuleSouth, {strokeWidth: w / 5000}), Plot.geo(projLines.equator, { strokeWidth: w / 1000, strokeDasharray: [w / 150, w / 150], opacity: 0.5 }), Plot.geo(projLines.equatorUpper, {strokeWidth: w / 3000, opacity: 0.5}), Plot.geo(projLines.equatorLower, {strokeWidth: w / 3000, opacity: 0.5}), Plot.geo(projLines.tropicCancer, { strokeWidth: w / 3000, strokeDasharray: [w / 700, w / 800], opacity: 0.8 }), Plot.geo(projLines.tropicCapricorn, { strokeWidth: w / 3000, strokeDasharray: [w / 700, w / 800], opacity: 0.8 }), Plot.geo(projLines.articCircle, { strokeWidth: w / 3000, strokeDasharray: [w / 700, w / 800], opacity: 0.8 }), Plot.geo(projLines.antarticCircle, { strokeWidth: w / 3000, strokeDasharray: [w / 700, w / 800], opacity: 0.8 }), Plot.text([title], { frameAnchor: "bottom", fontSize: w / 60, fontFamily: "Gill Sans Bold", dy: h * -0.17 }) ] }); }38:[{"id":"a647f63e182b5ee94faacc77cda9341e25533ead2c656eff036b40e676bef6f90a670c36306fd8f16f7936f65d85f1faa8ce93d7b7dfc8050f2e262fc966bc15","href":"https://static.observableusercontent.com/files/a647f63e182b5ee94faacc77cda9341e25533ead2c656eff036b40e676bef6f90a670c36306fd8f16f7936f65d85f1faa8ce93d7b7dfc8050f2e262fc966bc15","name":"world110m.json","type":"application/json","lastModified":1732608605711.68,"size":128748},{"id":"d61fe5be50b98b2be87b97a9be595cd3bb43cf64a460b158632d91ccdbbc9b5577b59e89fec96cba0df7b66358630b7d8aa2d57bad95c6f4a93e261ee2d10686","href":"https://static.observableusercontent.com/files/d61fe5be50b98b2be87b97a9be595cd3bb43cf64a460b158632d91ccdbbc9b5577b59e89fec96cba0df7b66358630b7d8aa2d57bad95c6f4a93e261ee2d10686","name":"Gill Sans Bold.otf","type":"font/otf","lastModified":1732629872262.237,"size":131444},{"id":"dcee2d243fe2334d99cb6757ec78d63d1be12136d430f75d8d5127d9476ff6e6724630568a845bfbb94a65c8d158c9797b58daff9895cf3ae66a5b7f82aca063","href":"https://static.observableusercontent.com/files/dcee2d243fe2334d99cb6757ec78d63d1be12136d430f75d8d5127d9476ff6e6724630568a845bfbb94a65c8d158c9797b58daff9895cf3ae66a5b7f82aca063","name":"GillSans Condensed Bold.otf","type":"font/otf","lastModified":1732629872266.797,"size":92268},{"id":"14e8f432c9d1b0c93f1a7d8bef1287b0918e04870b743c97dd9f77b626c9e232992cfb9e9dd995b1082c6d0ef5bd70ec4be54ab047f132ea0093ba7b14a3519f","href":"https://static.observableusercontent.com/files/14e8f432c9d1b0c93f1a7d8bef1287b0918e04870b743c97dd9f77b626c9e232992cfb9e9dd995b1082c6d0ef5bd70ec4be54ab047f132ea0093ba7b14a3519f","name":"rivers.json","type":"application/json","lastModified":1732637305947.53,"size":298049},{"id":"c057c3fd99bebffde010653974a54d6c9743ea9bd468bdd5bcb5efff72be43260e6bbfdc4089e83715d9b9f34ea67c05bc8a7e2df7dc782d5f8453b0003ec2d5","href":"https://static.observableusercontent.com/files/c057c3fd99bebffde010653974a54d6c9743ea9bd468bdd5bcb5efff72be43260e6bbfdc4089e83715d9b9f34ea67c05bc8a7e2df7dc782d5f8453b0003ec2d5","name":"lakes.json","type":"application/json","lastModified":1732638048443.127,"size":6419},{"id":"4f1f37495f207c36cab5456f29f9aed33bbb482af665299e65d12bb03207911840c2b6c8f80c97bf7af625be11cd9af5c9e9bde9fdd1b9e52da67f4eda8e1b7a","href":"https://static.observableusercontent.com/files/4f1f37495f207c36cab5456f29f9aed33bbb482af665299e65d12bb03207911840c2b6c8f80c97bf7af625be11cd9af5c9e9bde9fdd1b9e52da67f4eda8e1b7a","name":"Gill Sans Medium.otf","type":"font/otf","lastModified":1732641106882.191,"size":129812},{"id":"a3ffe8c78358d2d79128df03e196c774b780d77c8e235fbc4df0cf89a9bcc12511eaac296808c2c1f52eeed6117567abe56044bc6f2800798633a06764259987","href":"https://static.observableusercontent.com/files/a3ffe8c78358d2d79128df03e196c774b780d77c8e235fbc4df0cf89a9bcc12511eaac296808c2c1f52eeed6117567abe56044bc6f2800798633a06764259987","name":"BellTopoSans-Regular.otf","type":"font/otf","lastModified":1732661817175.509,"size":138968},{"id":"a86cd22c370082b37d7c1dded072dde60a3c76d137f644d9dc9c9280c064ae79cccd9266be75506cbfdcc06fa7ef1be87fb2f6134f05258d7bfca4b1be8100de","href":"https://static.observableusercontent.com/files/a86cd22c370082b37d7c1dded072dde60a3c76d137f644d9dc9c9280c064ae79cccd9266be75506cbfdcc06fa7ef1be87fb2f6134f05258d7bfca4b1be8100de","name":"airports.csv","type":"text/csv","lastModified":1732648837145.134,"size":2008}] 32:{"id":"26fd2c47763dc9b6","slug":"tdmc2024_day26","title":"30 Day Map Challenge: 26. Map Projections","thumbnail":"b0a328f40edc61ad05a37386f11c8aa4856d9df3217c21ee9d083a926dbc18b5","access_level":"public","create_time":"$D2024-11-24T06:00:37.974Z","update_time":"$D2026-09-07T16:49:09.356Z","view_time":null,"first_public_time":"$D2024-11-27T00:18:48.008Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":"starter_2024"},"version":1248,"publish_version":1248,"role":null,"authored":false,"authors":[{"type":"individual","id":"e2432cc13dc447d3","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":null}],"members":[{"type":"team","id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":"starter_2024","role":"editor"},{"type":"individual","id":"e2432cc13dc447d3","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"bf1478ed3832e63a","slug":"30-day-map-challenge-2024","title":"30 day map challenge 2024","owner":{"id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood"}},"type":"notebook","body":{"title":"30 Day Map Challenge: 26. Map Projections","cells":[{"id":0,"value":"# 30 Day Map Challenge: 26. Map Projections","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1043,"value":"_This is the original page produced during the 2024 30-day map challenge but with minor edits to use the Observable 2.0 standard library._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":973,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":713,"value":"## Data Preparation\n\nThe core geographic datasets used to build the map were:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":716,"value":"- Country outlines, as used in several of the previous days' challenges, from which I separated the land boundaries and Antarctica which has its own visual treatment in the original map:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"const countries = topojson.feature(\n await d3.json(await FileAttachment(\"world110m.json\").url()),\n \"countries\"\n).features;","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"const land = topojson.feature(\n await d3.json(await FileAttachment(\"world110m.json\").url()),\n \"land\"\n).features;","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"const antarctica = countries.filter((d) => d.properties.name === \"Antarctica\");","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"I hand digitised the boundary of the Ross ice shelf (Antarctica), which also has its own visual treatment. It is also worth noting that in contrast to the other land boundaries, the shape of Antarctica in the original map is much more generalised, perhaps reflecting the mapping of the continent in the 1940s or its comparative lack of importance to the map as a navigational aid.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":370,"value":"const rossIceShelf = new GeoJSON().polygon([\n [-158, -77],\n [-168, -78],\n [179, -77.5],\n [176, -76.8],\n [174, -76.5],\n [171, -77],\n [165, -77.5],\n [165, -78],\n [167, -78.5],\n [160, -79.5],\n [162, -82],\n [169, -84],\n [170, -84],\n [180, -84.5],\n [-180.5, -84.4],\n [-168, -84],\n [-150, -86],\n [-143, -85],\n [-149.5, -83],\n [-150, -81],\n [-146, -80],\n [-150, -79],\n [-157, -78]\n]).featureCollection;","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":729,"value":"- Generalised river and lakes were taken from [Natural Earth](https://www.naturalearthdata.com/downloads/110m-physical-vectors/110mlakes-reservoirs/) and converted from shapefiles to topoJSON format in [MapShaper](https://mapshaper.org):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":472,"value":"const rivers = topojson.feature(\n await d3.json(await FileAttachment(\"rivers.json\").url()),\n \"rivers\"\n).features;","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"const lakes = topojson.feature(\n await d3.json(await FileAttachment(\"lakes.json\").url()),\n \"lakes\"\n).features;","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":733,"value":"- Airports were taken from [Jason Davies' version of Cram's Air Age map](https://www.jasondavies.com/maps/gingery/):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":104,"value":"const airports = FileAttachment(\"airports.csv\").csv({typed: true});","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":745,"value":"const airportLU = TDMC.createLookup(airports, {\n key: \"municipality\",\n values: [\"longitude_deg\", \"latitude_deg\"]\n});","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":736,"value":"From these I built the route vectors as a GeoJSON object:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":760,"value":"$35","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":762,"value":"function addLink(node, path) {\n const airport = airportLU[node];\n path.push([airport.longitude_deg, airport.latitude_deg]);\n return path;\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":738,"value":"## Map Styling\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":742,"value":"### Typography\n\nIt's not a perfect match, but Gill Sans captures the feel of the sans-serif type used in Cram's map. The wide tracking (gaps between letters) is characteristic of that mid-century design, which I had to simulate crudely by inserting spaces between letters, but it works reasonably well here. Ocean labels use a serif font to contrast with continent labels.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":979,"value":"### Textures\n\nI added subtle textures to the water and land features using approaches similar to [day 7](https://observablehq.com/@jwolondon/tdmc2024_day07) to give a printed texture effect. Antarctica has a faint striped effect (except for the Ross ice shelf that matches the background).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":292,"value":"function aggregateDefs(defs) {\n const root = document.createElementNS(\n \"http://www.w3.org/2000/svg\",\n \"svg\"\n );\n root.setAttribute(\"width\", \"0\");\n root.setAttribute(\"height\", \"0\");\n root.setAttribute(\"aria-hidden\", \"true\");\n root.innerHTML = `${defs.join(\"\")}`;\n\n return root;\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"function createStipple(id, options = {}) {\n const {\n fill = \"black\",\n r = 0.005,\n opacity = 1,\n density = 50000,\n spacing = 200\n } = options;\n\n // Generate dots\n let dots = \"\";\n for (let i = 0; i < density; i++) {\n const x = Math.random() * spacing;\n const y = Math.random() * spacing;\n dots += ``;\n }\n\n // Return pattern\n return `\n \n ${dots}\n \n `;\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":876,"value":"function createDashesRegular(id, options = {}) {\n const {\n stroke = \"rgb(221,200,133)\",\n strokeWidth = 0.5,\n strokeDashArray = [3, 3],\n opacity = 0.8,\n spacing = 1, // Horizontal spacing\n lineSpacing = 1.3, // Vertical distance between lines\n rotate = 0\n } = options;\n return `\n \n \n \n `;\n}","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"aggregateDefs([\n createDashesRegular(\"stripes\", {\n strokeWidth: 2,\n strokeDashArray: [3, 1],\n rotate: -40\n }),\n createStipple(\"stippleLand\", { fill: \"rgb(217,187,93)\", opacity: 0.9 }),\n createStipple(\"stippleWaterLight\", { fill: \"rgb(90,132,122)\", opacity: 1 }),\n createStipple(\"stippleWaterDark\", { fill: \"rgb(41,58,56)\", opacity: 0.05 })\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":982,"value":"### Labels\n\nI created separate arrays of the continent and ocean labels as these had different typography. An interesting property of the Gingery projection is that the tips of each 'lobe' or 'gore' represents the same location (90 degrees E, 40 degrees south). To label each of the 6 lobes separately with this location I had to shift the position very slightly to nudge it into the correct lobe.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":99,"value":"const continents = [\n {lon: -95, lat: 55, name: \"N O R T H\\n\\nA M E R I C A\", scale: 0.008},\n {lon: -60, lat: -10, name: \"S O U T H\\n\\nA M E R I C A\", scale: 0.008},\n {lon: 102, lat: 40, name: \"A S I A\", scale: 0.008},\n {lon: 64, lat: 40, name: \"A S I A\", scale: 0.008},\n {lon: 10, lat: 10, name: \"A F R I C A\", scale: 0.008},\n {lon: 23, lat: 27, name: \"AFRICA\", scale: 0.0048},\n {lon: 25, lat: 53, name: \"E U R O P E\", scale: 0.008},\n {lon: 133, lat: -26, name: \"A U S T R A L I A\", scale: 0.006},\n {lon: -126, lat: -80, name: \"ANTARCTIC\", scale: 0.0045},\n {lon: 140, lat: -82, name: \"CONTINENT\", scale: 0.0045},\n {lon: 0, lat: -82, name: \"ANTARCTIC\", scale: 0.0045},\n {lon: 45, lat: -78, name: \"CONTINENT\", scale: 0.0045}\n];","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"const oceans = [\n {\n lon: -170,\n lat: 12,\n name: \"P A C I F I C O C E A N\",\n scale: 0.01\n },\n {\n lon: -22,\n lat: 6,\n name: \"A T L A N T I C O C E A N\",\n scale: 0.01\n },\n {\n lon: -30,\n lat: -47,\n name: \"A T L A N T I C\\n\\nO C E A N\",\n scale: 0.01\n },\n\n {\n lon: -130,\n lat: -47,\n name: \"P A C I F I C\\n\\nO C E A N\",\n scale: 0.01\n },\n {\n lon: 158,\n lat: 39,\n name: \"P A C I F I C\\n\\nO C E A N\",\n scale: 0.008\n },\n {\n lon: 102,\n lat: -16,\n name: \"I N D I A N\\n\\nO C E A N\",\n scale: 0.008\n },\n {\n lon: 78,\n lat: -16,\n name: \"I N D I A N\\n\\nO C E A N\",\n scale: 0.008\n },\n {lon: 160, lat: 84, name: \"ARCTIC\", scale: 0.006},\n {lon: 20, lat: 84, name: \"OCEAN\", scale: 0.006}\n];","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":840,"value":"const goreLabels = [\n {txt: \"A\\nTIP OF GORE\\n90°E - 40°S\", lon: 89, lat: -39},\n {txt: \"B\\nTIP OF GORE\\n90°E - 40°S\", lon: 89, lat: -40},\n {txt: \"C\\nTIP OF GORE\\n90°E - 40°S\", lon: 89, lat: -41},\n {txt: \"D\\nTIP OF GORE\\n90°E - 40°S\", lon: 91, lat: -41},\n {txt: \"E\\nTIP OF GORE\\n90°E - 40°S\", lon: 91, lat: -40},\n {txt: \"F\\nTIP OF GORE\\n90°E - 40°S\", lon: 91, lat: -39}\n];","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":530,"value":"const tapeFinderText = `1. LOCATING PLACE NAMES. See index.\n\n2. MEASURING DISTANCES. The mileage from the centre of the map to any other point may be determined by extending the free end of the tape to that point. The reading on the tape is the statute mileage between the two points. When measuring other than from the center of the map, use scale on reverse of tape.\n\n3. GREAT CIRCLE ROUTES. To determine the great circle route from center of map to any point, extend tape to that point. The edge of the tape will be the approximate great circle arc between the points. When finding the great circle route between points other than from the center of the map, extend tape between points.\n\n4. CENTER OF MAP. The point at which the meridian 90° West and the parallel 40° North intersect is the map center. The antipodes of this center is the top of each gore or 90° East and 40° South.`","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":721,"value":"## The final map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1012,"value":"const bgClr = \"rgb(232,213,183)\";\nconst waterClr = \"rgb(98,131,129)\";","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1042,"value":"const projLines = {\n equator: d3.geoCircle().center([0, 90]).radius(90)(),\n primeMeridian: d3.geoCircle().center([90, 0]).radius(90)(),\n equatorUpper: d3.geoCircle().center([0, 90]).radius(89.8)(),\n equatorLower: d3.geoCircle().center([0, -90]).radius(89.8)(),\n tropicCancer: d3.geoCircle().center([0, 90]).radius(66.67)(),\n tropicCapricorn: d3.geoCircle().center([0, -90]).radius(66.67)(),\n articCircle: d3.geoCircle().center([0, 90]).radius(23.67)(),\n antarticCircle: d3.geoCircle().center([0, -90]).radius(23.67)(),\n graticuleNorth: d3\n .geoGraticule()\n .extent([\n [-180, 0.01],\n [180, 86]\n ])\n .step([15, 10])(),\n graticuleSouth: d3\n .geoGraticule()\n .extent([\n [-180, -0.01],\n [180, -86]\n ])\n .step([15, 10])()\n};","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$36","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1004,"value":"$37","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":997,"value":"

${mainMap()}

${polarMap(-90, \"N O R T H P O L A R P R O J E C T I O N\")}

${polarMap(90, \"S O U T H P O L A R P R O J E C T I O N\")}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"---\n\n## Appendices","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":747,"value":"import { TDMC } from \"observable:@jwolondon/30-day-map-challenge-utilities\"","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"import {geoGingery} from \"npm:d3-geo-polygon@2\";","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"import { curvedText } from \"observable:@jwolondon/curved-text-mark\"","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"import { GeoJSON } from \"observable:@jwolondon/geojson-generator\"","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":942,"value":"const gillSansMedium = FileAttachment(\"Gill Sans Medium.otf\")\nconst gillSansBold = FileAttachment(\"Gill Sans Bold.otf\");\nconst gillsansCondensedBold = FileAttachment(\"GillSans Condensed Bold.otf\");\nconst belltoposans = FileAttachment(\"BellTopoSans-Regular.otf\");","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"2","titling":"auto"}} 33:"$32:body"