2b:null 2c:["$","title",null,{"children":"Rolling Marble Projection | Shaun Lebron | Observable"}] 31:[{"id":"1a8d16de911847348506be045cfa7a38c4c770d30c67b665f84bc0329a36c3064bfe79a93201f1f51ec607c230567ae053e0b5cfa95bf95c8df635da337144e8","href":"https://static.observableusercontent.com/files/1a8d16de911847348506be045cfa7a38c4c770d30c67b665f84bc0329a36c3064bfe79a93201f1f51ec607c230567ae053e0b5cfa95bf95c8df635da337144e8","name":"point-in-svg-polygon-1.0.25.js","type":"application/javascript","lastModified":1586075178020.031,"size":7173},{"id":"83e1e44337b0e33963a7b9bf6a7f4f0e42511d8577c58f55a2e5cf1d13e09f54c9eeec48960ba23874f4b83578d31ec3f017553bbf67ac580cad263af74587cc","href":"https://static.observableusercontent.com/files/83e1e44337b0e33963a7b9bf6a7f4f0e42511d8577c58f55a2e5cf1d13e09f54c9eeec48960ba23874f4b83578d31ec3f017553bbf67ac580cad263af74587cc","name":"emoji-flags-1.2.0.js","type":"application/javascript","lastModified":1586075506581.464,"size":36702}] 2f:{"id":"27f44d0fe1e0dec5","slug":"rolling-marble-projection","title":"Rolling Marble Projection","thumbnail":"7aa00d317b9d1e48fde5f6b10df28fd0176f15d806c7bc819b4f46e9549b83cf","access_level":"public","create_time":"$D2018-05-31T03:19:35.420Z","update_time":"$D2020-04-06T21:20:32.375Z","view_time":null,"first_public_time":"$D2018-05-31T10:42:25.644Z","fork":false,"stars":37,"starred":false,"owner":{"type":"team","id":"ed9847273198461c","login":"shaunlebron","name":"Shaun Lebron","avatar_url":"https://avatars-next.observableusercontent.com/681c504a781cacec69ea0df79eb5a6a890b26146edebc8d1ee3153812c528dc4","tier":"starter_2024"},"version":689,"publish_version":689,"role":null,"authored":false,"authors":[{"type":"individual","id":"22dcd5a87171b339","login":"shaunlebron","name":"Shaun Lebron","avatar_url":"https://avatars-next.observableusercontent.com/681c504a781cacec69ea0df79eb5a6a890b26146edebc8d1ee3153812c528dc4","tier":null}],"members":[{"type":"individual","id":"22dcd5a87171b339","login":"shaunlebron","name":"Shaun Lebron","avatar_url":"https://avatars-next.observableusercontent.com/681c504a781cacec69ea0df79eb5a6a890b26146edebc8d1ee3153812c528dc4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":8,"collection":null,"type":"notebook","body":{"title":"Rolling Marble Projection","cells":[{"id":0,"value":"md`# Rolling Marble Projection\n\nMouse over the map to see the true shape of countries—using a globe overlay.\n\n__Tip__: globe and map always align at the cursor point\n\n(influenced by Aubrey Hesselgren's \"Golfball Projection\" from his game [The World is Flat](http://ludopathic.co.uk/PressKit/sheet.php?p=the_world_is_flat))\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"{\n const ctx = DOM.context2d(width,height);\n \n // draw map\n ctx.globalAlpha = 0.7;\n ctx.drawImage(mapBase.canvas, 0,0,width,height);\n \n // draw globe\n if (mouseXY) {\n ctx.globalAlpha = 0.9;\n const [x,y] = mouseXY;\n ctx.translate(x,y);\n \n // I thought I would use this to rotate the globe north,\n // but it's a bit disorienting.\n // ctx.rotate(smallestDeltaAngle(mouseNorth - Math.PI*3/2));\n \n ctx.translate(-focusSize/2, -focusSize/2);\n drawWorldHighlight(ctx, focusProjection);\n }\n \n // mouse event\n ctx.canvas.addEventListener(\"mousemove\", e => onMouseMove(e.layerX, e.layerY));\n \n // mouse label\n const el = html``;\n el.appendChild(ctx.canvas);\n if (mouseCountryLabel) el.appendChild(mouseCountryLabel);\n return el;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"function drawWorld(ctx, projection) {\n const path = d3.geoPath(projection, ctx);\n ctx.lineWidth = 0.7;\n ctx.beginPath(), path(sphere), ctx.fillStyle = \"rgba(255,255,255,0.7)\", ctx.fill();\n ctx.beginPath(), path(graticule), ctx.strokeStyle = \"#CCC\", ctx.stroke();\n ctx.beginPath(), path(land), ctx.fillStyle = \"rgba(0,0,0,0.1)\", ctx.fill();\n ctx.beginPath(), path(borders), ctx.strokeStyle = \"#bbb\", ctx.stroke();\n ctx.beginPath(), path(sphere), ctx.strokeStyle = \"#555\", ctx.stroke();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":572,"value":"function drawWorldHighlight(ctx, projection) {\n const path = d3.geoPath(projection, ctx);\n ctx.lineWidth = 0.7;\n ctx.beginPath(), path(sphere), ctx.fillStyle = \"rgba(255,255,255,0.7)\", ctx.fill();\n ctx.beginPath(), path(graticule), ctx.strokeStyle = \"#CCC\", ctx.stroke();\n ctx.beginPath(), path(land), ctx.fillStyle = \"rgba(0,0,0,0.1)\", ctx.fill();\n ctx.beginPath(), path(borders), ctx.strokeStyle = \"#bbb\", ctx.stroke();\n if (mouseCountry) {\n ctx.beginPath(), path(mouseCountry);\n ctx.strokeStyle = \"rgba(0,150,100,0.8)\", ctx.stroke();\n ctx.fillStyle = \"rgba(0,150,100,0.5)\", ctx.fill();\n }\n ctx.beginPath(), path(sphere), ctx.strokeStyle = \"#555\", ctx.stroke();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"mapBase = {\n const ctx = DOM.context2d(width,height);\n drawWorld(ctx, projection);\n return ctx;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"mouseCountryLabel = {\n if (!validCountry(mouseCountry)) return;\n const {name,code} = mouseCountry.properties;\n\n const [x,y] = mouseXY;\n const flag = emojiFlags.countryCode(code).emoji;\n return html`\n

\n\n${flag}\n\n${name}\n

\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"md`## Mouse`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"initializeMouse = {\n const c = randomValidCountry();\n const [lon,lat] = c.properties.center;\n const [x,y] = projection([lon,lat]);\n mutable mouseXY = [x,y];\n mutable mouseLonLat = [lon,lat];\n mutable mouseNorth = getNorth([x,y],[lon,lat]);\n mutable mouseCountry = c;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"// a compass that points north (returns screen angle)\nfunction getNorth([x,y],[lon,lat]) { \n // get geo coord circle\n const interpRad = d3.interpolate(0,2*Math.PI);\n const getPoint = t => {\n const a = interpRad(t);\n const xy = [x+Math.cos(a), y+Math.sin(a)];\n const geo = projection.invert(xy);\n // ideally we would check if xy is inside the sphere (but it's expensive)\n if (geo) return {xy,geo,a};\n };\n const count = 360;\n const points = d3.range(count).map(t => getPoint(t/count));\n const deltaLon = p => Math.abs(p.geo[0]-lon);\n const vert = points[d3.scan(points, (a,b) => deltaLon(a) - deltaLon(b))];\n const northA = vert.geo[1] < lat ? vert.a : vert.a + Math.PI;\n const normA = a => a % (2*Math.PI) - Math.PI;\n return normA(northA);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":662,"value":"// from: https://stackoverflow.com/a/2007279/142317\nfunction smallestDeltaAngle(da) {\n return Math.atan2(Math.sin(da), Math.cos(da));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":607,"value":"mutable mouseNorth = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"mutable mouseXY = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"mutable mouseLonLat = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"mutable mouseCountry = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"function onMouseMove(x,y) {\n if (!xyInsideSphere([x,y])) {\n mutable mouseCountry = null;\n mutable mouseXY = null;\n mutable mouseNorth = null;\n return;\n }\n const p = projection.invert([x,y]);\n mutable mouseLonLat = p;\n const c = countryTopos.find(c => d3.geoContains(c,p));\n if (c !== mouseCountry) mutable mouseCountry = c;\n mutable mouseXY = [x,y];\n mutable mouseNorth = getNorth([x,y],p);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"xyInsideSphere = {\n const spherePath = path(sphere);\n return p => pointInSvgPolygon.isInside(p, spherePath);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"md`## Projection`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"height = width * 0.7","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"focusSize = width / 4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"projection = {\n const pad = focusSize/4;\n // return d3.geoNaturalEarth1()\n return d3.geoCylindricalStereographic()\n // return d3.geoAirocean()\n .fitExtent([[pad,pad],[width-pad,height-pad]], sphere)\n .precision(0.1);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"focusProjection = {\n const [lon,lat] = mouseLonLat;\n return d3.geoSatellite()\n .rotate([-lon,-lat,0])\n .fitSize([focusSize, focusSize], sphere)\n .precision(0.1);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"landMap = {\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"md`## Map objects`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"sphere = ({type: \"Sphere\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"graticule = d3.geoGraticule10()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"borders = topojson.mesh(world, world.objects.countries)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"land = topojson.feature(world, world.objects.land)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md`## Countries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"countryTopos = topojson.feature(world, world.objects.countries).features.map(c => {\n const code = countryCodesById[c.id];\n if (!code) return c;\n return Object.assign(c, {\n // attach extra helpful properties\n properties: {\n name: code[\"name\"].replace(/\$.*\$/g, \"\"),\n code: code[\"alpha-2\"],\n center: d3.geoCentroid(c),\n }\n });\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"countryCodesById = {\n const codes = {};\n for (let c of countryCodes) {\n const id = c[\"country-code\"];\n codes[id] = c;\n }\n return codes;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"function validCountry(c) {\n if (!c) return;\n const {name,code} = c.properties;\n if (!name || !code) return;\n return true;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"function randomValidCountry() {\n let c;\n for (let i=0; i<10; i++) {\n c = countryTopos[Math.floor(Math.random()*countryTopos.length)];\n if (validCountry(c)) break;\n }\n return validCountry(c) && c;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"md`## Deps`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"world = d3.json(\"https://unpkg.com/world-atlas@1/world/110m.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"// from: https://en.wikipedia.org/wiki/ISO_3166-1_numeric\ncountryCodes = d3.json(\"https://cdn.rawgit.com/lukes/ISO-3166-Countries-with-Regional-Codes/689f55a9/slim-2/slim-2.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require('d3', 'd3-geo-projection', 'd3-geo-polygon')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"pointInSvgPolygon = require(await FileAttachment(\"point-in-svg-polygon-1.0.25.js\").url())\n//require('https://bundle.run/point-in-svg-polygon@1.0.20')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"emojiFlags = require(await FileAttachment(\"emoji-flags-1.2.0.js\").url())\n// require('https://bundle.run/emoji-flags@1.2.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"