2a:null 2b:["$","title",null,{"children":"Azimuthal Artifact | Forrest O. | Observable"}] 30:[] 2e:{"id":"e6547e85ad478b83","slug":"d3-azimuthal-cities-straight-line-routes","title":"Azimuthal Artifact","thumbnail":"7b0cdcdcdc32f481e0ccc22c35a5e3088aa8e4fdf03369b262cd8528bf37c5c3","access_level":"public","create_time":"$D2018-10-28T16:51:51.192Z","update_time":"$D2019-07-08T13:25:23.441Z","view_time":null,"first_public_time":"$D2018-10-28T18:34:33.748Z","has_unpublished_edits":null,"fork":{"id":"2abff113a753c90e","slug":"azimuthal-equidistant","title":"Azimuthal Equidistant","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f9abb147dc0e6dcd","login":"forresto","name":"Forrest O.","avatar_url":"https://avatars-next.observableusercontent.com/c22671040121cb9b9d22913e2eb0ffc4d65d3e535cda1133d6655f1d63b32e3f","tier":"starter_2024"},"version":281,"publish_version":281,"role":null,"authored":false,"authors":[{"type":"individual","id":"b16dd1586d4d1422","login":"forresto","name":"Forrest O.","avatar_url":"https://avatars-next.observableusercontent.com/c22671040121cb9b9d22913e2eb0ffc4d65d3e535cda1133d6655f1d63b32e3f","tier":null}],"members":[{"type":"individual","id":"b16dd1586d4d1422","login":"forresto","name":"Forrest O.","avatar_url":"https://avatars-next.observableusercontent.com/c22671040121cb9b9d22913e2eb0ffc4d65d3e535cda1133d6655f1d63b32e3f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Azimuthal Artifact","cells":[{"id":1,"value":"md`# Azimuthal Artifact\n\nTodo:\n- Make a new non-equidistant (logarithmic?) azimuthal projection, to give closer locations more room\n- Place names around edge\n- Experiment with design to make it suitable for laser engraving\n\nNon-map version, designed as artifact to have spatial intuition of friends, family, memories...\n![](https://c2.staticflickr.com/2/1940/43785173620_0b8b5cc6cb_b.jpg)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"viewof center = {\n const form = html`\n`;\n form.oninput = () => (form.value = JSON.parse(form.select.value));\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"map = {\n const context = DOM.context2d(width, height);\n const path = d3.geoPath(projection, context);\n context.beginPath(),\n path(graticule),\n (context.strokeStyle = \"#eee\"),\n context.stroke();\n context.beginPath(),\n path(land),\n (context.strokeStyle = \"#aaa\"),\n context.stroke();\n context.beginPath(),\n path(sphere),\n (context.strokeStyle = \"#000\"),\n context.stroke();\n context.beginPath(),\n path(lines),\n (context.strokeStyle = \"#000\"),\n context.stroke();\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"viewof zoom = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"viewof rotateOffset = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"rotate = {\n const r = center.map(x => -x);\n r[0] += rotateOffset;\n return r;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"projection = d3\n .geoAzimuthalEquidistant()\n .rotate(rotate)\n .translate([width / 2, height / 2])\n .fitExtent([[zoom, zoom], [width - zoom, height - zoom]], sphere)\n .precision(0.1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"height = Math.max(640, width)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"cities = [\n [\"Tokyo\", 35.685, 139.7514],\n [\"New York\", 40.6943, -73.9249],\n [\"Mexico City\", 19.4424, -99.131],\n [\"Mumbai\", 19.017, 72.857],\n [\"Sao Paulo\", -23.5587, -46.625],\n [\"Delhi\", 28.67, 77.23],\n [\"Shanghai\", 31.2165, 121.4365],\n [\"Kolkata\", 22.495, 88.3247],\n [\"Dhaka\", 23.7231, 90.4086],\n [\"Buenos Aires\", -34.6025, -58.3975],\n [\"Los Angeles\", 34.114, -118.4068],\n [\"Karachi\", 24.87, 66.99],\n [\"Cairo\", 30.05, 31.25],\n [\"Rio de Janeiro\", -22.925, -43.225],\n [\"Osaka\", 34.75, 135.4601],\n [\"Beijing\", 39.9289, 116.3883],\n [\"Manila\", 14.6042, 120.9822],\n [\"Moscow\", 55.7522, 37.6155],\n [\"Istanbul\", 41.105, 29.01],\n [\"Paris\", 48.8667, 2.3333],\n [\"Seoul\", 37.5663, 126.9997],\n [\"Lagos\", 6.4433, 3.3915],\n [\"Jakarta\", -6.1744, 106.8294],\n [\"Guangzhou\", 23.145, 113.325],\n [\"Chicago\", 41.8373, -87.6861],\n [\"London\", 51.5, -0.1167]\n].map(([name, lat, lon]) => [name, lon, lat])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"lines = ({\n type: \"MultiLineString\",\n coordinates: cities.map(([_, lon, lat]) => [center, [lon, lat]])\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"option = ([name, lon, lat]) =>\n html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"sphere = ({type: \"Sphere\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"graticule = d3.geoGraticule10()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"land = topojson.feature(world, world.objects.land)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"world = fetch(\"https://unpkg.com/world-atlas@1/world/110m.json\").then(\n response => response.json()\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"d3 = require(\"d3-geo@1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1"}} 2f:"$2e:body"