Commit b0fb3f7e authored by Michał Woźniak's avatar Michał Woźniak
Browse files

all menu buttons implemented! yay

parent c6cc694c
......@@ -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?
......
......@@ -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">
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment