2c:null 2d:["$","title",null,{"children":"Rearrange Dutch railway map layout (take 2) | Kelley van Evert | Observable"}] 32:T18b6,metro_positions = [ [1229, 2645], [1906, 2709], [1930, 2633], [1176, 2671], [1018, 2762], [1055, 2728], [1084, 2701], [987, 2762], [570, 2308], [579, 2267], [602, 2244], [568, 2365], [589, 2410], [515, 2520], [488, 2520], [473, 2554], [447, 2603], [447, 2637], [447, 2671], [447, 2724], [462, 2520], [436, 2520], [651, 1900], [1137, 2338], [968, 1900], [789, 2051], [370, 2652], [368, 2690], [370, 2614], [368, 2577], [402, 2535], [449, 2773], [606, 2845], [630, 2807], [628, 2777], [628, 2747], [630, 2716], [630, 2686], [628, 2656], [628, 2626], [689, 2762], [1291, 2338], [1135, 2671], [1271, 2603], [1531, 2780], [1438, 2686], [1582, 2848], [1563, 2467], [1638, 2331], [1694, 2467], [1517, 2879], [1517, 2826], [1467, 2718], [1496, 2749], [1556, 2809], [1922, 2285], [1862, 2754], [570, 2527], [1888, 2176], [1891, 2029], [1893, 2119], [1893, 1945], [1893, 2236], [1959, 2286], [2000, 2286], [1894, 2259], [1893, 1892], [1902, 1866], [1919, 1881], [1934, 1896], [1953, 2104], [1921, 2093], [1983, 2104], [1642, 2036], [1865, 1832], [1891, 1855], [2063, 1915], [2061, 2063], [2048, 2100], [2077, 2285], [1642, 1885], [1806, 1877], [1768, 1915], [1539, 1779], [1600, 1719], [1948, 1537], [1480, 1669], [1476, 1405], [1675, 1454], [2235, 1537], [2451, 1420], [2402, 1635], [2592, 853], [2401, 1870], [2232, 2009], [2410, 2017], [2484, 2093], [2515, 2527], [2651, 2425], [2484, 2316], [2961, 2523], [3056, 2319], [2367, 2433], [2560, 2486], [2584, 2463], [2607, 2440], [2785, 2391], [2807, 2391], [2834, 2391], [2832, 2384], [2870, 2399], [2888, 2365], [2917, 2338], [2991, 2316], [3040, 2350], [3042, 2372], [3042, 2395], [3040, 2418], [3032, 2433], [3017, 2448], [3004, 2463], [2989, 2478], [2885, 2414], [2902, 2429], [2917, 2444], [2932, 2459], [2968, 2569], [3025, 2577], [3047, 2577], [2970, 2546], [2274, 2376], [2237, 2338], [2197, 2301], [2155, 2286], [2019, 2127], [2014, 2168], [2014, 2202], [2014, 2236], [2061, 1870], [3074, 2577], [2129, 2214], [1427, 1541], [1479, 1541], [1309, 1488], [1159, 1688], [1159, 1847], [1200, 1454], [921, 1446], [1634, 2879], [1619, 2879], [3095, 2323], [3113, 2323], [2133, 1734], [2286, 1537], [2373, 1571], [2401, 1719], [2403, 1775], [2401, 1817], [2401, 1953], [2291, 2010], [2431, 2040], [2454, 2063], [2484, 2157], [2484, 2180], [2484, 2210], [2486, 2236], [2486, 2395], [2492, 2524], [2494, 2531], [2577, 2183], [2624, 2233], [2548, 2157], [2522, 2131], [2376, 1499], [2407, 1469], [2501, 1333], [2571, 1269], [2571, 1182], [2552, 1118], [2537, 1061], [2537, 1016], [2537, 929], [2539, 864], [2558, 853], [2456, 1503], [2136, 1972], [2074, 1794], [2238, 1575], [2229, 1639], [2214, 1654], [2189, 1677], [2176, 1692], [2161, 1707], [2102, 1764], [2129, 2176], [2167, 2127], [2191, 2104], [2216, 2078], [2235, 2040], [2117, 2248], [2102, 2263], [2117, 2286], [2038, 2286], [1673, 2444], [1658, 2429], [1641, 2384], [2324, 1537], [1956, 1170], [1899, 1170], [1774, 1352], [1870, 1620], [1631, 1507], [1481, 1333], [1660, 1968], [1713, 1885], [1679, 1885], [1621, 1858], [1596, 1836], [1575, 1813], [1394, 1960], [1411, 1942], [1428, 1926], [1445, 1908], [1464, 1889], [1483, 1870], [1296, 2251], [1294, 2142], [1341, 1979], [1399, 2233], [1437, 2195], [1486, 2146], [1517, 2131], [1539, 2131], [1564, 2119], [1583, 2100], [1607, 2074], [1360, 2274], [1243, 2240], [1267, 2312], [1296, 2440], [1296, 2512], [1403, 2660], [1437, 2543], [1441, 2637], [1416, 2459], [1373, 2418], [1380, 2637], [1360, 2614], [1029, 2490], [719, 2142], [787, 2157], [942, 2312], [893, 2263], [840, 2210], [855, 2607], [738, 2607], [921, 1915], [880, 1915], [827, 1960], [814, 2025], [761, 2078], [711, 2097], [1258, 1688], [1294, 1666], [1328, 1632], [1362, 1598], [2167, 1363], [1838, 1511], [1860, 1511], [1883, 1511], [1906, 1511], [1930, 1514], [1964, 2405], [1945, 2386], [1927, 2367], [1923, 2327], [648, 2142], [595, 2557], [2014, 1915], [2240, 1499], [2189, 1386], [2208, 1405], [2227, 1424], [2238, 1454], [2008, 1171], [2033, 1189], [2050, 1212], [2085, 1242], [2167, 1326], [2006, 1484], [2034, 1454], [2065, 1424], [2095, 1394], [1942, 1208], [1951, 1303], [1951, 1254], [1953, 1348], [1904, 1227], [1860, 1269], [1830, 1299], [1804, 1326], [1779, 1382], [1815, 1511], [1826, 1579], [1913, 1575], [1660, 1352], [1588, 1352], [1736, 1394], [1569, 1541], [1535, 1352], [1481, 1363], [1479, 1488], [1479, 1443], [1668, 1719], [1736, 1719], [1709, 1719], [1632, 1654], [1630, 1609], [1755, 1719], [1868, 1764], [1868, 1730], [1819, 1783], [1785, 1749], [1868, 1798], [1573, 1745], [1535, 1719], [1519, 1756], [1500, 1737], [1479, 1719], [1507, 2565], [1607, 2365], [1573, 2399], [1483, 2384], [1416, 2338], [1483, 2588], [1541, 2531], [670, 2607], [616, 2577], [1781, 2176], [1705, 2176], [1724, 2176], [1743, 2176], [1762, 2176], [1928, 2607], [1930, 2580], [1928, 2554], [1930, 2527], [1740, 2467], [1777, 2467], [1817, 2444], [1851, 2410], [1872, 2388], [1951, 2491], [1972, 2469], [1702, 1428], [1698, 1968], [1645, 1968], [1679, 1968], [1724, 1957], [1159, 1760], [1159, 1726], [1157, 1594], [1326, 1503], [1337, 1514], [1346, 1526], [1360, 1537], [1159, 1813], [1157, 1787], [1157, 1594], [959, 1484], [1023, 1499], [1091, 1499], [1651, 2104], [651, 2180], [653, 2051], [653, 2013], [651, 1976], [651, 1938], [627, 2221], [1237, 1454], [1180, 1477], [1159, 1499], [1263, 1454], [1808, 2656], [1768, 2614], [1747, 2543], [1656, 2656], [1628, 2686], [1600, 2713], [1564, 2750], [1842, 2690], [1330, 1480], [1350, 1458], [1365, 1443], [1380, 1428], [1411, 1405], [1433, 1405], [1841, 1868], ]33:T7fe,viewof map = { const root = d3.select(svg`

...and interpolate the rest of the map accordingly :D
\n
\nNote: this is a work-in-progress!\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":913,"value":"md`**The idea:**\n\n- We have a map with the outline of The Netherlands, and the traintracks & -stations.\n- We allow the user to drag the stations around.\n- The rest of the map (the outline of the country and the tracks between the stations) is automatically interpolated from this rearrangement.\n\n**Why?**\n\n- For fun\n- If we take the stations' positions from NS's official railway map (which is abstracted an looks like a metro map) — we get some layout of the country as well. It would be cool to place this layout next to NS's railway map to see how they compare.\n\n**How?**\n\n- 2D interpolation is done with the [Kriging](https://en.wikipedia.org/wiki/Kriging) algorithm, implemented in javascript by Omar Olmedo's [kriging.js](http://oeo4b.github.io/).\n- Because this is computationally a bit intensive, a web worker is used, and also we don't compute the displacement of every coordinate in the map data, but rather use a 'grid' cache (the size of each tile of which is determined by the variable s.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":952,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1023,"value":"md`- *Not used: Achter d.H.; Haren Tran; IJsstadion; R'dam Sta; Eygelsh M; Gulpen W; Spekholzer; Eys Wit*\n- *Lost: Eemshaven*\n- *Nog dubbel: Blerick; Sittard*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1055,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1076,"value":"{\n const b = html``;\n b.onclick = function () {\n mutable displacements = stations_flat.map(s => [0,0])\n map.update()\n }\n return b;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":954,"value":"{return;\n const metro_layer = map.select('g.layer.metro')\n metro_layer.attr('transform', 'translate(-20 -70) scale(.23)')\n const metro_stations = metro_layer.selectAll('.metro_station').data(metro_positions)\n \n metro_stations.enter().append('circle')\n .attr('class', 'metro_station')\n .merge(metro_stations)\n .attr('r', 30)\n .attr('fill', '#cc0000')\n .attr('stroke', 'none')\n .attr('cx', p => p[1])\n .attr('cy', p => p[0])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"md`Number of displaced stations: ${displacements.filter(d => d[0] != 0).length}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"s = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":699,"value":"viewof kriging = {\n const root = md`This cell is only defined in order to avoid Observable's \"RuntimeError: kriging is not defined\" error. Observable statically checks the code of the notebook's cells, and gives this error is a variable is referenced which isn't defined. But, we're actually only running the code from inside a web worker, and after having run the following:\n\\`\\`\\`javascript\n importScripts(\"https://rawgit.com/oeo4b/kriging.js/master/kriging.js\")\n\\`\\`\\``;\n root.value = function () { throw 'This is a placeholder.' };\n return root;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1119,"value":"displacements","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1086,"value":"Generators.queue(\n worker(\n compute_displace,\n { displacements, stations_flat, width, height, s },\n _kriging\n )\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":691,"value":"displace = Generators.queue(\n worker(\n compute_displace,\n { displacements, stations_flat, width, height, s },\n _kriging\n )\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":695,"value":"function* compute_displace ({ displacements, stations_flat, width, height, s }) {\n const modelType = \"exponential\";\n const sigma2 = 0;\n const alpha = 100;\n const model = {};\n const displace = [];\n \n// yield 'hi'\n// return;\n \n yield \"computing model...\";\n model.x = kriging.train(displacements.map(d => d[0]), stations_flat.map(s => s[0]), stations_flat.map(s => s[1]), \"exponential\", sigma2, alpha);\n model.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 yield \"computing displacement matrix...\";\n for (var x = 0; x < width/s; x++) {\n displace[x] = [];\n for (var y = 0; y < height/s; y++) {\n displace[x][y] = [\n kriging.predict((x+.5)*s, (y+.5)*s, model.x),\n kriging.predict((x+.5)*s, (y+.5)*s, model.y),\n ];\n }\n }\n \n yield displace;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":603,"value":"width = 900","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"height = 700","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":794,"value":"//tracks_flat.map(outline => outline.filter(c => c[0] < 0 || c[0] > width || c[1] < 0 || c[1] > height)).filter(o => o.length > 0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"md`## Projection`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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([width/2, height/2])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":992,"value":"window.localStorage.setItem(\"displacements\", JSON.stringify(displacements))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":995,"value":"mutable displacements = {\n let r = window.localStorage.getItem(\"displacements\");\n if (r && (r = JSON.parse(r)) && typeof r == \"object\" && r.length) {\n return r;\n } else {\n return stations_flat.map(s => [0,0]);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"md`## Geographic data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"stations_geo = d3.json('https://gist.githubusercontent.com/kelleyvanevert/9028d70622474468ff8ffefb73f3947a/raw/3b70bd55558894ace50fab0747e51387e3a79548/stations.json').then(list => {\n list.push({\n Code: \"Eem\",\n Type: \"stoptreinstation\",\n Namen: { Kort: \"Eemshaven\", Middel: \"Eemshaven\", Lang: \"Eemshaven\" },\n Land: \"NL\",\n UICCode: \"???????\",\n Lat: \"53.41600\",\n Lon: \"6.80000\",\n Synoniemen: [],\n })\n return list\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":518,"value":"import { button } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":672,"value":"import { worker } from \"@fil/worker\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1152,"value":"md`Copied directly from https://rawgit.com/oeo4b/kriging.js/master/kriging.js, because using \\`importScripts\\` was broken somehow:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1134,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1"}} 31:"$30:body"