31:Tc69,plot = { // select a point for which to provide details-on-demand const hover = vl .selectSingle() .encodings('x') // limit selection to x-axis value .on('mouseover') // select on mouseover events .nearest(true) // select data point nearest the cursor .empty('none') // empty selection includes no data points .init({ x: { year: 2020, month: 4, date: 1 } }); // initialize it to a default value // define our base line chart for the daily number of flights const line = vl.markLine({ opacity: 0.3 }).encode( vl .x() .fieldT('date') .title("Date"), vl .y() .fieldQ('flights') .axis({ format: 's' }) // format in scientific notation, i.e. 3k instead of 3000 .title("Flights"), vl .color() .fieldN('year') .title("Year") ); // define our base line chart for the x-day average number of flights const line_avg = vl.markLine({ opacity: 1.0 }).encode( vl.x().fieldT('date'), vl .y() .fieldQ('flights_avg') .title("Flights"), vl.color().fieldN('year') ); // shared base for new layers, filtered to hover selection const base = line_avg.transform(vl.filter(hover)); // mark properties for text label layers const label = { align: 'left', dx: 5, dy: -5 }; const label2 = { align: 'left', dx: 5, dy: -19, fontWeight: "bold" //fontSize: 12 }; const white = { stroke: 'white', strokeWidth: 3 }; const dateTooltip = base .markText({ align: "center", fontWeight: "normal" }) .encode( vl.color().value("firebrick"), vl.y().value(height - 8), vl .text() .fieldT("date") .timeUnit("monthdate") ); return vl .data(data) .layer( line_avg, line, dateTooltip, // add a rule mark to serve as a guide line vl .markRule({ color: '#aaa' }) .transform(vl.filter(hover)) .encode(vl.x().fieldT('date')), // add circle marks for selected time points, hide unselected points line_avg .markCircle() .select(hover) // use as anchor points for selection .encode( vl .opacity() .value(0) .if(hover, vl.value(1)) ), // text label for average number of flights (with white stroked text to provide a legible background) base.markText(label, white).encode(vl.text().fieldQ('flights_avg')), base.markText(label).encode(vl.text().fieldQ('flights_avg')), // text label for 2020 % of flights vs 2019 (with white stroked text to provide a legible background) base.markText(label2, white).encode(vl.text().fieldN('daily_variation')), base.markText(label2).encode(vl.text().fieldN('daily_variation')) ) .title({ text: (days == '1' ? 'Daily' : 'Average (' + days + '-day)') + ' number of flight', subtitle: 'Data: Aviation Intelligence Unit, EUROCONTROL', subtitleFontStyle: 'italic', frame: 'group', anchor: 'start' }) .config({ view: { width: width, height: height }, axis: { gridOpacity: 0.75 } }) .render(); }32:[] 2f:{"title":"IFR Daily Traffic during COVID-19","cells":[{"id":0,"value":"md`# IFR Daily Traffic during COVID-19\nYou can select:\n* the Country, and\n* how many days you want to average the daily flight count\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":691,"value":"html`

${viewof country}

${viewof days}

${plot}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1023,"value":"md`---\n_**Credit**: the great [Vega-Lite tutorial](https://observablehq.com/@vega/vega-lite-interactive-index-chart great explanation) by [John Alexis Guerra Gómez](https://observablehq.com/@john-guerra) has been instrumental to being able to learn and build this chart._\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"md`---\n#### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1059,"value":"data_source = 'Data: Aviation Intelligence Unit, EUROCONTROL'","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"countries = [...new Set(dailies.map(item => item.Entity))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"data_country = {\n let movements = [];\n dailies.forEach(function(daily) {\n if (daily[\"Entity\"] === country) {\n let d2020 = daily[\"Day\"];\n let d2019 = daily[\"Day Previous Year\"];\n d2020 = new Date(d2020);\n d2019 = new Date(d2019);\n d2019 = d2019.setFullYear(2020);\n movements.push(\n {\n date: d2020,\n year: 2020,\n flights: +daily[\"Flights\"],\n country: country\n },\n {\n date: d2019,\n year: 2019,\n flights: +daily[\"Flights 2019 (Reference)\"],\n country: country\n }\n );\n }\n });\n return movements.sort((a, b) => {\n return a.date - b.date;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":610,"value":"data = {\n let r = [];\n for (var i = 0; i < data_set.date2019.length; i++) {\n r.push({\n date: data_set.date2019[i],\n year: 2019,\n flights: data_set.flights2019[i],\n flights_avg: Math.round(data_set.flights2019_avg[i]),\n country: country,\n daily_variation: \"\"\n });\n r.push({\n date: data_set.date2019[i],\n year: 2020,\n flights: data_set.flights2020[i],\n flights_avg: Math.round(data_set.flights2020_avg[i]),\n country: country,\n daily_variation:\n Math.round(\n 100 *\n ((data_set.flights2020_avg[i] - data_set.flights2019_avg[i]) /\n data_set.flights2019_avg[i])\n ) + \"%\"\n });\n }\n // for (var i = 0; i < data_set.date2020.length; i++) {\n // r.push({\n // date: data_set.date2019[i],\n // year: 2020,\n // flights: data_set.flights2020[i],\n // flights_avg: data_set.flights2020_avg[i],\n // country: country\n // });\n // }\n\n return r;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":584,"value":"data_set = {\n let date2021 = [];\n let date2020 = [];\n let date2019 = [];\n let flights2019 = [];\n let flights2020 = [];\n let flights2021 = [];\n let daily_variation = [];\n data_country.forEach(function(daily) {\n if (daily.year === 2020) {\n date2020.push(daily.date);\n flights2020.push(daily.flights);\n daily_variation.push(100 * daily.daily_variation);\n } else if (daily.year === 2021) {\n date2021.push(daily.date);\n flights2021.push(daily.flights);\n daily_variation.push(100 * daily.daily_variation);\n } else {\n date2019.push(daily.date);\n flights2019.push(daily.flights);\n }\n });\n\n return {\n date2019: date2020,\n flights2019: flights2019,\n flights2019_avg: convolve(coeffs)(flights2019),\n date2020: date2020,\n flights2020: flights2020,\n flights2020_avg: convolve(coeffs)(flights2020),\n date2021: date2021,\n flights2021: flights2021,\n flights2021_avg: convolve(coeffs)(flights2021),\n daily_variation: daily_variation\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"md`#### Technical Area\nHere is the plot (hidden, but I do not know why ;-)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1040,"value":"md`Coefficients for the filter:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":652,"value":"coeffs = binomialCoef(days - 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1042,"value":"md`Slider for selecting the filter coefficients (hidden, but I do not know why...)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":709,"value":"viewof days = slider({\n min: 1,\n max: 28,\n step: 1,\n value: 7,\n description: \"Days to average\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1047,"value":"md`Contry selection drop-down menu (as usual I do not know why it is hidden away)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"viewof country = select({options: countries, description:\"country\", value:\"-Total Network Manager Area\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":571,"value":"width = 700","pinned":false,"hidden":false,"mode":"ojs"},{"id":1091,"value":"md`Define height such to keep the ratio width / height approximatelly close (${tex`5 / 3 = 1.66667`}) to the Golden Ration (${tex`\\phi = (1 + \\sqrt{5}) / 2 = 1.618`})`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1078,"value":"height = ~~((3 * width) / 5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"import { state_movements as dailies } from \"@espinielli/state-traffic-2019-2020\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"dateParser2020 = d3.timeParse(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"dateParser2019 = d3.timeParse(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":579,"value":"import {\n convolve,\n binomialCoef\n} from '@tophtucker/smoothing-with-simple-moving-average-vs-binomial-filter'","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"d3 = require(\"d3@5\", \"d3-array@2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"import {vl} from '@vega/vega-lite-api'","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"import { select, slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}