31:T1598,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) * 0.9}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))' ); const legend_offset = width > 900 ? 0 : 130; var legend = container .append('div') .classed('legend', true) .style('position', 'absolute') .style('z-index', '20') .style('left', `${width * 0.9 - legend_offset}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(g => g.selectAll(".domain").remove()); 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])) + 1) .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 ]) .rangeRound([bottom_barplot - margin.bottom, margin.top + 120]); yAxis = g => g .attr("transform", `translate(${w + margin.left},0)`) .call(d3.axisLeft(y).ticks(null, "s")); 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])) + 1) .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}`; }32:T62c,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: "Fernreise Bewegungen" }), vl.tooltip().fieldN('tooltip') ), map.encode( vl .color() .fieldQ("other_rel") .scale({ domain: [0, 0.3], range: grad_tri02tri2 }) .legend({ format: '%', title: "Anteil Fernreise" }), vl.tooltip().fieldN('tooltip_rel') ) ) .config({ view: { stroke: null } }) .resolve({ scale: { color: 'independent' } }) .render({ renderer: 'canvas' }); return maps; }33:T587,bar_plot = function(data, cb_norm) { embed.vega.timeFormatLocale(locale); const format = cb_norm === 'normalize' ? '~%' : '.2s'; return vl .markBar({ width: 6 }) .data( data .derive({ sum: d => d.inner + d.adjacent + d.other }) .derive({ Intern: d => d.inner, Benachbart: d => d.adjacent }) .derive({ Fern: d => d.other }) .fold(['Fern', 'Intern', 'Benachbart'], { as: ['distance', 'trips'] }) .derive({ rel: d => op.round((100 * d.trips) / d.sum) / 100, order: d => op.recode(d.distance, { Intern: 1, Benachbart: 2, Fern: 0 }) }) .select('date', 'distance', 'trips', 'rel') ) .encode( vl .x() .fieldT("date") .axis({ titleFont: "Helvetica Neue", title: 'Datum' }), vl .y() .fieldQ("trips") .stack(cb_norm === 'normalize' ? 'normalize' : true) .axis({ titleFont: "Helvetica Neue", format: format, title: "Anzahl Bewegungen" }), vl .color() .fieldN('distance') .sort(tri.order) .scale({ range: tri.color }) .legend({ title: 'Entfernung' }), vl.order('order'), vl .tooltip() .field(cb_norm === 'normalize' ? 'rel' : 'trips') .format(format) ); }34:[{"id":"88420d2a5cb3e0bda617b482533f09046e7c246383e3a4392ebce7be659d20948925c21086ddd1df6a8820ae0983981bad512b640ddd8404be89b08cc8cdf1ed","href":"https://static.observableusercontent.com/files/88420d2a5cb3e0bda617b482533f09046e7c246383e3a4392ebce7be659d20948925c21086ddd1df6a8820ae0983981bad512b640ddd8404be89b08cc8cdf1ed","name":"valid_links_nuts3latice.csv","type":"text/csv","lastModified":1612361351791.828,"size":12572},{"id":"3ba2f4edae6d3de94398a4d18534df2e6536794a94752c8860f918ea5e75d09caea907a7f0b7ca899f1ede7a295811978587c7e6705864cbd8c91b9ac38c2434","href":"https://static.observableusercontent.com/files/3ba2f4edae6d3de94398a4d18534df2e6536794a94752c8860f918ea5e75d09caea907a7f0b7ca899f1ede7a295811978587c7e6705864cbd8c91b9ac38c2434","name":"nuts3de@1.json","type":"application/json","lastModified":1612361351791.828,"size":304479},{"id":"939eb24060e4377639a7160a46f58f20cb822867c499fa245919ec0025902dc7685ffc01ce09485f82fa7cd1c58d6a1fc4616b236f9cbc3e8cf654a93d00ce6f","href":"https://static.observableusercontent.com/files/939eb24060e4377639a7160a46f58f20cb822867c499fa245919ec0025902dc7685ffc01ce09485f82fa7cd1c58d6a1fc4616b236f9cbc3e8cf654a93d00ce6f","name":"iao_ml_20210203.csv","type":"text/csv","lastModified":1612361351791.828,"size":951076}] 2f:{"title":"Verkehr in der Pandemie nach Distanz","cells":[{"id":0,"value":"md`# Verkehr in der Pandemie nach Distanz`","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"md`\nThis notebooks only purpose is to provied German language figures to embed. The real deal is [here](https://observablehq.com/@adrianzachariae/traffic-in-the-pandemic-by-distance).\n\nDieses Notebooks stellt nur übersetzte Grafiken des eigentlichen Notebooks zur Verfügung. Das eigendliche Notebook ist [hier](https://observablehq.com/@adrianzachariae/traffic-in-the-pandemic-by-distance).\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"viewof cb_norm_nationwide = checkbox({\n description: \"Normalisiert jede Woche auf 100%\",\n options: [{ value: 'normalize', label: \"Prozent\" }]\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":1577,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"viewof cb_norm_state = checkbox({\n description: \"Normalisiert jede Woche auf 100%\",\n options: [{ value: 'normalize', label: \"Prozent\" }]\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":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: \"Datum\", options: dates, value: _.last(dates).value });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":897,"value":"$32","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":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: \"Datum\", 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:\n 'Anzahl von Bewegungen über LK-Grenze (Nachbar- oder Fernreisemobilität)'\n }),\n vl\n .y()\n .count()\n .axis({ titleFont: \"Helvetica Neue\", title: 'Anzahl 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 * 0.9 - 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 * 0.9 - 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":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":174,"value":"tri = Object({\n order: ['Intern', 'Benachbart', 'Fern'],\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(['inner', 'adjacent', 'other'])\n .range(tri.color)\n .unknown(\"#fff\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2519,"value":"tri_legend = `

InternBenachbartFern

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1368,"value":"patterns = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":3036,"value":"locale = Object({\n decimal: \",\",\n thousands: \".\",\n grouping: [3],\n currency: [\"€\", \"\"],\n dateTime: \"%a %b %e %X %Y\",\n date: \"%d.%m.%Y\",\n time: \"%H:%M:%S\",\n periods: [\"AM\", \"PM\"],\n days: [\n \"Sonntag\",\n \"Montag\",\n \"Dienstag\",\n \"Mittwoch\",\n \"Donnerstag\",\n \"Freitag\",\n \"Samstag\"\n ],\n shortDays: [\"So\", \"Mo\", \"Di\", \"Mi\", \"Do\", \"Fr\", \"Sa\"],\n months: [\n \"Januar\",\n \"Februar\",\n \"März\",\n \"April\",\n \"Mai\",\n \"Juni\",\n \"Juli\",\n \"August\",\n \"September\",\n \"Oktober\",\n \"November\",\n \"Dezember\"\n ],\n shortMonths: [\n \"Jan\",\n \"Feb\",\n \"Mär\",\n \"Apr\",\n \"Mai\",\n \"Jun\",\n \"Jul\",\n \"Aug\",\n \"Sep\",\n \"Okt\",\n \"Nov\",\n \"Dez\"\n ]\n})","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_20210203.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')","pinned":true,"hidden":false,"mode":"ojs"},{"id":1581,"value":"topojson = require('topojson')","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":3033,"value":"embed = require(\"vega-embed\")","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')","pinned":true,"hidden":false,"mode":"ojs"},{"id":664,"value":"culori = require('culori')","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"}