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

charts!

parent cc854ecf
Pipeline #97 passed with stage
in 1 second
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -165,6 +165,23 @@ let getEstimatedDays = (site) => {
}
/*
* generating an array with values
*/
let genArr = (length, step) => {
var arr = []
arr[0] = 1
for (i=1; i<length; i++) {
if (typeof step === 'function') {
arr[i] = step(i, arr)
} else {
arr[i] = arr[i-1] + step
}
}
return arr
}
/*
* handling a .sites-select change
*/
......@@ -217,6 +234,7 @@ let selectSite = (e) => {
<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/cases)/Math.log(ratio))} days</span></div>
<div class="sources"><a href="${wikiData.source_link}">source</a></div>`
updateChart(site, data, theSelect.siteNo)
})
.catch((e)=>{
siteData.innerHTML = `<div class="error">Something went wrong. Either a bug, or no data.</div>`
......@@ -229,6 +247,65 @@ let selectSite = (e) => {
}
var theChart = false;
let chart = () => {
var context = document.getElementById('the-chart').getContext('2d');
theChart = new Chart(context, {
type: 'line',
data: {
datasets: [{
label: 'Doubles every 2 days',
data: genArr(45, (i, arr)=>{ return arr[i-1]*Math.pow(2, 1/2) }),
backgroundColor: false,
borderColor: 'rgba(127, 127, 127, 0.2)',
borderWidth: 1
}, {
label: 'Doubles every 7 days',
data: genArr(45, (i, arr)=>{ return arr[i-1]*Math.pow(2, 1/7) }),
backgroundColor: false,
borderColor: 'rgba(127, 127, 127, 0.2)',
borderWidth: 1
}],
labels: genArr(45, 1)
},
options: {
scales: {
yAxes: [{
type: "logarithmic",
ticks: {
beginAtZero: true
}
}]
}
}
});
}
let niceChartColors = [
'rgba(255, 99, 132, 0.8)',
'rgba(54, 162, 235, 0.8)',
'rgba(255, 206, 86, 0.8)',
'rgba(75, 192, 192, 0.8)',
'rgba(153, 102, 255, 0.8)',
'rgba(255, 159, 64, 0.8)'
]
/*
* updating le charte
*/
let updateChart = (site, data, siteno) => {
var to_chart = {
label: site,
data: data.map(row => row.cases),
backgroundColor: false,
borderColor: niceChartColors[siteno],
borderWidth: 1
}
theChart.data.datasets[siteno + 2] = to_chart
theChart.update();
}
/*
* make sure stuff is set-up properly
......@@ -238,10 +315,13 @@ document.addEventListener('DOMContentLoaded', (e)=>{
// fill out site drop-down
var sitesSelects = document.getElementsByClassName("sites-select");
sitesSelects[0].addEventListener('change', selectSite);
sitesSelects[0].siteNo = 0;
// now we can add more sites
var addSite = document.getElementById('add-site')
chart()
// fill out the covid data box
getCovidData()
.then((data)=>{
......@@ -267,6 +347,7 @@ document.addEventListener('DOMContentLoaded', (e)=>{
// for some reason sitesSelects auto-updates and always contains the full list
// of `.sites-select` elements. *magic*
sitesSelects[sitesSelects.length - 1].addEventListener('change', selectSite);
sitesSelects[sitesSelects.length - 1].siteNo = sitesSelects.length - 1
})
return sites
})
......
<html>
<head>
<script src="./wtf_wikipedia-client.min.js"></script>
<script src="./Chart.bundle.min.js"></script>
<script src="./covid.js"></script>
<style>
@font-face {
......@@ -176,6 +177,9 @@
#add-site.visible {
display: inline-block;
}
#the-chart {
height:50vh;
}
</style>
</head>
<body>
......@@ -198,10 +202,13 @@
</div>
</div>
</div>
<div id="the-chart-container">
<canvas id="the-chart"></canvas>
</div>
<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; some great resources: <a href="http://covid.hi.is/">University of Iceland's COVID data model</a> (and its <a href="https://github.com/bgautijonsson/covid19/">sources</a>).</p>
<footer>
<p>cobbled together by <a href="https://mastodon.social/@rysiek/">@rysiek</a>; <a href="https://git.rys.io/rysiek/covid/">code is here</a>; license: <a href="./LICENSE">Affero GPL</a><br/>
uses <a href="https://github.com/spencermountain/wtf_wikipedia"><code>wtf_wikipedia</code></a> (<a href="./LICENSE.wtf_wikipedia.txt">MIT-licensed</a>) and the Play font (licensed under the <a href="./Play/OFL.txt">OFL</a>)<br/>
uses <a href="https://github.com/spencermountain/wtf_wikipedia"><code>wtf_wikipedia</code></a> and <a href="https://www.chartjs.org/">Charts.js</a> (both <a href="./LICENSE.wtf_wikipedia-charts.js.txt">MIT-licensed</a>) and the Play font (licensed under the <a href="./Play/OFL.txt">OFL</a>)<br/>
data from Wikipedia</p>
</footer>
</body>
......
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