all menu buttons implemented! yay

covid.js

@@ -383,7 +383,7 @@ var siteData = {
         "population": 17424978
     },
     "New Zealand": {
-        "population": 0
+        "population": 4977520
     },
     "Nicaragua": {
         "population": 6167237
@@ -680,9 +680,9 @@ let calculateDeltas = (data) => {
 
 
 /*
- * get (and clean up) the cases data for a given Wikipedia-recognized outbreak site
+ * get (and clean up) the cases data for a given outbreak site
  *
- * returns a promise that resolves to the an array of objects, each containing two keys:
+ * returns a promise that resolves to the an array of objects, each containing multiple keys, including:
  * - date
  * - confirmed
  * (if all goes well, that is)
@@ -971,13 +971,15 @@ let selectSite = (e) => {
         getSiteCases(site)
             .then((wikiData)=>{
                 var data = wikiData.data
-                var ratio = data[data.length-1].confirmed / data[data.length-2].confirmed
+                if (! ("ratio" in data[data.length-1]) ) {
+                    data[data.length-1].ratio = data[data.length-1].confirmed / data[data.length-2].confirmed
+                }
                 var confirmed = data[data.length-1].confirmed
                 console.log(`+-- covid data for: ${site}`
                         + `\n    date            : ${data[data.length-1].date}`
                         + `\n    cases           : ${confirmed}`
                         + `\n    cases day prior : ${data[data.length-2].confirmed}`
-                        + `\n    ratio           : ${ratio}`
+                        + `\n    ratio           : ${data[data.length-1].ratio}`
                         + `\n    source link     : ${wikiData.source_link}`
                         + `\n    source title    : ${wikiData.source_title}`)
                 getSitePopulation(site)
@@ -986,9 +988,9 @@ let selectSite = (e) => {
                             <div><span class="label">Population:</span><span class="value">${population}</span></div>
                             <div><span class="label">Cases:</span><span class="value">${confirmed}</span></div>
                             <div><span class="label">% infected:</span><span class="value">${Math.round((confirmed/population)*10000)/100}%</span></div>
-                            <div><span class="label">Rate:</span><span class="value">${Math.round((ratio - 1) * 10000) / 100}%</span></div>
-                            <div><span class="label">Doubles every:</span><span class="value">${Math.round(Math.log(2)/Math.log(ratio))} days</span></div>
-                            <div><span class="label">Half infected in:</span><span class="value">${Math.round(Math.log(population*0.5/confirmed)/Math.log(ratio))} days</span></div>
+                            <div><span class="label">Rate:</span><span class="value">${Math.round((data[data.length-1].ratio - 1) * 10000) / 100}%</span></div>
+                            <div><span class="label">Doubles every:</span><span class="value">${Math.round(Math.log(2)/Math.log(data[data.length-1].ratio))} days</span></div>
+                            <div><span class="label">Half infected in:</span><span class="value">${Math.round(Math.log(population*0.5/confirmed)/Math.log(data[data.length-1].ratio))} days</span></div>
                             <div class="sources"><a href="${wikiData.source_link}">source</a></div>`
                         theSelect.fetching = false
                         updateChartData(theSelect)
@@ -1617,26 +1619,93 @@ document.addEventListener('DOMContentLoaded', (e)=>{
         }
     })
     
+    let menu_compare_functions = {
+        "site-menu-button-rate": (a, b)=>{
+            // make the formulas easier on the eyes
+            var adata = siteData[a].data
+            var bdata = siteData[b].data
+            // get the ratios (unless already there)
+            if (! ("ratio" in adata[adata.length-1]) ) {
+                adata[adata.length-1].ratio = adata[adata.length - 1].confirmed / adata[adata.length - 2].confirmed
+            }
+            if (! ("ratio" in bdata[bdata.length-1]) ) {
+                bdata[bdata.length-1].ratio = bdata[bdata.length - 1].confirmed / bdata[bdata.length - 2].confirmed
+            }
+            // return ratio comparison
+            return bdata[bdata.length-1].ratio - adata[adata.length-1].ratio;
+        },
+        "site-menu-button-percentage": (a, b)=>{
+            // make the formulas easier on the eyes
+            var adata = siteData[a].data
+            var bdata = siteData[b].data
+            // return confirmed-to-population ratio comparison
+            return (bdata[bdata.length-1].confirmed / siteData[b].population) - (adata[adata.length-1].confirmed / siteData[a].population);
+        },
+        "site-menu-button-deaths": (a, b)=>{
+            // make the formulas easier on the eyes
+            var adata = siteData[a].data
+            var bdata = siteData[b].data
+            // return deaths comparison
+            return bdata[bdata.length-1].deaths - adata[adata.length-1].deaths;
+        },
+        "site-menu-button-active-drop": (a, b)=>{
+            // make the formulas easier on the eyes
+            var adata = siteData[a].data
+            var bdata = siteData[b].data
+            // we can assume active is there if new_active is, right?.. right?..
+            if (! ("new_active" in adata[adata.length - 1]) ) {
+                adata[adata.length - 1].active = adata[adata.length - 1].confirmed - (adata[adata.length - 1].recovered + adata[adata.length - 1].deaths)
+                adata[adata.length - 2].active = adata[adata.length - 2].confirmed - (adata[adata.length - 2].recovered + adata[adata.length - 2].deaths)
+                adata[adata.length - 1].new_active = adata[adata.length - 1].active   - adata[adata.length - 2].active
+            }
+            if (! ("new_active" in bdata[bdata.length - 1]) ) {
+                bdata[bdata.length - 1].active = bdata[bdata.length - 1].confirmed - (bdata[bdata.length - 1].recovered + bdata[bdata.length - 1].deaths)
+                bdata[bdata.length - 2].active = bdata[bdata.length - 2].confirmed - (bdata[bdata.length - 2].recovered + bdata[bdata.length - 2].deaths)
+                bdata[bdata.length - 1].new_active = bdata[bdata.length - 1].active   - bdata[bdata.length - 2].active
+            }
+            // return new_active comparison
+            return adata[adata.length-1].new_active - bdata[bdata.length-1].new_active;
+        }
+    }
+    
     //
-//     document.getElementById('site-menu-button-rate').addEventListener('click', (e)=>{
-//         Object.keys(siteData).reduce((acc, site)=>{ 
-//             try {
-//                 var data = siteData[site].data.slice(-2)
-//                 var ratio = Math.round(((data[1].confirmed / data[0].confirmed) - 1) * 10000) / 100
-//                 if (acc.length < 6) {
-//                     acc.push({
-//                         site: site,
-//                         ratio: ratio
-//                     })
-//                 } else {
-//                     
-//                 }
-//             } catch (e) {
-//                 console.log(`+-- no data for ${site}`)
-//             }
-//         })
-//         document.getElementById('menu-shown').checked = false;
-//     }, [])
+    document.querySelectorAll('#internal-main-menu-container input[type=button]').forEach((node)=>{
+        // add a listener
+        node.addEventListener('click', (e)=>{
+            // these should be ignored
+            var ignored_sites = ['Global', 'Diamond Princess', 'MS Zaandam']
+            // let's get them sites
+            var sites = Object.keys(siteData)
+                            // first, filter out sites without data
+                            // and sites with less than 100 cases
+                            .reduce((acc, site)=>{
+                                if (ignored_sites.includes(site)) {
+                                    console.log(`+-- ${site} is specifically ignored; not taking into account`)
+                                } else if (! ('data' in siteData[site]) ) {
+                                    console.log(`+-- no cases data for ${site}; not taking into account`)
+                                } else if (! ('population' in siteData[site]) ) {
+                                    console.log(`+-- no population data for ${site}; not taking into account`)
+                                } else if (siteData[site].data[siteData[site].data.length - 1].confirmed < 100) {
+                                    console.log(`+-- not enough confirmed cases for ${site}; not taking into account`)
+                                } else {
+                                    acc.push(site)
+                                }
+                                return acc
+                            }, [])
+                            // sort using a function defined for that
+                            .sort(menu_compare_functions[e.target.id])
+                            // we only need top 6
+                            .slice(0, 6)
+                            // prepare for hashing
+                            .map((site)=>{
+                                return site.toLowerCase().replace(/[^a-z]/g, '-')
+                            })
+                            .join(',')
+                            
+            // TODO: we need to find a better way to do this
+            window.location.hash = '#' + sites
+        })
+    })
     
     // fill out the covid data box
     getCovidData()
@@ -1705,6 +1774,7 @@ document.addEventListener('DOMContentLoaded', (e)=>{
     
     clearAllSites.addEventListener('click', (e)=>{
         e.preventDefault()
+        // we need to do this in a better way
         window.location.hash = ''
     })
 
@@ -1725,11 +1795,13 @@ document.addEventListener('DOMContentLoaded', (e)=>{
             }, [])
     
         // any site data containers to be removed?
-        console.log(`    +-- removing ${sitesSelects.length - hash_sites.length} sites...`)
-        var cur_site_count = sitesSelects.length
-        for (var i=hash_sites.length; i<cur_site_count; i++) {
-            console.log(`        i: ${i}`)
-            removeSite.dispatchEvent(new Event('click'))
+        if (sitesSelects.length - hash_sites.length > 0) {
+            console.log(`    +-- removing ${sitesSelects.length - hash_sites.length} sites...`)
+            var cur_site_count = sitesSelects.length
+            for (var i=hash_sites.length; i<cur_site_count; i++) {
+                console.log(`        i: ${i}`)
+                removeSite.dispatchEvent(new Event('click'))
+            }
         }
         
         // do we have any hash to work with?

index.html

@@ -409,11 +409,11 @@
         <div class="sources"><a href="https://github.com/CSSEGISandData/COVID-19">source</a></div>
         <div id="main-menu-container">
             <div id="internal-main-menu-container">
-                <h2>Load 6 sites with:</h2>
+                <h2>Load 6 sites with at least 100 confirmed cases and:</h2>
                 <input type="button" id="site-menu-button-rate" value="largest growth rate"/>
                 <input type="button" id="site-menu-button-percentage" value="highest percentage of population infected"/>
                 <input type="button" id="site-menu-button-deaths" value="most deaths"/>
-                <input type="button" id="site-menu-button-active-drop" value="greatest drop of number of active cases"/>
+                <input type="button" id="site-menu-button-active-drop" value="greatest daily drop of number of active cases"/>
             </div>
         </div>
         <div id="sites-data-container">