31:[{"id":"7b6ff41e373e01d7b5b95773e297d40625bd9ccc1936a023a066a7edd8da5eaadec4ab7a565303539e41e001f2e6730f3ee1e259fae4f19dc59e8d6b2f2ec22b","href":"https://static.observableusercontent.com/files/7b6ff41e373e01d7b5b95773e297d40625bd9ccc1936a023a066a7edd8da5eaadec4ab7a565303539e41e001f2e6730f3ee1e259fae4f19dc59e8d6b2f2ec22b","name":"land-50m.json","type":"application/json","lastModified":1747420376200.936,"size":545534}] 2f:{"title":"Fitting world maps on phones","cells":[{"id":0,"value":"# Fitting world maps on phones","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"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"},{"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"},{"id":10,"value":"land = topojson.feature(land50m, land50m.objects.land)","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"land50m = FileAttachment(\"land-50m.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":138,"value":"width = 300","pinned":true,"hidden":false,"mode":"ojs"},{"id":153,"value":"\n","pinned":true,"hidden":false,"mode":"html"}],"files":"$W31","stdlib":"1","titling":"auto"}