@jashkenas/world-cities-delaunay

31:T4781,svg` `32:[] 2f:{"title":"World Cities Delaunay","cells":[{"id":0,"value":"md`# World Cities Delaunay\n\nRef. [@mbostock/world-airports-delaunay](/@mbostock/world-airports-delaunay)
\nRef. [@fil/geo-delaunay](/@fil/geo-delaunay)
\nRef. https://www.jasondavies.com/maps/voronoi/airports/\n\nSource: [Simple Maps World Cities Database](https://simplemaps.com/data/world-cities)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"viewof population = slider({\n title: \"Cities with populations over...\",\n min: 1000,\n max: 1000000,\n value: 20000,\n step: 1000,\n format: \",\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"chart = {\n const context = DOM.context2d(width, height);\n const path = d3.geoPath(mutable projection, context).pointRadius(d => 1.5);\n\n function render() {\n context.clearRect(0, 0, width, height);\n\n context.beginPath();\n path(graticule);\n context.lineWidth = 0.5;\n context.strokeStyle = \"#ccc\";\n context.stroke();\n\n context.beginPath();\n path(mesh);\n context.lineWidth = 0.5;\n context.strokeStyle = \"#000\";\n context.stroke();\n\n context.beginPath();\n path(sphere);\n context.lineWidth = 1.5;\n context.strokeStyle = \"#000\";\n context.stroke();\n\n context.beginPath();\n path({\n type: \"MultiPoint\",\n coordinates: points\n });\n context.fillStyle = \"#55005599\";\n context.fill();\n }\n\n function dragged() {\n mutable projection = mutable projection;\n render();\n }\n\n return d3\n .select(context.canvas)\n .call(drag(mutable projection).on(\"drag.render\", dragged))\n .call(render)\n .node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"mutable projection = d3\n .geoOrthographic()\n .fitExtent([[1, 1], [width - 1, height - 1]], sphere)\n .rotate([80, -5])","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"height = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"sphere = ({type: \"Sphere\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"graticule = d3.geoGraticule10()","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"points = largeCities.map(d => [d.lng, d.lat])","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"edges = d3.geoDelaunay(points).edges","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"largeCities = allCities.filter(d => d.population > population)","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"allCities = d3.csv(\n \"https://gist.githubusercontent.com/jashkenas/934edd697840f7acec361b6353a809a3/raw/2cfd79e04d573a524084db55627ebcee2c3f1938/worldcities-new.csv\",\n ({ city, lat, lng, country, population }) => ({\n city,\n lat: +lat,\n lng: +lng,\n country,\n population: +population\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"mesh = ({\n type: \"MultiLineString\",\n coordinates: edges.map(([i, j]) => [points[i], points[j]])\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"import {drag} from \"@mbostock/d3-versor-dragging\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3@5\", \"d3-geo-voronoi@1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":433,"value":"md`#### Bonus\n\nIf you're curious how this notebook is put together ... here’s a chart of the data flow, generated by the [Notebook Visualizer](https://beta.observablehq.com/@mbostock/notebook-visualizer?id=@jashkenas/world-cities-delaunay):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}