2b:null 2c:["$","title",null,{"children":"Rearrange Dutch railway map layout | Kelley van Evert | Observable"}] 31:T6fb,viewof map = { const root = d3.select(svg`

...and interpolate the rest of the map accordingly :D
\n(Go to updated version)\n
\n
\nNote: this is a work-in-progress!\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":579,"value":"map.update_bg()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"viewof b = button('Recalculate!')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"no = {\n b;\n return md`Number of displaced stations: ${displacements.filter(d => d[0] != 0).length}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"model = {\n if (no == 0) return false;\n \n const sigma2 = 0;\n const alpha = 100;\n \n return {\n x: kriging.train(displacements.map(d => d[0]), stations_flat.map(s => s[0]), stations_flat.map(s => s[1]), \"exponential\", sigma2, alpha),\n y: kriging.train(displacements.map(d => d[1]), stations_flat.map(s => s[0]), stations_flat.map(s => s[1]), \"exponential\", sigma2, alpha),\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":530,"value":"viewof b2 = button('Reset')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"{\n b2;\n mutable displacements = stations_flat.map(s => [0,0]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"dproj = p => !model ? p : [\n kriging.predict(p[0], p[1], model.x),\n kriging.predict(p[0], p[1], model.y),\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"dproj([50,50])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":603,"value":"width = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"height = 700","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"md`## Projection`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"md`There will be two projections. First, we have a normal geo-projection, projecting the geographic coordinates to flat 2d space, with The Netherlands centered around te origin.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"geoProj = d3.geoAlbers()\n\t\t\t.center([5.5, 52.1])\n .rotate([0, 0, 0])\n .parallels([50.77083, 53.35917])\n .scale(13000)\n .translate([0, 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"md`As we only need to calculate this projection once, whereas we'll be calculating the second projection often, we cache the results of this projection.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"netherlands_flat = netherlands_geo.map(outline => outline.map(geoProj))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"stations_flat = stations_geo.map(station => geoProj([station.Lon, station.Lat]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"tracks_flat = tracks_geo.map(track => track.map(geoProj))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"md`The second projection is what this experiment is all about. Given the set of user-inputted rearrangements of stations, i.e. a displacement vector for each station, we want to smoothly interpolate the rest of the map (the country's outlines and the train tracks) accordingly. For this, we need to separate 2D-interpolations, one to interpolate the new x-coordinates, and one to interpolate the new y-coordinates, given the displacement data: ${tex.block`\\begin{aligned}\n x_\\text{new} &= f(x_\\text{old}, y_\\text{old}) \\\\\n y_\\text{new} &= g(x_\\text{old}, y_\\text{old})\n\\end{aligned}`}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"mutable displacements = stations_flat.map(s => [0,0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"md`## Geographic data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"md`### A) The Netherlands\n\nA map of the Netherlands from [Natural Earth Data](https://www.naturalearthdata.com/). Essentially an array of paths (outlines of areas).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"netherlands_geo = d3.json('https://gist.githubusercontent.com/kelleyvanevert/9028d70622474468ff8ffefb73f3947a/raw/3b70bd55558894ace50fab0747e51387e3a79548/nl.geo.json')\n .then(data => data.geometry.coordinates.map(outlines => outlines[0]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"md`### B) Train stations\n\nThis is a subset of the NS API stations list (with foreign stations etc removed).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"stations_geo = d3.json('https://gist.githubusercontent.com/kelleyvanevert/9028d70622474468ff8ffefb73f3947a/raw/3b70bd55558894ace50fab0747e51387e3a79548/stations.json')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"md`### C) Train tracks\n\nThis data is just 'borrowed' from the lovely web app http://spoorkaart.mwnn.nl/. Just an array of paths.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"tracks_geo = d3.json('https://gist.githubusercontent.com/kelleyvanevert/9028d70622474468ff8ffefb73f3947a/raw/3b70bd55558894ace50fab0747e51387e3a79548/tracks.json')\n .then(data => data\n .features\n .filter(f => f.geometry.type == 'LineString')\n .map(feature => feature.geometry.coordinates)\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":518,"value":"import { button } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"value":"md`This 2D-interpolation code is from http://oeo4b.github.io/ — I just slightly edited it:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"m = {\n const fitModel = kriging.train([1,5,2], [5,1,3], [2,1,4], \"exponential\", 0, 100);\n return fitModel;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"kriging.predict(5,4, m)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"