31:T688,viewof values_new = { var toggle_bar = Toggle({ label: html`inner traffic bars`, value: true }); var toggle_map = Toggle({ label: "whole lattice", value: true }); var button = Button('reset', { reduce: () => { map.zoomReset(); toggle_bar.value = true; toggle_map.value = true; } }); var inputs = [button, toggle_bar, toggle_map]; const form = html`

${ inputs[0] }

${inputs .slice(1) .map( input => html`

${input}

` )}

traffic within LK

traffic with non-adjacent LKs

`; form.oninput = () => { if (form.value && inputs[1].value != form.value[1]) map.toggle_ino(); if (form.value && inputs[2].value != form.value[2]) map.toggle_net(); form.value = inputs.map(input => input.value); }; form.oninput(); return form; }32:T60e,map = { const container = d3.create("div").style("z-index", -1); const svg = container .append("div") .style("position", "relative") .append("svg") // .attr("viewBox", [0, 0, width, map_attr.h]); let map = svg.append("g"); let chart_box = container .append("div") .classed("box_visible", false) .call(build_chart_box); let chart = chart_box .append("svg") .style("height", `${chart_attr.h}px`) .style("width", `${chart_attr.w}px`) .attr("viewBox", [width - chart_attr.w, 20, chart_attr.w, chart_attr.h]); chart.append("g"); const zoom = zoom_fac(map); svg.call(zoom); svg.call(tool_tip_move); var state = { ino: true, id_temp: null, net: true }; map .selectAll("path.states") .data(topojson.feature(nuts3, nuts3.objects.nuts3de).features) .join("path") .call(build_states) .on("click", (e, d) => { if (!chart_box.classed("box_visible")) chart.call(init_chart); chart_box.style("visibility", "visible").classed("box_visible", true); state.id_temp = d.properties.id; chart.call(build_chart_fac(state.id_temp, state.ino)); clicked_fac(svg, map, zoom)(e, d); }) .call(tooltip_change); map .selectAll("line.link-all") .call(draw_links_all(d3.zoomTransform(svg.node()).k, "visible")); svg.call(append_defs); return Object.assign(container.node(), { zoomReset: reset_fac(svg, map, chart_box, chart, zoom), toggle_ino: toggle_ino_fac(state, chart), toggle_net: toggle_net_fac(state, map) }); }33:T458,build_chart_fac = (id, inner_n_other) => function(chart) { var links; var c; var line; if (inner_n_other) { links = nuts2links[id]; c = ['whitesmoke', 'black'].concat(colors[links.length - 2]); line = ['silver', 'black'].concat(colors[links.length - 2]); } else { links = nuts2links_adj[id]; c = colors[links.length]; line = colors[links.length]; } let y = y_wodomain.domain([0, max_trips(links)]); const yAxis = g => g .attr( "transform", `translate(${width - chart_attr.w + chart_attr.margins.left},0)` ) .call(d3.axisLeft(y).ticks(null, "s")); chart.select('g.yaxis').call(yAxis); chart .selectAll('g.bars') .selectAll("rect") .data((d, i) => bar_limits(i, d, links, inner_n_other)) .join("rect") .classed('bar', true) .attr("width", x_band.bandwidth()) .attr('fill', (d, i) => c[i]) .attr('stroke', (d, i) => line[i]) .attr("x", d => x_band(d.x)) .attr("y", d => y(d.y)) .attr("height", d => y(0) - y(d.h)); }34:T597,clicked_fac = (svg, g, zoom) => function clicked(event, d) { event.stopPropagation(); let id0 = d.properties.id; g.selectAll("path.states").style('fill', 'whitesmoke'); d3.select(event.currentTarget).style("fill", "black"); let combinedGeom = { type: "Feature", geometry: { type: 'MultiPolygon', coordinates: d.geometry.type === 'Polygon' ? [d.geometry.coordinates] : d.geometry.coordinates } }; g.selectAll("path.states") .filter(s => _.includes(lattice_adj[id0], s.properties.id)) .style('fill', 'url(#pattern_1)') .each(s => { if (s.geometry.type == 'Polygon') { combinedGeom.geometry.coordinates.push(s.geometry.coordinates); } else { combinedGeom.geometry.coordinates = combinedGeom.geometry.coordinates.concat( s.geometry.coordinates ); } }); const [[x0, y0], [x1, y1]] = path.bounds(combinedGeom); svg .transition() .duration(750) .call( zoom.transform, d3.zoomIdentity .translate(map_attr.w / 2, map_attr.h / 2) .scale( 0.95 / Math.max((x1 - x0) / map_attr.w, (y1 - y0) / map_attr.h) ) .translate(-(x0 + x1) / 2, -(y0 + y1) / 2), d3.pointer(event, svg.node()) ); draw_links(g, id0, d3.zoomTransform(svg.node()).k); }35:[{"id":"88420d2a5cb3e0bda617b482533f09046e7c246383e3a4392ebce7be659d20948925c21086ddd1df6a8820ae0983981bad512b640ddd8404be89b08cc8cdf1ed","href":"https://static.observableusercontent.com/files/88420d2a5cb3e0bda617b482533f09046e7c246383e3a4392ebce7be659d20948925c21086ddd1df6a8820ae0983981bad512b640ddd8404be89b08cc8cdf1ed","name":"valid_links_nuts3latice@1.csv","type":"text/csv","lastModified":1612058162765.603,"size":12572},{"id":"428ec9a53bdf1aa14e483600ca8c07181a4a58e01d190de5733d0e1afa14657f71ea76fdb6494cd2cef7f790120010315a8ad38404d23d084adb69be03e9b6a8","href":"https://static.observableusercontent.com/files/428ec9a53bdf1aa14e483600ca8c07181a4a58e01d190de5733d0e1afa14657f71ea76fdb6494cd2cef7f790120010315a8ad38404d23d084adb69be03e9b6a8","name":"link_centroids@5.csv","type":"text/csv","lastModified":1613390929095.787,"size":38472},{"id":"a71f65fb25c235b689500c16a79eae9ed39590903c74c7effbfc8aa07bfecd33429f102f268a0d9277119edc58dcaaa42b98caf19c9e694e619129237c09062b","href":"https://static.observableusercontent.com/files/a71f65fb25c235b689500c16a79eae9ed39590903c74c7effbfc8aa07bfecd33429f102f268a0d9277119edc58dcaaa42b98caf19c9e694e619129237c09062b","name":"nuts32link@3.json","type":"application/json","lastModified":1613600265007.204,"size":20559},{"id":"5d5979909a40170d530499469323f32196358a186ec4a2b27ab944947a5b1b5f752aef4ad195a8176cd0b56736a0b621a348cfe2c9510bf225f665b8789aa4c1","href":"https://static.observableusercontent.com/files/5d5979909a40170d530499469323f32196358a186ec4a2b27ab944947a5b1b5f752aef4ad195a8176cd0b56736a0b621a348cfe2c9510bf225f665b8789aa4c1","name":"nuts3de_supersimple.json","type":"application/json","lastModified":1613914680616.825,"size":140135},{"id":"e8da8e4c048e08264cc8baa01609f4c2d413ee0a3a520a02b4bc3ce2dba2ee8db8ccb98f649cc6512c79622ccd093f287ebc3e0ec8f67abfc3c358ff71eb501d","href":"https://static.observableusercontent.com/files/e8da8e4c048e08264cc8baa01609f4c2d413ee0a3a520a02b4bc3ce2dba2ee8db8ccb98f649cc6512c79622ccd093f287ebc3e0ec8f67abfc3c358ff71eb501d","name":"weekly_links_20200222@1.csv","type":"text/csv","lastModified":1613992114276.779,"size":2921171},{"id":"0501be646ccd9929ad1b58f2abfe8fdce974013df9c83e4945e6cc48ce4f06dd20b635d66239998fd444e934d2f2b24fc8e9f7086ecd9c5fdeea02654a9e90a5","href":"https://static.observableusercontent.com/files/0501be646ccd9929ad1b58f2abfe8fdce974013df9c83e4945e6cc48ce4f06dd20b635d66239998fd444e934d2f2b24fc8e9f7086ecd9c5fdeea02654a9e90a5","name":"weekly_links_20200301.csv","type":"text/csv","lastModified":1614674374767.999,"size":2971273}] 2f:{"title":"Traffic Lattice Germany","cells":[{"id":0,"value":"md`# Traffic Lattice Germany`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3043,"value":"md`\nThis map allows you to explore the traffic between adjacent Landkreise (LK, a German administrative subdivision) in detail. Link width is proportional to the nuber of trips. Click on a LK to zoom in and see a the traffic timeline.\n\nTo hide the traffic within the LK (black) and the traffic with non-adjacent LKs (gray) from the barplot, uncheck the **inner traffic bars** checkbox. To hide all links in the network other that from the selected LK, uncheck the **whole lattice** checkbox. \n\n __Data Source:__ The data used in this post analysis is based on Telekom cell tower connections. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":2997,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":743,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2612,"value":"md`\n----\n# Appendix\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1588,"value":"map_attr = Object({ w: width * 0.4, h: 600 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1933,"value":"md`### Tooltip`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1938,"value":"tooltip = d3\n .select(\"body\")\n .append(\"div\")\n .attr(\"class\", \"tooltip\")\n .style('z-index', '10')\n .style('border-radius', '2px')\n .style('padding-right', '4px')\n .style('padding-left', '4px')\n .style('padding-bottom', '1px')\n .style('background-color', 'white')\n .style('-moz-border-radius', '10px')\n .style('-webkit-box-shadow', '2px 2px 5px rgba(0, 0, 0, 0.2)')\n .style('-moz-box-shadow', '2px 2px 5px rgba(0, 0, 0, 0.2)')\n .style('box-shadow', '2px 2px 5px rgba(0, 0, 0, 0.2)')\n .style('color', 'black')\n .style('font-family', 'serif')\n .style(\"position\", \"absolute\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1941,"value":"tooltip_change = function(g) {\n g.on('mouseover', function(event, d) {\n var id0 = d.properties.id;\n tooltip.style('visibility', 'visible').text(nuts3names[id0]);\n }).on('mouseleave', function(event) {\n tooltip.style('visibility', 'hidden');\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1947,"value":"tool_tip_move = function(g) {\n g.on('mousemove', function(event) {\n tooltip\n .style('top', event.pageY - 0 + 'px')\n .style('left', event.pageX + 10 + 'px');\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1929,"value":"md`### Bar Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1962,"value":"chart_attr = Object({\n w: width * 0.42,\n h: 300,\n margins: { top: 40, left: 36, right: 8, bottom: 12 }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2580,"value":"build_chart_box = function(g) {\n g.style('position', 'absolute')\n .style('top', `${20}px`)\n .style('left', `${width - chart_attr.w - 20}px`)\n .style('z-index', 10)\n .style('height', `${chart_attr.h}px`)\n .style('width', `${chart_attr.w}px`)\n .style('border-radius', '2px')\n .style('padding-right', '4px')\n .style('padding-left', '4px')\n .style('padding-bottom', '1px')\n .style('background-color', 'white')\n .style('-moz-border-radius', '10px')\n .style('-webkit-box-shadow', '2px 2px 5px rgba(0, 0, 0, 0.2)')\n .style('-moz-box-shadow', '2px 2px 5px rgba(0, 0, 0, 0.2)')\n .style('box-shadow', '2px 2px 5px rgba(0, 0, 0, 0.2)')\n .style('visibility', 'hidden');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1971,"value":"x_band = d3\n .scaleBand()\n .domain(_.range(dates.length))\n .range([\n width - chart_attr.w + chart_attr.margins.left,\n width - chart_attr.margins.right\n ])\n .padding(0.4)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1981,"value":"x_time = d3\n .scaleTime()\n .domain([new Date(dates[0]), new Date(dates[num_dates - 1])])\n .range([\n width - chart_attr.w + chart_attr.margins.left,\n width - chart_attr.margins.right\n ])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1973,"value":"xAxis = g => {\n g.attr(\n \"transform\",\n `translate(0,${chart_attr.h - chart_attr.margins.bottom})`\n ).call(d3.axisBottom(x_time).ticks(7));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1987,"value":"y_wodomain = d3\n .scaleLinear()\n .range([chart_attr.h - chart_attr.margins.bottom, chart_attr.margins.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2002,"value":"max_trips = links => {\n let max = 0;\n for (let i = 0; i < num_dates; i++) {\n let v = 0;\n for (let j = 0; j < links.length; j++) {\n v += link_value(i * num_links + links[j]);\n }\n max = max > v ? max : v;\n }\n return max;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2044,"value":"bar_limits = function(idx, int_date, links, inner_n_other = true) {\n if (inner_n_other) {\n links = [links[links.length - 1]]\n .concat(links[0])\n .concat(links.slice(1, -1));\n }\n const values = links.map(l => link_value(num_links * int_date + l));\n var upper = values.slice();\n for (let i = 0; i < links.length; i++) {\n for (let j = i + 1; j < links.length; j++) {\n upper[j] += values[i];\n }\n }\n return _.zip(upper, values).map(d => Object({ x: idx, y: d[0], h: d[1] }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2280,"value":"init_chart = function(chart) {\n chart\n .selectAll('g.bars')\n .data(_.times(num_dates))\n .join(\"g\")\n .classed('bars', true)\n chart\n .append(\"g\")\n .classed('xaxis', true)\n .call(xAxis);\n chart.append(\"g\").classed('yaxis', true);\n ;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2161,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2989,"value":"toggle_ino_fac = (state, chart) =>\n function() {\n state.ino = !state.ino;\n chart.call(build_chart_fac(state.id_temp, state.ino));\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1903,"value":"md`### Draw Links`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1484,"value":"link_value = lattice_values.getter('trips')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1791,"value":"link_width = (d, k) =>\n _.max([(0.0004 * link_value(num_links * a1_lattice + d)) / (k + 5), 1 / k])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1570,"value":"draw_links = function(g, x, k) {\n const links = nuts2links_adj[x];\n const grad = colors[links.length];\n g.selectAll(\"line.link\")\n .data(links)\n .join(\"line\")\n .attr('class', 'link')\n .attr(\"x1\", d => link_centroids.get('centroid0', d)[0])\n .attr(\"y1\", d => link_centroids.get('centroid0', d)[1])\n .attr(\"x2\", d => link_centroids.get('centroid1', d)[0])\n .attr(\"y2\", d => link_centroids.get('centroid1', d)[1])\n .attr(\"stroke-width\", d => link_width(d, k))\n .attr('stroke-linecap', 'round')\n .attr(\"stroke\", (d, i) => grad[i]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3084,"value":"draw_links_all = (k, visibility) =>\n function(g) {\n g.data(\n link_centroids\n .filter(d => d.id0 != d.id1 && d.centroid1)\n .select('link')\n .objects()\n .map(d => d.link)\n )\n .join(\"line\")\n .attr('class', 'link-all')\n .attr(\"x1\", d => link_centroids.get('centroid0', d)[0])\n .attr(\"y1\", d => link_centroids.get('centroid0', d)[1])\n .attr(\"x2\", d => link_centroids.get('centroid1', d)[0])\n .attr(\"y2\", d => link_centroids.get('centroid1', d)[1])\n .attr(\"stroke-width\", d => link_width(d, k))\n .attr('stroke-linecap', 'round')\n .attr(\"stroke\", 'dimgrey')\n .style('visibility', visibility);\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":3165,"value":"toggle_links_all = g =>\n function() {\n let new_state = g.attr('visibility') == 'hidden' ? 'visible' : 'hidden';\n g.attr('visibility', new_state);\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":3177,"value":"toggle_net_fac = (state, map) =>\n function() {\n state.net = !state.net;\n let vis = state.net ? 'visible' : 'hidden';\n map.selectAll(\"line.link-all\").style('visibility', vis);\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1894,"value":"md`### Zoom`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1590,"value":"zoom_fac = function(g) {\n const zoomed = ({ transform }) => {\n g.attr(\"transform\", transform)\n .selectAll(\"path.states\")\n .style(\"stroke-width\", 2 / (transform.k + 1));\n g.selectAll(\"line\").attr(\"stroke-width\", d => link_width(d, transform.k));\n };\n const zoom = d3\n .zoom()\n .scaleExtent([1, 20])\n .on(\"zoom\", zoomed);\n return zoom;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1677,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1631,"value":"reset_fac = (svg, g, chart_box, chart, zoom) =>\n function reset() {\n chart_box.style('visibility', 'hidden').classed('box_visible', false);\n chart.selectAll('g').remove();\n g.selectAll(\"line.link\")\n .data([])\n .join();\n g.selectAll(\"path.states\").style('fill', 'whitesmoke');\n svg\n .transition()\n .duration(750)\n .call(\n zoom.transform,\n d3.zoomIdentity,\n d3.zoomTransform(svg.node()).invert([map_attr.w / 2, map_attr.h / 2])\n );\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1900,"value":"md`### Map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":764,"value":"proj = d3\n .geoMercator()\n .fitSize([width, map_attr.h], topojson.feature(nuts3, nuts3.objects.nuts3de))","pinned":false,"hidden":false,"mode":"ojs"},{"id":766,"value":"path = d3.geoPath(proj)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1615,"value":"build_states = function(g) {\n g.attr('class', 'states')\n .attr(\"d\", path)\n .style('fill', 'whitesmoke')\n .style('stroke', 'dimgrey')\n .style('width', 2);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2047,"value":"md`### Colors`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2050,"value":"max_number_adj = _.chain(nuts2links_adj)\n .values()\n .map(d => d.length)\n .max()\n .value()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2076,"value":"colors = {\n const interp = d3.piecewise(d3.interpolateLab, [\n \"#98abc5\",\n \"#6b486b\",\n \"#ff8c00\"\n ]);\n var colors = Array();\n colors[1] = [\"#6b486b\"];\n colors[2] = [\"#8a89a6\", \"#d0743c\"];\n for (let i = 2; i <= max_number_adj; i++)\n colors[i] = _.range(i)\n .map(x => x / (i - 1))\n .map(interp);\n return colors;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3287,"value":"append_defs = function(g) {\n g.append('defs')\n .append('pattern')\n .attr('id', 'pattern_1')\n .attr('patternUnits', \"userSpaceOnUse\")\n .attr('width', 1.5)\n .attr('height', 1.5)\n .append('rect')\n .attr('fill', 'whitesmoke')\n .attr('width', '100%')\n .attr('height', '100%');\n g.select('#pattern_1')\n .append('circle')\n .attr('cx', '1')\n .attr('cy', '1')\n .attr('r', '0.2');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1922,"value":"md`### Misc.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1490,"value":"num_dates = dates.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":1839,"value":"a1_lattice = dates.length - 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":1492,"value":"num_links = link_centroids._total","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"md`# Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"nuts3 = await FileAttachment('nuts3de_supersimple.json').json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"nuts3names = {\n let df = Object({ id: [], name: [], name_short: [] });\n\n _.forEach(nuts3.objects.nuts3de.geometries, lk => {\n df.id.push(lk.properties.id);\n df.name.push(lk.properties.name);\n df.name_short.push(\n _.replace(\n lk.properties.name,\n /, Kreisfreie Stadt|, Landkreis|, Stadtkreis/,\n ''\n )\n );\n });\n\n df = aq.table(df);\n\n const short_names = df\n .join(\n df\n .groupby('name_short')\n .count()\n .filter(d => d.count == 1)\n )\n .derive({ name: d => d.name_short })\n .select('id', 'name');\n\n df = df\n .select('id', 'name')\n .antijoin(short_names, 'id')\n .concat(short_names)\n .orderby('name')\n .objects();\n df = _.keyBy(df, 'id');\n df = _.mapValues(df, 'name');\n\n return df;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"lattice_adj = {\n const df = aq\n .fromCSV(await FileAttachment('valid_links_nuts3latice@1.csv').text())\n .concat(\n aq\n .fromCSV(await FileAttachment('valid_links_nuts3latice@1.csv').text())\n .derive({ id0: d => d.id1, id1: d => d.id0 })\n )\n .groupby('id0')\n .rollup({ adj: d => op.values(d.id1) })\n .derive({ id: d => d.id0 })\n .select('id', 'adj')\n .objects();\n return _.mapValues(_.keyBy(df, 'id'), 'adj');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1162,"value":"nuts2links = FileAttachment('nuts32link@3.json').json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1417,"value":"nuts2links_adj = _.mapValues(nuts2links, n =>\n n\n .filter(l => link_centroids.get('centroid1', l) != null)\n .filter(l => link_centroids.get('id0', l) != link_centroids.get('id1', l))\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":641,"value":"lattice_values = {\n const pt1 = await FileAttachment('weekly_links_20200301.csv').text();\n return aq\n .fromCSV(pt1)\n .select('date', 'link', 'trips')\n .impute({ trips: () => 0 }, { expand: ['date', 'link'] })\n .orderby(['date', 'link'])\n .reify();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1227,"value":"dates = {\n const formatDate = d3.timeFormat(\"%Y-%m-%d\");\n return lattice_values\n .select('date')\n .dedupe()\n .orderby('date')\n .objects()\n .map(d => formatDate(d.date));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1167,"value":"link_centroids = {\n let centroids = { id: [], centroid: [] };\n _.forEach(topojson.feature(nuts3, nuts3.objects.nuts3de).features, d => {\n centroids.id.push(d.properties.id);\n centroids.centroid.push(path.centroid(d.geometry));\n });\n centroids = aq.table(centroids);\n const links = aq\n .fromCSV(await FileAttachment('link_centroids@5.csv').text())\n .join_left(centroids.derive({ centroid0: d => d.centroid }), ['id0', 'id'])\n .join_left(centroids.derive({ centroid1: d => d.centroid }), ['id1', 'id'])\n .select('link', 'id0', 'id1', 'centroid0', 'centroid1')\n .orderby(['link'])\n .impute({ centroid1: () => null })\n .reify();\n return links;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"md`# Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@7.4.4\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":338,"value":"topojson = require(\"topojson@3.0.2\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"import { aq, op } from '@adrianzachariae/arquero'","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"_ = require('lodash@4.17.21')","pinned":true,"hidden":false,"mode":"ojs"},{"id":1837,"value":"import { Button, Toggle } from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}