New option: displays values relative to the size of the population of…

… each country
Xubor · Oct 21, 2020 · 706be5a · 706be5a
1 parent a8e072e
commit 706be5a
Show file tree

Hide file tree

Showing 3 changed files with 290 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -132,6 +132,9 @@ <h2>Customize</h2>
                Day Doubling Time</label>
           </div>
 
+          <input @change="createURL" type="checkbox" style="margin-top: 0.75rem;" id="perMillion" v-model="perMillion">
+          <label for="perMillion">Show amout relative to population</label>
+
         </div>
 
         <div class="countries">
@@ -165,6 +168,7 @@ <h2>{{regionType}}</h2>
   </div>
 
   <!-- page code -->
+  <script src="population2020.js"></script>
   <script src="vue-definitions.js?7"></script>
 
 </body>

diff --git a/population2020.js b/population2020.js
@@ -0,0 +1,250 @@
+// Population of regions/states
+// Based on: United Nations, Department of Economic and Social Affairs, Population Division (2019). World Population Prospects 2019, Online Edition. Rev. 1.							
+// See. https://population.un.org/wpp/Download/Standard/Population/
+// © August 2019 by United Nations, made available under a Creative Commons license CC BY 3.0 IGO: http://creativecommons.org/licenses/by/3.0/igo/							
+// Semantic of the attributes: ['Count as','Not found',Country','Population']
+//   Count as: include this into population of given named region in the CSSEGISandData dataset
+//   Not found: This region was not represented in the CSSEGISandData dataset at the time of data composition
+//   Country: Original name of Country/region in the UN data
+//   Population: UN Medium Variant estimate for the total population at 2020, in thousands
+
+/* eslint-disable no-sparse-arrays, no-unused-vars */
+/* jshint elision:true */
+
+const population2020 = [
+  [,, 'Afghanistan', 38928],
+  [,, 'Albania', 2878],
+  [,, 'Algeria', 43851],
+  ['US',, 'American Samoa', 55],
+  [,, 'Andorra', 77],
+  [,, 'Angola', 32866],
+  ['United Kingdom',, 'Anguilla', 15],
+  [,, 'Antigua and Barbuda', 98],
+  [,, 'Argentina', 45196],
+  [,, 'Armenia', 2963],
+  ['Netherlands',, 'Aruba', 107],
+  [,, 'Australia', 25500],
+  [,, 'Austria', 9006],
+  [,, 'Azerbaijan', 10139],
+  [,, 'Bahamas', 393],
+  [,, 'Bahrain', 1702],
+  [,, 'Bangladesh', 164689],
+  [,, 'Barbados', 287],
+  [,, 'Belarus', 9449],
+  [,, 'Belgium', 11590],
+  [,, 'Belize', 398],
+  [,, 'Benin', 12123],
+  ['United Kingdom',, 'Bermuda', 62],
+  [,, 'Bhutan', 772],
+  [,, 'Bolivia', 11673],
+  ['Netherlands',, 'Bonaire Sint Eustatius and Saba', 26],
+  [,, 'Bosnia and Herzegovina', 3281],
+  [,, 'Botswana', 2352],
+  [,, 'Brazil', 212559],
+  ['United Kingdom',, 'British Virgin Islands', 30],
+  ['Brunei',, 'Brunei Darussalam', 437],
+  [,, 'Bulgaria', 6948],
+  [,, 'Burkina Faso', 20903],
+  [,, 'Burundi', 11891],
+  [,, 'Cabo Verde', 556],
+  [,, 'Cambodia', 16719],
+  [,, 'Cameroon', 26546],
+  [,, 'Canada', 37742],
+  ['United Kingdom',, 'Cayman Islands', 66],
+  [,, 'Central African Republic', 4830],
+  [,, 'Colombia', 50883],
+  [,, 'Comoros', 870],
+  ['Congo (Brazzaville)',, 'Congo', 5518],
+  [, true, 'Cook Islands', 18],
+  [,, 'Costa Rica', 5094],
+  ['Cote d\'Ivoire', 'Côte d\'Ivoire', 26378],
+  [,, 'Croatia', 4105],
+  [,, 'Cuba', 11327],
+  ['Netherlands',, 'Curaçao', 164],
+  [,, 'Cyprus', 1207],
+  [,, 'Czechia', 10709],
+  [, true, 'Dem. People\'s Republic of Korea', 25779],
+  ['Congo (Kinshasa)',, 'Democratic Republic of the Congo', 89561],
+  [,, 'Denmark', 5792],
+  [,, 'Djibouti', 988],
+  [,, 'Dominica', 72],
+  [,, 'Dominican Republic', 10848],
+  [,, 'Ecuador', 17643],
+  [,, 'Egypt', 102334],
+  [,, 'El Salvador', 6486],
+  [,, 'Equatorial Guinea', 1403],
+  [,, 'Eritrea', 3546],
+  [,, 'Estonia', 1327],
+  [,, 'Eswatini', 1160],
+  [,, 'Ethiopia', 114964],
+  ['United Kingdom',, 'Falkland Islands (Malvinas)', 3],
+  ['Denmark',, 'Faroe Islands', 49],
+  [,, 'Fiji', 896],
+  [,, 'Finland', 5541],
+  [,, 'France', 65274],
+  ['France',, 'French Guiana', 299],
+  ['France',, 'French Polynesia', 281],
+  [,, 'Gabon', 2226],
+  [,, 'Gambia', 2417],
+  [,, 'Georgia', 3989],
+  [,, 'Germany', 83784],
+  [,, 'Ghana', 31073],
+  ['United Kingdom',, 'Gibraltar', 34],
+  [,, 'Greece', 10423],
+  ['Denmark',, 'Greenland', 57],
+  [,, 'Grenada', 113],
+  ['France',, 'Guadeloupe', 400],
+  ['US',, 'Guam', 169],
+  [,, 'Guatemala', 17916],
+  [,, 'Guinea', 13133],
+  [,, 'Guinea-Bissau', 1968],
+  [,, 'Guyana', 787],
+  [,, 'Haiti', 11403],
+  [,, 'Holy See', 1],
+  [,, 'Honduras', 9905],
+  [,, 'Hungary', 9660],
+  [,, 'Chad', 16426],
+  ['United Kingdom',, 'Channel Islands', 174],
+  [,, 'Chile', 19116],
+  ['China (Mainland)',, 'China', 1439324],
+  ['Hong Kong',, 'China Hong Kong SAR', 7497],
+  ['Macau',, 'China Macao SAR', 649],
+  ['Taiwan*',, 'China Taiwan Province of China', 23817],
+  [,, 'Iceland', 341],
+  [,, 'India', 1380004],
+  [,, 'Indonesia', 273524],
+  ['Iran',, 'Iran (Islamic Republic of)', 83993],
+  [,, 'Iraq', 40223],
+  [,, 'Ireland', 4938],
+  ['United Kingdom',, 'Isle of Man', 85],
+  [,, 'Israel', 8656],
+  [,, 'Italy', 60462],
+  [,, 'Jamaica', 2961],
+  [,, 'Japan', 126476],
+  [,, 'Jordan', 10203],
+  [,, 'Kazakhstan', 18777],
+  [,, 'Kenya', 53771],
+  [, true, 'Kiribati', 119],
+  [,, 'Kuwait', 4271],
+  [,, 'Kyrgyzstan', 6524],
+  ['Laos',, 'Lao People\'s Democratic Republic', 7276],
+  [,, 'Latvia', 1886],
+  [,, 'Lebanon', 6825],
+  [,, 'Lesotho', 2142],
+  [,, 'Liberia', 5058],
+  [,, 'Libya', 6871],
+  [,, 'Liechtenstein', 38],
+  [,, 'Lithuania', 2722],
+  [,, 'Luxembourg', 626],
+  [,, 'Madagascar', 27691],
+  [,, 'Malawi', 19130],
+  [,, 'Malaysia', 32366],
+  [,, 'Maldives', 541],
+  [,, 'Mali', 20251],
+  [,, 'Malta', 442],
+  [, true, 'Marshall Islands', 59],
+  ['France',, 'Martinique', 375],
+  [,, 'Mauritania', 4650],
+  [,, 'Mauritius', 1272],
+  ['France',, 'Mayotte', 273],
+  [,, 'Mexico', 128933],
+  [, true, 'Micronesia (Fed. States of)', 115],
+  [,, 'Monaco', 39],
+  [,, 'Mongolia', 3278],
+  [,, 'Montenegro', 628],
+  ['United Kingdom',, 'Montserrat', 5],
+  [,, 'Morocco', 36911],
+  [,, 'Mozambique', 31255],
+  ['Burma',, 'Myanmar', 54410],
+  [,, 'Namibia', 2541],
+  [, true, 'Nauru', 11],
+  [,, 'Nepal', 29137],
+  [,, 'Netherlands', 17135],
+  ['France',, 'New Caledonia', 285],
+  [,, 'New Zealand', 4822],
+  [,, 'Nicaragua', 6625],
+  [,, 'Niger', 24207],
+  [,, 'Nigeria', 206140],
+  [, true, 'Niue', 2],
+  [,, 'North Macedonia', 2083],
+  [, true, 'Northern Mariana Islands', 58],
+  [,, 'Norway', 5421],
+  [,, 'Oman', 5107],
+  [,, 'Pakistan', 220892],
+  [, true, 'Palau', 18],
+  [,, 'Panama', 4315],
+  [,, 'Papua New Guinea', 8947],
+  [,, 'Paraguay', 7133],
+  [,, 'Peru', 32972],
+  [,, 'Philippines', 109581],
+  [,, 'Poland', 37847],
+  [,, 'Portugal', 10197],
+  ['US',, 'Puerto Rico', 2861],
+  [,, 'Qatar', 2881],
+  ['Korea, South',, 'Republic of Korea', 51269],
+  ['Moldova',, 'Republic of Moldova', 4034],
+  ['France',, 'Réunion', 895],
+  [,, 'Romania', 19238],
+  ['Russia',, 'Russian Federation', 145934],
+  [,, 'Rwanda', 12952],
+  ['France',, 'Saint Barthélemy', 10],
+  ['United Kingdom',, 'Saint Helena', 6],
+  [,, 'Saint Kitts and Nevis', 53],
+  [,, 'Saint Lucia', 184],
+  ['France',, 'Saint Martin (French part)', 39],
+  ['France',, 'Saint Pierre and Miquelon', 6],
+  [,, 'Saint Vincent and the Grenadines', 111],
+  [, true, 'Samoa', 198],
+  [,, 'San Marino', 34],
+  [,, 'Sao Tome and Principe', 219],
+  [,, 'Saudi Arabia', 34814],
+  [,, 'Senegal', 16744],
+  [,, 'Serbia', 8737],
+  [,, 'Seychelles', 98],
+  [,, 'Sierra Leone', 7977],
+  [,, 'Singapore', 5850],
+  ['Netherlands',, 'Sint Maarten (Dutch part)', 43],
+  [,, 'Slovakia', 5460],
+  [,, 'Slovenia', 2079],
+  [, true, 'Solomon Islands', 687],
+  [,, 'Somalia', 15893],
+  [,, 'South Africa', 59309],
+  [,, 'South Sudan', 11194],
+  [,, 'Spain', 46755],
+  [,, 'Sri Lanka', 21413],
+  ['West Bank and Gaza',, 'State of Palestine', 5101],
+  [,, 'Sudan', 43849],
+  [,, 'Suriname', 587],
+  [,, 'Sweden', 10099],
+  [,, 'Switzerland', 8655],
+  ['Syria',, 'Syrian Arab Republic', 17501],
+  [,, 'Tajikistan', 9538],
+  [,, 'Thailand', 69800],
+  [,, 'Timor-Leste', 1318],
+  [,, 'Togo', 8279],
+  [, true, 'Tokelau', 1],
+  [, true, 'Tonga', 106],
+  [,, 'Trinidad and Tobago', 1399],
+  [,, 'Tunisia', 11819],
+  [,, 'Turkey', 84339],
+  [, true, 'Turkmenistan', 6031],
+  ['United Kingdom',, 'Turks and Caicos Islands', 39],
+  [, true, 'Tuvalu', 12],
+  [,, 'Uganda', 45741],
+  [,, 'Ukraine', 43734],
+  [,, 'United Arab Emirates', 9890],
+  [,, 'United Kingdom', 67886],
+  ['Tanzania',, 'United Republic of Tanzania', 59734],
+  ['US',, 'United States of America', 331003],
+  ['US',, 'United States Virgin Islands', 104],
+  [,, 'Uruguay', 3474],
+  [,, 'Uzbekistan', 33469],
+  [, true, 'Vanuatu', 307],
+  ['Venezuela',, 'Venezuela (Bolivarian Republic of)', 28436],
+  ['Vietnam',, 'Viet Nam', 97339],
+  [, true, 'Wallis and Futuna Islands', 11],
+  [,, 'Western Sahara', 597],
+  [,, 'Yemen', 29826],
+  [,, 'Zambia', 18384],
+  [,, 'Zimbabwe', 14863]
+];
diff --git a/vue-definitions.js b/vue-definitions.js
@@ -219,6 +219,12 @@ window.app = new Vue({
         this.doublingTime = doublingTime;
       }
 
+      if (urlParameters.has('perMillion')) {
+        let perMillion = urlParameters.get('perMillion');
+        this.perMillion = (perMillion == 'true');
+      }
+      this.minCasesInCountry = (this.perMillion ? 0.00050 : 50);
+
       if (urlParameters.has('select')) {
         this.mySelect = urlParameters.get('select').toLowerCase();
       }
@@ -260,6 +266,13 @@ window.app = new Vue({
       this.searchField = '';
     },
 
+    perMillion() {
+      if (!this.firstLoad) {
+        this.pullData(this.selectedData, this.selectedRegion, /*updateSelectedCountries*/ false);
+      }
+      this.searchField = '';
+    },
+
     minDay() {
       if (this.day < this.minDay) {
         this.day = this.minDay;
@@ -411,6 +424,17 @@ window.app = new Vue({
           }
         }
 
+        if (this.perMillion) {
+          grouped.forEach(country => {
+            country.population = population2020.reduce((popacc, nextCountry) =>
+              popacc + (nextCountry[0] == country.region || nextCountry[2] == country.region ? nextCountry[3] / 1000 : 0),
+            0);
+            if (country.population == 0) console.log('No population data for ' + country.region);
+          });
+
+          grouped = grouped.filter(c => c.population);
+        }
+
         // additional regions computed from present country data
         this.addSyntheticRegion(grouped, 'EU', [
           'Austria', 'Belgium', 'Bulgaria', 'Croatia', 'Cyprus',
@@ -454,11 +478,11 @@ window.app = new Vue({
             region = renames[region];
           }
 
-          const cases = arr.map(e => e >= this.minCasesInCountry ? e : NaN);
+          const cases = arr.map(e => e >= this.minCasesInCountry ? e / (this.perMillion ? row.population : 1) : NaN);
           covidData.push({
             country: region,
             cases,
-            slope: slope.map((e, i) => arr[i] >= this.minCasesInCountry ? e : NaN),
+            slope: slope.map((e, i) => arr[i] >= this.minCasesInCountry ? e / (this.perMillion ? row.population : 1) : NaN),
             maxCases: this.myMax(...cases)
           });
 
@@ -612,6 +636,10 @@ window.app = new Vue({
         queryUrl.append('doublingtime', this.doublingTime);
       }
 
+      if (this.perMillion) {
+        queryUrl.append('perMillion', this.showTrendLine);
+      }
+
       // check if no countries selected
       // edge case: since selectedCountries may be larger than the country list (e.g. when switching from Confirmed Cases to Deaths), we can't simply check if selectedCountries is empty
       // so instead we check if the countries list does not include any of the selected countries
@@ -713,7 +741,7 @@ window.app = new Vue({
         showlegend: false,
         autorange: false,
         xaxis: {
-          title: 'Total ' + this.selectedData,
+          title: 'Total ' + this.selectedData + (this.perMillion ? ' per Million Population' : ''),
           type: this.selectedScale == 'Logarithmic Scale' ? 'log' : 'linear',
           range: this.selectedScale == 'Logarithmic Scale' ? this.logxrange : this.linearxrange,
           titlefont: {
@@ -722,7 +750,7 @@ window.app = new Vue({
           },
         },
         yaxis: {
-          title: 'New ' + this.selectedData + ' (in the Past Week)',
+          title: 'New ' + this.selectedData + ' (in the Past Week)' + (this.perMillion ? ' per Million Population' : ''),
           type: this.selectedScale == 'Logarithmic Scale' ? 'log' : 'linear',
           range: this.selectedScale == 'Logarithmic Scale' ? this.logyrange : this.linearyrange,
           titlefont: {
@@ -828,6 +856,7 @@ window.app = new Vue({
           selectedScale: this.selectedScale,
           showLabels: this.showLabels,
           showTrendLine: this.showTrendLine,
+          perMillion: this.perMillion,
           doublingTime: this.doublingTime,
         },
         traces: this.traces,
@@ -945,7 +974,7 @@ window.app = new Vue({
 
     selectedScale: 'Logarithmic Scale',
 
-    minCasesInCountry: 50,
+    minCasesInCountry: 0.0005,
 
     dates: [],
 
@@ -965,6 +994,8 @@ window.app = new Vue({
 
     showTrendLine: true,
 
+    perMillion: true,
+
     doublingTime: 2,
 
     mySelect: '',