31:T427,md`First, let's look at the national average! We see at one glance the decrease in mobility during the first lockdown and the more severe decrease caused by the combination of the second lockdown and the holiday season. Lately, the mobility is slightly increasing again. We can also see that the majority of all traffic is inner traffic (around 70%), and very little is long-distance traffic (less that 10%). This is true before and during all stages of the pandemic. The traffic during lockdowns and social distancing does not only shrink but also changes in composition. Long distance travel is reduced even more than short-distance travel, likely because the short-distance travel includes more essential trips like groceries, and essential commutes. *This is a stacked bar chart so the bars do not overlap, they are stack on to of each other. You can toggle to a normalize the data to 100% using the __Normalize__ checkbox, to focus on the composition of each week.* `32:T14b8,lk_map_n_plot = { var sel_LK_map = 'DE300'; var w = width * 0.36; var h = 450; var bottom_barplot = 450; const proj = d3 .geoMercator() .fitSize([w, h], topojson.feature(nuts3, nuts3.objects.nuts3de)); const path = d3.geoPath(proj); const container = d3.create('div').classed('container', true); var tooltip = d3 .select("body") .append("div") .attr("class", "tooltip") .style('z-index', '10') .style('border-radius', '2px') .style('padding-right', '4px') .style('padding-left', '4px') .style('padding-bottom', '1px') .style('background-color', 'white') .style('-moz-border-radius', '10px') .style('-webkit-box-shadow', '2px 2px 5px rgba(0, 0, 0, 0.2)') .style('-moz-box-shadow', '2px 2px 5px rgba(0, 0, 0, 0.2)') .style('box-shadow', '2px 2px 5px rgba(0, 0, 0, 0.2)') .style('backdrop-filter', 'blur(2px)') .style('color', 'black') .style('font-family', 'serif') .style("position", "absolute"); var fade = container .append("div") .classed('fade', true) .style('position', 'absolute') .style('top', '0px') .style('left', `${w}px`) .style('height', '150px') .style('width', `${width - w}px`) .style('z-index', '10') .style( 'background', 'linear-gradient(rgb(255, 255, 255, 1), rgb(255, 255, 255, 0.7) 50%, rgb(255, 255, 255, 0))' ); var legend = container .append('div') .classed('legend', true) .style('position', 'absolute') .style('z-index', '20') .style('left', `${width - 130}px`) .style('top', '32px') .html(tri_legend); const svg = container .append('div') .append("svg") .attr('position', 'absolute') .attr("viewBox", [0, 0, width, h]) .attr('z-index', -1); var ger = svg.append("g").attr('class', 'map'); var indices = iao.filter(`d => d.origin == "${sel_LK_map}"`).indices(); var y = d3 .scaleLinear() .domain([ 0, iao .select('total') .rollup({ max: d => 1e3 * op.ceil(op.max(d.total) / 1e3) }) .objects()[0].max ]) .rangeRound([bottom_barplot - margin.bottom, margin.top + 120]); var yAxis = g => g .attr("transform", `translate(${w + margin.left},0)`) .call(d3.axisLeft(y).ticks(null, "s")); svg .append("g") .selectAll("g") .data(_.times(indices.length)) .join("g") .attr("fill", 'red') .selectAll("rect") .data(d => [ { i: d, distance: 'adjacent', stack: ['adjacent', 'inner', 'other'] }, { i: d, distance: 'inner', stack: ['other', 'inner'] }, { i: d, distance: 'other', stack: ['other'] } ]) .join("rect") .classed('bars', true) .attr("width", x_time.bandwidth()) .attr('fill', d => tri_scale(d.distance)) .attr("x", (d, i) => x_time(iao.get('date', indices[d.i]))); svg.append("g").call(xAxis); svg .append("g") .classed('yaxis', true) .call(yAxis); function update(graph) { indices = iao.filter(`d => d.origin == "${sel_LK_map}"`).indices(); graph .transition() .duration(300) .attr("height", d => y(0) - y(iao.get(d.distance, indices[d.i]))) .attr("y", d => y(_.sum(_.map(d.stack, x => iao.get(x, indices[d.i]))))); y = d3 .scaleLinear() .domain([ 0, iao .filter(`d => d.origin == "${sel_LK_map}"`) .select('total') .rollup({ max: d => 1e3 * op.ceil(op.max(d.total) / 1e3) }) .objects()[0].max ]) .range([bottom_barplot - margin.bottom, margin.top + 120]); svg .select('g.yaxis') .transition() .duration(500) .delay(400) .call(yAxis); graph .transition() .duration(500) .delay(400) .attr("height", d => y(0) - y(iao.get(d.distance, indices[d.i]))) .attr("y", d => y(_.sum(_.map(d.stack, x => iao.get(x, indices[d.i]))))); } svg.selectAll("rect.bars").call(update); var adjacents; ger .selectAll("path.states") .data(topojson.feature(nuts3, nuts3.objects.nuts3de).features) .enter() .append('path') .attr('class', 'states') .attr("d", path) .style('fill', '#d6d6d6') .style('stroke', 'white') .style('width', 1) .on('mouseover', function(event) { d3.select(event.currentTarget).style("fill", 'black'); var id0 = d3.select(event.currentTarget).datum().properties.id; adjacents = lattice_links[id0]; ger .selectAll('path.states') .filter(s => _.includes(adjacents, s.properties.id)) .style('fill', 'url(#pattern_2)'); sel_LK_map = id0; svg.selectAll("rect.bars").call(update); tooltip .style('visibility', 'visible') .text(nuts3names.filter(`d => d.id == "${id0}"`).objects()[0].name); }) .on('mouseleave', function(event) { d3.select(event.currentTarget).style("fill", '#d3d6d6'); ger .selectAll('path.states') .filter(s => _.includes(adjacents, s.properties.id)) .style('fill', '#d6d6d6'); tooltip.style('visibility', 'hidden'); }); ger.on('mousemove', function(event) { tooltip .style('top', event.pageY - 0 + 'px') .style('left', event.pageX + 10 + 'px'); }); return html`${container.node()}${patterns}`; }33:T637,choropleth_longdistance = { const iao_filter = iao .filter(`d => d.date == "${sel_date}"`) .join(nuts3names.derive({ origin: d => d.id })) .derive({ other_rel: x => x.other / (x.other + x.adjacent + x.inner) }) .derive({ tooltip: x => op.format_metric(x.other) + ' ' + x.name }) .derive({ tooltip_rel: x => op.format_percent(x.other_rel) + ' ' + x.name }); const map = vl .markGeoshape({ stroke: 'white', strokeWidth: 0.5 }) .data(vl.topojson(nuts3).feature("nuts3de")) .transform( vl.lookup('properties.id').from( vl .data(iao_filter) .key('origin') .fields(['other', 'other_rel', 'tooltip', 'tooltip_rel']) ) ) .width(300) .height(400) .project(vl.projection("mercator")); const maps = vl .concat( map.encode( vl .color() .fieldQ("other") .scale({ domain: [0, 5e5], range: grad_white2tri2 }) .legend({ format: '~s', title: "long-distance travel" }), vl.tooltip().fieldN('tooltip') ), map.encode( vl .color() .fieldQ("other_rel") .scale({ domain: [0, 0.3], range: grad_tri02tri2 }) .legend({ format: '%', title: "frac. long-d. to all travel" }), vl.tooltip().fieldN('tooltip_rel') ) ) .config({ view: { stroke: null } }) .resolve({ scale: { color: 'independent' } }) .render({ renderer: 'canvas' }); return maps; }34:[{"id":"939eb24060e4377639a7160a46f58f20cb822867c499fa245919ec0025902dc7685ffc01ce09485f82fa7cd1c58d6a1fc4616b236f9cbc3e8cf654a93d00ce6f","href":"https://static.observableusercontent.com/files/939eb24060e4377639a7160a46f58f20cb822867c499fa245919ec0025902dc7685ffc01ce09485f82fa7cd1c58d6a1fc4616b236f9cbc3e8cf654a93d00ce6f","name":"iao_aggregate_gap_20210127@3.csv","type":"text/csv","lastModified":1611911568449.204,"size":951076},{"id":"3ba2f4edae6d3de94398a4d18534df2e6536794a94752c8860f918ea5e75d09caea907a7f0b7ca899f1ede7a295811978587c7e6705864cbd8c91b9ac38c2434","href":"https://static.observableusercontent.com/files/3ba2f4edae6d3de94398a4d18534df2e6536794a94752c8860f918ea5e75d09caea907a7f0b7ca899f1ede7a295811978587c7e6705864cbd8c91b9ac38c2434","name":"nuts3de@1.json","type":"application/json","lastModified":1611911568449.204,"size":304479},{"id":"88420d2a5cb3e0bda617b482533f09046e7c246383e3a4392ebce7be659d20948925c21086ddd1df6a8820ae0983981bad512b640ddd8404be89b08cc8cdf1ed","href":"https://static.observableusercontent.com/files/88420d2a5cb3e0bda617b482533f09046e7c246383e3a4392ebce7be659d20948925c21086ddd1df6a8820ae0983981bad512b640ddd8404be89b08cc8cdf1ed","name":"valid_links_nuts3latice.csv","type":"text/csv","lastModified":1612107998305.269,"size":12572},{"id":"939eb24060e4377639a7160a46f58f20cb822867c499fa245919ec0025902dc7685ffc01ce09485f82fa7cd1c58d6a1fc4616b236f9cbc3e8cf654a93d00ce6f","href":"https://static.observableusercontent.com/files/939eb24060e4377639a7160a46f58f20cb822867c499fa245919ec0025902dc7685ffc01ce09485f82fa7cd1c58d6a1fc4616b236f9cbc3e8cf654a93d00ce6f","name":"iao_ml_20210203.csv","type":"text/csv","lastModified":1612347291247.533,"size":951076},{"id":"a4c14f66ae0e368fedbda2b4adeb22cc10b266e138bf5b02c8395b9be73e49f8c810c77ebcba44127d9fa05e2de24a5dcb4b3912afb37b9840b0bc37656f5f1a","href":"https://static.observableusercontent.com/files/a4c14f66ae0e368fedbda2b4adeb22cc10b266e138bf5b02c8395b9be73e49f8c810c77ebcba44127d9fa05e2de24a5dcb4b3912afb37b9840b0bc37656f5f1a","name":"iao_ml_20210301@3.csv","type":"text/csv","lastModified":1614674269542.817,"size":1049358}] 2f:{"title":"Traffic in the Pandemic by Distance","cells":[{"id":0,"value":"md`# Traffic in the Pandemic by Distance`","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"md`This notebook explores the German traffic network during the pandemic. Here, we chose to devide all traffic into 3 categories based on distance: \n1. Inner trips: Traffic within one Landkreis (LK)\n2. Adjacent trips: Traffic between adjacent LK\n3. Long-distance trips: Traffic between non-adjacent LKs\n\nWe conciously chose to display these results based LKs (a German administrative subdivision) instead of geographical distance. While LKs are historcal entities that can differ greatly in both geographical size and population count, they are also easily comprehensible and translate better to concrete policy decisions. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2829,"value":"md` __Data Source:__ The data used in this post analysis is based on Telekom cell tower connections. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"md`## Nation-Wide Curve`","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"viewof cb_norm_nationwide = checkbox({\n description: \"Normalize each week to 100%\",\n options: [{ value: 'normalize', label: \"Normalize\" }]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1254,"value":"bar_plot_nationwide = bar_plot(\n iao.groupby('date').rollup({\n inner: d => op.sum(d.inner),\n adjacent: d => op.sum(d.adjacent),\n other: d => op.sum(d.other)\n }),\n cb_norm_nationwide\n)\n .width(500)\n .height(350)\n .render()","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"md`## How do Landkreise differ?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2979,"value":"md`\nThe visualisation below allows you to explore the mobility profile of each LK. We see that the Differences in composition can be huge! In densely populated area of Germany with small LKs much more traffic will cross at least one border.\n\nOn the other side, most of Germany reacted with simillar changes to lockdowns and social distancing. Biggest exeption: The heightened activity in holiday destinatinations on the coast and in alpine regions in summer. \n\n*Hover over the map to highlight each LK and it's neighbors and see it's mobility profile on the right.*`\n\n//Keep in might that, unintuitively, traffic caused by tourism will be mostly local: Tourists will generally just take two trips long-distance trips to and from their destination and than cause a lot of of local traffic.","pinned":false,"hidden":false,"mode":"ojs"},{"id":1577,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1574,"value":"md`Alternatively you can explore the mobility in different Landkreise in this plot that mirrors the nationwide curve plot and allows you to switch to a normalized view. \n\n*Select an LK using the __Landkreis__ selector and toggle to a normalize the data to 100% using the __Normalize__ checkbox, to focus on the composition of each week.*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"viewof cb_norm_state = checkbox({\n description: \"Normalize each week to 100%\",\n options: [{ value: 'normalize', label: \"Normalize\" }]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"viewof sel_LK = {\n const LKs = _.sortBy(\n nuts3names\n .derive({ value: d => d.id, label: d => d.name })\n .select('value', 'label')\n .objects(),\n 'label'\n );\n\n const sel = select({\n title: \"Landkreis:\",\n options: LKs,\n value: \"DE300\"\n });\n return sel;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"bar_plot_lk = bar_plot(\n iao.filter(`d => d.origin == \"${sel_LK}\"`),\n cb_norm_state\n)\n .width(500)\n .render()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2704,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1151,"value":"md`\nBecause differences in long-distance travel are particualry pronounced, we will focus on long distances in this map. Of course Lks with high populations have much more absolute counts of far-distance movements (right). If we look at the relative amound of long-distance travel, geografically small and densly populated cities are have the highes percentage of traffic crossing two LK borders.\n\n*You can change the date using the dropdown menu.*\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":466,"value":"viewof sel_date = {\n var dates = iao\n .derive({ value: d => d.date })\n .derive({ label: d => op.format_utcdate(d.date) })\n .select('label', 'value')\n .dedupe()\n .objects();\n\n return select({ title: \"Date\", options: dates, value: _.last(dates).value });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":897,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1219,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2670,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1364,"value":"md`### How much traffic goes through the average KL border per day?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1374,"value":"md`Because the LKs are very different, the traffic leaving them is too. Many LK borders see only < 5k trips per day, but some see a 6-digit number of trips. Notice that during the first lockdown the far end of the spectrum was much reduced but right no it is not. \n\n*You can select a specific time using the __Date__ selector, I recommend looking at \\`2020-04-05\\` to see the effect of the first lockdown.*\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1385,"value":"viewof sel_date_hist = {\n var dates = iao\n .derive({ value: d => d.date })\n .derive({ label: d => op.format_utcdate(d.date) })\n .select('label', 'value')\n .dedupe()\n .objects();\n\n return select({ title: \"Date\", options: dates, value: _.last(dates).value });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1366,"value":"histogramm_borders = html`${await vl\n .markBar({ fill: 'url(#pattern_1)' })\n .data(\n iao\n .filter(`d => d.date == \"${sel_date_hist}\"`)\n .derive({\n cross_border: x => (x.other + x.adjacent) / 6.2\n })\n .derive({ all: x => 'all' })\n )\n .encode(\n vl\n .x()\n .fieldQ(\"cross_border\")\n .bin({ step: 2.5e3 })\n .axis({\n titleFont: \"Helvetica Neue\",\n format: '.2s',\n title: 'Cross-Border Traffic (adjacent + other)'\n }),\n vl\n .y()\n .count()\n .axis({ titleFont: \"Helvetica Neue\", title: '# LKs' })\n )\n .width(500)\n .height(300)\n .render({ renderer: 'svg' })}${patterns}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1224,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"md`## Format`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1655,"value":"margin = ({ top: 10, right: 10, bottom: 20, left: 40 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1652,"value":"x_time = d3\n .scaleBand()\n .domain(\n _.map(\n _.values(\n iao\n .filter(d => d.origin == 'DE300')\n .select('date')\n .objects()\n ),\n 'date'\n )\n )\n .range([width * 0.36 + margin.left, width - margin.right])\n .padding(0.3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1721,"value":"xAxis = g => {\n const all_dates = _.map(\n _.values(\n iao\n .filter(d => d.origin == 'DE300')\n .select('date')\n .objects()\n ),\n 'date'\n );\n const max_date = _.max(all_dates);\n const min_date = _.min(all_dates);\n\n const axis = d3\n .scaleTime()\n .domain([min_date, max_date])\n .range([width * 0.36 + margin.left, width - margin.right]);\n\n return g\n .attr(\"transform\", `translate(0,${450 - margin.bottom})`)\n .call(d3.axisBottom(axis).ticks(7))\n .append('text')\n .attr('transform', `translate(0,${450 - margin.bottom}) rotate(-90)`)\n .attr('text-anchor', 'end')\n .attr('fill', 'black')\n .attr('font-size', '12px')\n .text('# trips');\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1266,"value":"bar_plot = function (data, cb_norm) {\n const format = cb_norm === \"normalize\" ? \"~%\" : \".2s\";\n return vl\n .markBar({ width: 6 })\n .data(\n data\n .derive({ sum: (d) => d.inner + d.adjacent + d.other })\n .derive({ long_distance: (d) => d.other })\n .fold([\"inner\", \"adjacent\", \"long_distance\"], {\n as: [\"distance\", \"trips\"]\n })\n .derive({ rel: (d) => op.round((100 * d.trips) / d.sum) / 100 })\n .select(\"date\", \"distance\", \"trips\", \"rel\")\n )\n .encode(\n vl\n .x()\n .fieldT(\"date\")\n .axis({ title: \"Date\", titleFont: \"Helvetica Neue\" }),\n vl\n .y()\n .fieldQ(\"trips\")\n .stack(cb_norm === \"normalize\" ? \"normalize\" : true)\n .axis({ title: \"Trips\", titleFont: \"Helvetica Neue\", format: format }),\n vl.color().fieldN(\"distance\").sort(tri.order).scale({ range: tri.color }),\n vl\n .tooltip()\n .field(cb_norm === \"normalize\" ? \"rel\" : \"trips\")\n .format(format)\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":174,"value":"tri = Object({\n order: ['inner', 'adjacent', 'other'],\n color: ['#95c6ed', '#869e80', '#833471']\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":676,"value":"grad_tri02tri2 = [0, .1, .2, .3, .4, .5, .6, .7, .8, .9, 1]\n .map(culori.interpolate([tri.color[0], tri.color[2]], 'lch'))\n .map(culori.formatHex)","pinned":true,"hidden":false,"mode":"ojs"},{"id":736,"value":"grad_white2tri2 = [.1, .2, .3, .4, .5, .6, .7, .8, .9, 1]\n .map(culori.interpolate(['#F6F6F6', tri.color[2]], 'lch'))\n .map(culori.formatHex)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1729,"value":"tri_scale = d3\n .scaleOrdinal()\n .domain(tri.order)\n .range(tri.color)\n .unknown(\"#fff\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2519,"value":"tri_legend = `

inneradjacentlong-distance

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1368,"value":"patterns = ``","pinned":false,"hidden":false,"mode":"ojs"},{"id":828,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1318,"value":"iao.view(10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"iao = aq\n .fromCSV(await FileAttachment(\"iao_ml_20210301@3.csv\").text())\n .derive({ other: d => d.total - d.adjacent })\n .derive({ adjacent: d => d.adjacent - d.inner })","pinned":true,"hidden":false,"mode":"ojs"},{"id":92,"value":"nuts3 = await FileAttachment('nuts3de@1.json').json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1420,"value":"nuts3names = {\n var 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 .filter(d => d.name !== d.name_short)\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 return df\n .select('id', 'name')\n .antijoin(short_names, 'id')\n .concat(short_names)\n .orderby('name');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1585,"value":"lattice_links = {\n const df = aq\n .fromCSV(await FileAttachment('valid_links_nuts3latice.csv').text())\n .concat(\n aq\n .fromCSV(await FileAttachment('valid_links_nuts3latice.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":833,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1579,"value":"d3 = require(\"d3@7.4.4\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1581,"value":"topojson = require(\"topojson@3.0.2\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"import { aq, op } from '@adrianzachariae/arquero'","pinned":true,"hidden":false,"mode":"ojs"},{"id":384,"value":"_ = require(\"lodash@4.17.21\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":664,"value":"culori = require(\"culori@2.0.3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":276,"value":"import { checkbox, select, radio } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}