Merge pull request #28 from finnge/m-feat-kleinkram

Kleinkram updates

README.md

@@ -13,7 +13,7 @@ Germany
 
 ## Documentation
 
-tbd.
+Die Dokumentation zum Projekt befindet sich im [Wiki](https://github.com/finnge/vis-covid19-flights/wiki).
 
 ### Development
 

data/covid19/formatdata.js

@@ -89,26 +89,35 @@ const FILEPATH = {
     const yearWeek = date.getYearWeekNumber();
 
     // Die Bezeichnung EL (Griechenland) wird durch die ISO Abkürzung GR ersetzt
+    const geoId = (el.geoId === 'EL') ? 'GR' : el.geoId;
 
-    if (popData2020[(el.geoId === 'EL') ? 'GR' : el.geoId] === undefined) {
-      popData2020[(el.geoId === 'EL') ? 'GR' : el.geoId] = el.popData2020;
+    if (popData2020[geoId] === undefined) {
+      popData2020[geoId] = el.popData2020;
     }
 
     if (formattedData[yearWeek] === undefined) {
       formattedData[yearWeek] = {};
     }
 
-    if (formattedData[yearWeek][(el.geoId === 'EL') ? 'GR' : el.geoId] === undefined) {
-      formattedData[yearWeek][(el.geoId === 'EL') ? 'GR' : el.geoId] = {
+    if (formattedData[yearWeek][geoId] === undefined) {
+      formattedData[yearWeek][geoId] = {
         cases: 0,
         deaths: 0,
         incidence: [],
       };
     }
 
-    formattedData[yearWeek][(el.geoId === 'EL') ? 'GR' : el.geoId].cases += parseInt(el.cases, 10);
-    formattedData[yearWeek][(el.geoId === 'EL') ? 'GR' : el.geoId].deaths += parseInt(el.deaths, 10);
-    formattedData[yearWeek][(el.geoId === 'EL') ? 'GR' : el.geoId].incidence.push(el.incidence);
+    const cases = parseInt(el.cases, 10);
+    const deaths = parseInt(el.deaths, 10);
+    const { incidence } = el;
+
+    // formattedData[yearWeek][geoId].cases += cases < 0 ? 0 : cases;
+    // formattedData[yearWeek][geoId].deaths += deaths < 0 ? 0 : deaths;
+    // formattedData[yearWeek][geoId].incidence.push(incidence < 0 ? 0 : incidence);
+
+    formattedData[yearWeek][geoId].cases += cases;
+    formattedData[yearWeek][geoId].deaths += deaths;
+    formattedData[yearWeek][geoId].incidence.push(incidence);
   });
 
   // 7 day incidence average for week
@@ -124,7 +133,9 @@ const FILEPATH = {
         addedIncidence += incidence;
       });
 
-      formattedData[key][countryKey].incidence = Math.round((addedIncidence / num) * 100) / 100;
+      const incidence = Math.round((addedIncidence / num) * 100) / 100;
+
+      formattedData[key][countryKey].incidence = incidence < 0 ? 0 : incidence;
     });
   });
 

data/covid19/output/covid19.json

