2b:null 2c:["$","title",null,{"children":"Fitting world maps on phones | Yusuf Imaad Khan | Observable"}] 31:[{"id":"7b6ff41e373e01d7b5b95773e297d40625bd9ccc1936a023a066a7edd8da5eaadec4ab7a565303539e41e001f2e6730f3ee1e259fae4f19dc59e8d6b2f2ec22b","href":"https://static.observableusercontent.com/files/7b6ff41e373e01d7b5b95773e297d40625bd9ccc1936a023a066a7edd8da5eaadec4ab7a565303539e41e001f2e6730f3ee1e259fae4f19dc59e8d6b2f2ec22b","name":"land-50m.json","type":"application/json","lastModified":1747420376200.936,"size":545534}] 2f:{"id":"ade22ceb656291ba","slug":"fitting-world-maps-on-phones","title":"Fitting world maps on phones","thumbnail":"0bcb4a724569121f30c4450a1da5fee80a9d6e5b54449c945f024d7415aa3f34","access_level":"public","create_time":"$D2025-05-16T18:32:56.200Z","update_time":"$D2025-05-16T20:00:19.906Z","view_time":null,"first_public_time":"$D2025-05-16T19:48:28.468Z","fork":{"id":"19cbc978f7478a7b","slug":"plot-world-map","title":"Plot World Map","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"dc1c00f01f202a7a","login":"yusuf-imaad-khan","name":"Yusuf Imaad Khan","avatar_url":"https://avatars-next.observableusercontent.com/c3561ba00aa116d34a785bde1165548844d801d0fda7aeb64f9e356585ad7dab","tier":"starter_2024"},"version":199,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"baf8e10a8f058551","login":"yusuf-imaad-khan","name":"Yusuf","avatar_url":"https://avatars-next.observableusercontent.com/c3561ba00aa116d34a785bde1165548844d801d0fda7aeb64f9e356585ad7dab","tier":null}],"members":[{"type":"individual","id":"baf8e10a8f058551","login":"yusuf-imaad-khan","name":"Yusuf","avatar_url":"https://avatars-next.observableusercontent.com/c3561ba00aa116d34a785bde1165548844d801d0fda7aeb64f9e356585ad7dab","tier":null,"role":"editor"},{"type":"team","id":"dc1c00f01f202a7a","login":"yusuf-imaad-khan","name":"Yusuf Imaad Khan","avatar_url":"https://avatars-next.observableusercontent.com/c3561ba00aa116d34a785bde1165548844d801d0fda7aeb64f9e356585ad7dab","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Fitting world maps on phones","cells":[{"id":0,"value":"# Fitting world maps on phones","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":192,"value":"A rough and simple implementation of a world map for mobile in Observable Plot. Prompted by [this]( https://bsky.app/profile/harrystevens.bsky.social/post/3lnr3peddbk2c) and [this](https://jonasoesch.ch/articles/thematic-worldmaps-on-mobile/).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"// I put text here rather than plot because they're easier to edit and don't mess with positioning\ngroupedPlots = html`\n

\n Fitting world maps on phones\n

\n ${globe1}\n

\n ${globe2}\n

\n Harry Stevens: A trick for fitting world maps on phones: Stack two azimuthal equal-area projections, clipped at 90° longitude, each one rotated 180° from the other. The bottom map covers the top's Antarctica, which reduces the total height and looks nice.\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"globe1 = Plot.plot({\n width,\n marginTop: 0,\n marginRight: 0,\n marginBottom: 0,\n marginLeft: 0,\n projection: {\n type: \"azimuthal-equal-area\",\n rotate: [110, 0],\n clip: 90\n },\n width,\n marks: [\n Plot.sphere({ fill: \"#fff\", stroke: \"grey\" }),\n Plot.geo(land, { fill: \"grey\" })\n // Plot.graticule()\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"globe2 = Plot.plot({\n width,\n marginTop: 0,\n marginBottom: 0,\n marginLeft: 0,\n marginRight: 0,\n projection: {\n type: \"azimuthal-equal-area\",\n rotate: [-70, 0],\n clip: 90\n },\n width,\n marks: [\n Plot.sphere({ fill: \"#fff\", stroke: \"grey\" }),\n Plot.geo(land, { fill: \"grey\" })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"land = topojson.feature(land50m, land50m.objects.land)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"land50m = FileAttachment(\"land-50m.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"width = 300","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"