Skip to content

GitLab

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

started working on the interface; we now have a country selection drop-down... 

started working on the interface; we now have a country selection drop-down and some basic stats for COVID
parent 807484ed
Hide whitespace changes
Inline Side-by-side
covid.js
View file @ e0beea6a
/*
* yes, hard-coding. shoot me.
* if you want to go fancy, you can use the getCountries() function below instead.
*/
var countries = [
"Afghanistan",
"Albania",
"Algeria",
"Andorra",
"Angola",
"Antigua and Barbuda",
"Argentina",
"Armenia",
"Australia",
"Austria",
"Azerbaijan",
"Bahamas",
"Bahrain",
"Bangladesh",
"Barbados",
"Belarus",
"Belgium",
"Belize",
"Benin",
"Bhutan",
"Plurinational State of Bolivia",
"Bosnia and Herzegovina",
"Botswana",
"Brazil",
"Brunei Darussalam",
"Bulgaria",
"Burkina Faso",
"Burundi",
"Cabo Verde",
"Cambodia",
"Cameroon",
"Canada",
"Central African Republic",
"Chad",
"Chile",
"China",
"Colombia",
"Comoros",
"Congo",
"Costa Rica",
"Côte d'Ivoire",
"Croatia",
"Cuba",
"Cyprus",
"Czech Republic",
"Democratic People's Republic of Korea",
"Democratic Republic of the Congo",
"Denmark",
"Djibouti",
"Dominica",
"Dominican Republic",
"Ecuador",
"Egypt",
"El Salvador",
"Equatorial Guinea",
"Eritrea",
"Estonia",
"Eswatini",
"Ethiopia",
"Fiji",
"Finland",
"France",
"Gabon",
"Republic of The Gambia",
"Georgia",
"Germany",
"Ghana",
"Greece",
"Grenada",
"Guatemala",
"Guinea",
"Guinea-Bissau",
"Guyana",
"Haiti",
"Honduras",
"Hungary",
"Iceland",
"India",
"Indonesia",
"Islamic Republic of Iran",
"Iraq",
"Ireland",
"Israel",
"Italy",
"Jamaica",
"Japan",
"Jordan",
"Kazakhstan",
"Kenya",
"Kiribati",
"Kuwait",
"Kyrgyzstan",
"Lao People's Democratic Republic",
"Latvia",
"Lebanon",
"Lesotho",
"Liberia",
"Libya",
"Liechtenstein",
"Lithuania",
"Luxembourg",
"Madagascar",
"Malawi",
"Malaysia",
"Maldives",
"Mali",
"Malta",
"Marshall Islands",
"Mauritania",
"Mauritius",
"Mexico",
"Federated States of Micronesia",
"Monaco",
"Mongolia",
"Montenegro",
"Morocco",
"Mozambique",
"Myanmar",
"Namibia",
"Nauru",
"Nepal",
"Netherlands",
"New Zealand",
"Nicaragua",
"Niger",
"Nigeria",
"North Macedonia",
"Norway",
"Oman",
"Pakistan",
"Palau",
"Panama",
"Papua New Guinea",
"Paraguay",
"Peru",
"Philippines",
"Poland",
"Portugal",
"Qatar",
"Republic of Korea",
"Republic of Moldova",
"Romania",
"Russian Federation",
"Rwanda",
"Saint Kitts and Nevis",
"Saint Lucia",
"Saint Vincent and the Grenadines",
"Samoa",
"San Marino",
"São Tomé and Príncipe",
"Saudi Arabia",
"Senegal",
"Serbia",
"Seychelles",
"Sierra Leone",
"Singapore",
"Slovakia",
"Slovenia",
"Solomon Islands",
"Somalia",
"South Africa",
"South Sudan",
"Spain",
"Sri Lanka",
"Sudan",
"Suriname",
"Sweden",
"Switzerland",
"Syrian Arab Republic",
"Tajikistan",
"Thailand",
"Timor-Leste",
"Togo",
"Tonga",
"Trinidad and Tobago",
"Tunisia",
"Turkey",
"Turkmenistan",
"Tuvalu",
"Uganda",
"Ukraine",
"United Arab Emirates",
"United Kingdom of Great Britain and Northern Ireland",
"United Republic of Tanzania",
"United States of America",
"Uruguay",
"Uzbekistan",
"Vanuatu",
"Bolivarian Republic of Venezuela",
"Viet Nam",
"Yemen",
"Zambia",
"Zimbabwe"
]
/*
* get a list of countries
* from https://en.wikipedia.org/wiki/Member_states_of_the_United_Nations
*
* yes, naïve and limited, I know.
*
* also, no, we should not be using this everytime the interface is displayed
* world political situation is unstable, but not *that* unstable
*/
let getCountries = () => {
return wtf
.fetch('Member states of the United Nations')
.then((doc)=>{
return doc.json()
})
.then((data)=>{
return data
.sections[2]
.tables[0]
.map((row)=>{
return row["Member state"].text.replace(/ \(.+\)$/, '')
})
})
}
let getCovidData = () => {
return wtf
.fetch('2019-20 coronavirus pandemic')
.then((doc)=>{
var data = doc.json()
.sections[0]
.infoboxes[0]
var cleaned_data = {
confirmed: 1 * data.confirmed_cases.text.replace(/^([0-9,]+).*$/, '$1').replace(/,/g, ''),
deaths: 1 * data.deaths.text.replace(/^([0-9,]+).*$/, '$1').replace(/,/g, ''),
recovered: 1 * data.recovery_cases.text.replace(/^([0-9,]+).*$/, '$1').replace(/,/g, ''),
}
cleaned_data.mortality = cleaned_data.deaths / cleaned_data.confirmed
return cleaned_data
})
}
/*
* get (and clean up) the cases data for a given Wikipedia-recognized country
*
* returns a promise that resolves to the data (if all goes well, that is)
* returns a promise that resolves to the an array of objects, each containing two keys:
* - date
* - cases
* (if all goes well, that is)
*/
let getCountryCases = (country) => {
return wtf
......@@ -19,7 +266,10 @@ let getCountryCases = (country) => {
.templates
.filter(row => row.template == 'medical cases chart/row')
.map((row)=>{
return 1 * row.list[3]
return {
date: row.list[0],
cases: 1 * row.list[3]
}
})
// some templates are done in a different way
......@@ -29,9 +279,12 @@ let getCountryCases = (country) => {
.templates
.filter(row => row.template == 'bar stacked')
.map((row)=>{
return 1 * row
.list[1]
.replace(/^([0-9,]+).*$/, '$1')
return {
date: row.list[0],
cases: 1 * row
.list[1]
.replace(/^([0-9,]+).*$/, '$1')
}
})
}
......@@ -61,37 +314,16 @@ let getCountryPopulation = (country) => {
}
/*
* get a list of countries
* from https://en.wikipedia.org/wiki/Member_states_of_the_United_Nations
*
* yes, naïve and limited, I know.
*/
let getCountries = () => {
return wtf
.fetch('Member states of the United Nations')
.then((doc)=>{
return doc.json()
})
.then((data)=>{
return data
.sections[2]
.tables[0]
.map((row)=>{
return row["Member state"].text.replace(/ \(.+\)$/, '')
})
})
}
let getEstimatedDays = (country) => {
console.log(`+-- fetching data for: ${country}`)
getCountryCases(country)
.then((data)=>{
var ratio = data[data.length-1] / data[data.length-2]
var cases = data[data.length-1]
var ratio = data[data.length-1].cases / data[data.length-2].cases
var cases = data[data.length-1].cases
console.log(` +-- as of: ${data[data.length-1].date}`)
console.log(` +-- cases: ${cases}`)
console.log(` +-- previous day day: ${data[data.length-2]}`)
console.log(` +-- previous day day: ${data[data.length-2].cases}`)
console.log(` +-- ratio: ${ratio}`)
getCountryPopulation(country)
.then((population)=>{
......@@ -103,4 +335,31 @@ let getEstimatedDays = (country) => {
console.log("75% population infected in (days):", Math.log(population*0.75/cases)/Math.log(ratio))
})
})
}
\ No newline at end of file
}
/*
* make sure stuff is set-up properly
*/
document.addEventListener('DOMContentLoaded', (e)=>{
// fill out country drop-down
var countrySelect = document.getElementById("countries");
for (country in countries) {
var cOpt = document.createElement("option");
cOpt.value = countries[country];
cOpt.innerHTML = countries[country];
countrySelect.appendChild(cOpt);
}
// fill out the covid data box
getCovidData()
.then((data)=>{
document.querySelector('#covid-stats > #confirmed > .value').innerHTML = data.confirmed
document.querySelector('#covid-stats > #deaths > .value').innerHTML = data.deaths
document.querySelector('#covid-stats > #recovered > .value').innerHTML = data.recovered
document.querySelector('#covid-stats > #mortality > .value').innerHTML = "~" + Math.round(data.mortality * 10000) / 100
})
});
// https://en.wikipedia.org/wiki/File:Epidemic_curve_update_18_march_20.png
index.html
View file @ e0beea6a
......@@ -4,6 +4,26 @@
<script src="./covid.js"></script>
</head>
<body>
<h1>COVID-19<h1>
<h1>Scary COVID-19 data</h1>
<p><strong>Disclaimer:</strong> this is all back-of-the-napkin math using data from Wikipedia. Take with a grain (or preferably, a spoonfull) of salt. Check your own sources.</p>
<div id="covid-stats">
<h2>Global stats</h2>
<div id="confirmed"><span class="label">Confirmed cases:</span> <span class="value"></span></div>
<div id="deaths"><span class="label">Deaths:</span> <span class="value"></span></div>
<div id="recovered"><span class="label">Recovered:</span> <span class="value"></span></div>
<div id="mortality"><span class="label">Mortality rate:</span> <span class="value"></span></div>
<p id="sources">Data sourced directly <a href="https://en.wikipedia.org/wiki/2019%E2%80%9320_coronavirus_pandemic">from Wikipedia</a>.</p>
</div>
<hr/>
<div>
<label for="countries">Choose a country:</label>
<select id="countries">
<option value="select one">(select one)</option>
</select>
</div>
<hr/>
<footer>
<p>License: <a href="./LICENSE">Affero GPL</a>; uses <a href="https://github.com/spencermountain/wtf_wikipedia"><code>wtf_wikipedia</code></a>, licensed under the MIT license. Data from Wikipedia.</p>
</footer>
</body>
</html>
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