charts!

5773a531 · Michał Woźniak · cc854ecf · 5773a531 · 5773a531 · 5773a531
Commit 5773a531 authored Mar 24, 2020 by Michał Woźniak
--- a/Chart.bundle.min.js
+++ b/Chart.bundle.min.js
--- a/LICENSE.wtf_wikipedia.txt
+++ b/LICENSE.wtf_wikipedia.txt
--- a/covid.js
+++ b/covid.js
@@ -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
        })

--- a/index.html
+++ b/index.html
 <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>