Create observablehq-azimuthal.js

Author: forresto

observablehq-azimuthal.js

@@ -0,0 +1,232 @@
+// URL: https://beta.observablehq.com/@forresto/d3-azimuthal-cities-straight-line-routes
+// Title: Azimuthal Artifact
+// Author: Forrest Oliphant (@forresto)
+// Version: 280
+// Runtime version: 1
+
+const m0 = {
+  id: "e6547e85ad478b83@280",
+  variables: [
+    {
+      inputs: ["md"],
+      value: (function(md){return(
+md`# Azimuthal Artifact
+
+Todo:
+- Make a new non-equidistant (logarithmic?) azimuthal projection, to give closer locations more room
+- Place names around edge
+- Experiment with design to make it suitable for laser engraving
+
+Non-map version, designed as artifact to have spatial intuition of friends, family, memories...
+![](https://c2.staticflickr.com/2/1940/43785173620_0b8b5cc6cb_b.jpg)
+`
+)})
+    },
+    {
+      name: "viewof center",
+      inputs: ["html","cities","option"],
+      value: (function(html,cities,option)
+{
+  const form = html`
+<form><select name=select>
+  ${cities.map(option)}
+  <!--
+  <option value="[0, 0]">Standard aspect</option>
+  <option value="[0, 90]">North polar aspect</option>
+  <option value="[0, -90]">South polar aspect</option>
+  -->
+</select></form>`;
+  form.oninput = () => (form.value = JSON.parse(form.select.value));
+  form.oninput();
+  return form;
+}
+)
+    },
+    {
+      name: "center",
+      inputs: ["Generators","viewof center"],
+      value: (G, _) => G.input(_)
+    },
+    {
+      name: "map",
+      inputs: ["DOM","width","height","d3","projection","graticule","land","sphere","lines"],
+      value: (function(DOM,width,height,d3,projection,graticule,land,sphere,lines)
+{
+  const context = DOM.context2d(width, height);
+  const path = d3.geoPath(projection, context);
+  context.beginPath(),
+    path(graticule),
+    (context.strokeStyle = "#eee"),
+    context.stroke();
+  context.beginPath(),
+    path(land),
+    (context.strokeStyle = "#aaa"),
+    context.stroke();
+  context.beginPath(),
+    path(sphere),
+    (context.strokeStyle = "#000"),
+    context.stroke();
+  context.beginPath(),
+    path(lines),
+    (context.strokeStyle = "#000"),
+    context.stroke();
+  return context.canvas;
+}
+)
+    },
+    {
+      name: "viewof zoom",
+      inputs: ["html"],
+      value: (function(html){return(
+html`<input type=range min=-500 max=500 value=1>`
+)})
+    },
+    {
+      name: "zoom",
+      inputs: ["Generators","viewof zoom"],
+      value: (G, _) => G.input(_)
+    },
+    {
+      name: "viewof rotateOffset",
+      inputs: ["html"],
+      value: (function(html){return(
+html`<input type=range min=-360 max=360 value=0></input>`
+)})
+    },
+    {
+      name: "rotateOffset",
+      inputs: ["Generators","viewof rotateOffset"],
+      value: (G, _) => G.input(_)
+    },
+    {
+      name: "rotate",
+      inputs: ["center","rotateOffset"],
+      value: (function(center,rotateOffset)
+{
+  const r = center.map(x => -x);
+  r[0] += rotateOffset;
+  return r;
+}
+)
+    },
+    {
+      name: "projection",
+      inputs: ["d3","rotate","width","height","zoom","sphere"],
+      value: (function(d3,rotate,width,height,zoom,sphere){return(
+d3
+  .geoAzimuthalEquidistant()
+  .rotate(rotate)
+  .translate([width / 2, height / 2])
+  .fitExtent([[zoom, zoom], [width - zoom, height - zoom]], sphere)
+  .precision(0.1)
+)})
+    },
+    {
+      name: "height",
+      inputs: ["width"],
+      value: (function(width){return(
+Math.max(640, width)
+)})
+    },
+    {
+      name: "cities",
+      value: (function(){return(
+[
+  ["Tokyo", 35.685, 139.7514],
+  ["New York", 40.6943, -73.9249],
+  ["Mexico City", 19.4424, -99.131],
+  ["Mumbai", 19.017, 72.857],
+  ["Sao Paulo", -23.5587, -46.625],
+  ["Delhi", 28.67, 77.23],
+  ["Shanghai", 31.2165, 121.4365],
+  ["Kolkata", 22.495, 88.3247],
+  ["Dhaka", 23.7231, 90.4086],
+  ["Buenos Aires", -34.6025, -58.3975],
+  ["Los Angeles", 34.114, -118.4068],
+  ["Karachi", 24.87, 66.99],
+  ["Cairo", 30.05, 31.25],
+  ["Rio de Janeiro", -22.925, -43.225],
+  ["Osaka", 34.75, 135.4601],
+  ["Beijing", 39.9289, 116.3883],
+  ["Manila", 14.6042, 120.9822],
+  ["Moscow", 55.7522, 37.6155],
+  ["Istanbul", 41.105, 29.01],
+  ["Paris", 48.8667, 2.3333],
+  ["Seoul", 37.5663, 126.9997],
+  ["Lagos", 6.4433, 3.3915],
+  ["Jakarta", -6.1744, 106.8294],
+  ["Guangzhou", 23.145, 113.325],
+  ["Chicago", 41.8373, -87.6861],
+  ["London", 51.5, -0.1167]
+].map(([name, lat, lon]) => [name, lon, lat])
+)})
+    },
+    {
+      name: "lines",
+      inputs: ["cities","center"],
+      value: (function(cities,center){return(
+{
+  type: "MultiLineString",
+  coordinates: cities.map(([_, lon, lat]) => [center, [lon, lat]])
+}
+)})
+    },
+    {
+      name: "option",
+      inputs: ["html"],
+      value: (function(html){return(
+([name, lon, lat]) =>
+  html`<option value="[${lon}, ${lat}]">${name}</option>`
+)})
+    },
+    {
+      name: "sphere",
+      value: (function(){return(
+{type: "Sphere"}
+)})
+    },
+    {
+      name: "graticule",
+      inputs: ["d3"],
+      value: (function(d3){return(
+d3.geoGraticule10()
+)})
+    },
+    {
+      name: "land",
+      inputs: ["topojson","world"],
+      value: (function(topojson,world){return(
+topojson.feature(world, world.objects.land)
+)})
+    },
+    {
+      name: "world",
+      value: (function(){return(
+fetch("https://unpkg.com/world-atlas@1/world/110m.json").then(
+  response => response.json()
+)
+)})
+    },
+    {
+      name: "topojson",
+      inputs: ["require"],
+      value: (function(require){return(
+require("topojson-client@3")
+)})
+    },
+    {
+      name: "d3",
+      inputs: ["require"],
+      value: (function(require){return(
+require("d3-geo@1")
+)})
+    }
+  ]
+};
+
+const notebook = {
+  id: "e6547e85ad478b83@280",
+  modules: [m0]
+};
+
+export default notebook;