@@ -7084,7 +7084,7 @@
       "IS": {
         "cases": -715,
         "deaths": 0,
-        "incidence": -39.27
+        "incidence": 0
       },
       "IE": {
         "cases": 9531,
@@ -10199,7 +10199,7 @@
       "FR": {
         "cases": -274121,
         "deaths": 980,
-        "incidence": -58.17
+        "incidence": 0
       },
       "DE": {
         "cases": 52727,

data/covid19/output/events.json

@@ -47,7 +47,7 @@
         "year": "numeric",
         "month": "long"
       },
-      "description": "Europe becomes a Corona hotspot. Social isolation is introduced in DE and curfews in FR. In addition, Italy\"s healthcare system is at its limit."
+      "description": "Europe becomes a Corona hotspot. Social isolation is introduced in DE and curfews in FR. In addition, Italy's healthcare system is at its limit."
     },
     {
       "event": "Travelers returning from risk areas must get tested",

src/assets/css/base.css

@@ -5,6 +5,7 @@ body {
   background-color: var(--c-bg-1);
   color: var(--c-fg-1);
   font-family: var(--ff-serif);
+  font-size: var(--s);
   grid-template-rows: 1fr auto;
 }
 
@@ -26,9 +27,14 @@ svg text {
 .button svg {
   width: var(--m);
   height: var(--m);
+  margin: var(--xxs);
   fill: var(--c-fg-1);
 }
 
+.button[data-hidden] {
+  display: none;
+}
+
 .button--primary {
   display: flex;
   align-items: center;
@@ -72,13 +78,28 @@ svg text {
 main {
   display: grid;
   gap: var(--m);
-  grid-template-columns: [side-start] 1fr [side-end main-start] 2fr [main-end];
+  grid-template-columns: [side-start] 2fr [side-end main-start] 3fr [main-end];
+  grid-template-rows: repeat(auto-fit, min-content);
 
   /* grid-template-columns:
       [full-start] 1fr [wrapper-start]
       minmax(0, 70rem) [wrapper-end] 1fr [full-end]; */
 }
 
+@media screen and (max-width: 1400px) {
+  main {
+    display: block;
+  }
+}
+
+.side {
+  grid-column: side;
+}
+
+.side :nth-child(n) {
+  margin-bottom: var(--m);
+}
+
 footer {
   position: fixed;
   top: var(--m);

src/assets/css/components/chordDiagram.css

@@ -1,6 +1,6 @@
 [data-js-graph] {
   /* width: 100%; */
-  height: clamp(300px, 100vh, 1000px);
+  height: clamp(750px, 100vh, 1000px);
 }
 
 [data-js-graph] [data-type="arcs"] path {
@@ -14,3 +14,18 @@
 [data-js-graph] [data-type="links"] path[data-passive] {
   opacity: 0.05;
 }
+
+[data-js-graph] [data-type="covid-ticks"] {
+  pointer-events: none;
+}
+
+[data-js-tooltip] {
+  z-index: 1;
+  padding: var(--xxs);
+  backdrop-filter: blur(5px);
+  background-color: rgb(38 38 38 / 80%);
+  color: #f4f4f4;
+  font-family: var(--ff-sans);
+  font-size: var(--xs);
+  line-height: var(--lh-tight);
+}

src/assets/css/components/introSlides.css

@@ -32,7 +32,7 @@
 .graph[data-js-slide-el-active] *,
 .graph [data-js-slide-el-active],
 .graph [data-js-slide-el-active] * {
-  pointer-events: all;
+  pointer-events: auto;
   visibility: visible;
 }
 
@@ -41,7 +41,7 @@
 .graph [data-js-slide-el-active-passive],
 .graph [data-js-slide-el-active-passive] * {
   opacity: 0.1 !important;
-  pointer-events: all;
+  pointer-events: auto;
   visibility: visible;
 }
 

src/assets/css/components/navigation.css

@@ -1,8 +1,13 @@
 .navigation {
+  /* position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: var(--m);
   margin-top: var(--m);
-
-  /* background-color: var(--c-bg-2); */
-  grid-column: main;
+  backdrop-filter: blur(5px);
+  background-color: var(--c-bg-1);
+  background-color: rgba(var(--c-bg-1) / 80%); */
 }
 
 .navigation .graph {
@@ -16,10 +21,19 @@
   padding: var(--xs);
 }
 
+.event-display {
+  display: none;
+}
+
 .event-display time {
   font-weight: var(--fw-bold);
 }
 
 .event-display p {
   font-family: var(--ff-sans);
 }
+
+[data-js-current-slide="7"] .event-display,
+[data-js-current-slide="8"] .event-display {
+  display: block;
+}

src/assets/js/charts/chord.js

@@ -158,36 +158,46 @@ export default async function generateChord(
   // Covid Data
   // X scale
 
-  const medianCovid19MaxValue = d3.quantile(
+  const medianCovid19Value = (quantil) => d3.quantile(
     Object.values(listOfCovidIncidence),
-    0.25,
+    quantil,
     (weekYearDatum) => d3.max(
       Object.values(weekYearDatum),
       (datum) => datum.incidence,
     ),
   );
 
+  let maxDomain = medianCovid19Value(1);
+
+  if (year < 2020 || (year === 2020 && week < 41)) {
+    maxDomain = medianCovid19Value(0.4);
+  } else if (year < 2021 || (year === 2021 && week < 44)) {
+    maxDomain = medianCovid19Value(0.7);
+  }
+
   const y = d3.scaleRadial()
     .range([
       outerRadius + ringPadding,
-      outerRadius + Math.min(margin.left, margin.right),
+      outerRadius + Math.min(margin.left, margin.right) - 5,
     ])
     .domain([
       0,
-      d3.max([...covid19, medianCovid19MaxValue]),
+      // d3.max([...covid19, medianCovid19]),
+      maxDomain,
     ])
     .nice();
 
   outerGroups
     .append('path')
-    .attr('fill', getCssVar('c-prim'))
+    .attr('fill', getCssVar('c-fg-1'))
     .attr('d', d3.arc() // imagine your doing a part of a donut plot
       .innerRadius(outerRadius + ringPadding)
       .outerRadius((d) => y(covid19[d.index] ?? 0))
       .startAngle((d) => d3.mean([d.startAngle, d.endAngle]) - 0.02)
       .endAngle((d) => d3.mean([d.startAngle, d.endAngle]) + 0.02));
 
   const yAxis = svg.append('g')
+    .attr('data-type', 'covid-ticks')
     .attr('text-anchor', 'middle');
 
   const yTick = yAxis
@@ -239,7 +249,7 @@ export default async function generateChord(
   const tooltip = baseSelection.append('div')
     .style('position', 'absolute')
     .style('visibility', 'hidden')
-    .style('z-index', 1)
+    .attr('data-js-tooltip', '')
     .text('Value');
 
   // Interactivity
@@ -249,12 +259,12 @@ export default async function generateChord(
   listOfAllGroups.forEach((group) => {
     group.addEventListener('mouseenter', (e) => {
       const { target } = e;
-      const { group: groupId, country } = target.dataset;
+      const { group: groupId, value } = target.dataset;
 
       // tooltip
       tooltip
         .style('visibility', 'visible')
-        .text(country);
+        .html(`${value} total <br> number of flights`);
 
       // highlight active paths
       const listOfGroupSource = elGraphWrapper.querySelectorAll(`path[data-group-source="${groupId}"]`);
@@ -328,6 +338,9 @@ export default async function generateChord(
   // 7
   svg.attr('data-js-intro-slide-el-7', '');
 
+  // 8
+  svg.attr('data-js-intro-slide-el-8', '');
+
   // init visability
   const initSlideValue = document.querySelector('body').dataset.jsCurrentSlide;