we can now display recoveries and deaths for each site, too

covid.js

@@ -1107,6 +1107,9 @@ let updateChartData = (siteSelect) => {
         start_at = start_at * population_ratio
     }
     
+    // which data are we looking at
+    var dataset = document.querySelector('input[type=radio][name=chart-data]:checked').value
+    
     // filter the data
     var found_start = false
     filtered_data = siteData[siteSelect.value]
@@ -1114,19 +1117,19 @@ let updateChartData = (siteSelect) => {
         .filter((row, idx) => {
             if (found_start) {
                 return true
-            } else if (row.confirmed >= start_at) {
+            } else if (row[dataset] >= start_at) {
                 found_start = true
                 return true
             }
             return false
         })
-    
+        
     // use cumulative case numbers
     if (document.querySelector('input[type=radio][name=chart-cases]:checked').value === 'cumulative') {
-        to_chart.data = filtered_data.map(row => row.confirmed)
+        to_chart.data = filtered_data.map(row => row[dataset])
     // use new cases count
     } else {
-        to_chart.data = filtered_data.map(row => row.new_confirmed)
+        to_chart.data = filtered_data.map(row => row[`new_${dataset}`])
     }
     
     // are we in for per-million values?

index.html

@@ -237,10 +237,16 @@
                 margin:0em;
                 padding:0.5em;
             }
-            .chart-config-group .per-million {
+            .chart-config-group .per-million,
+            .chart-config-group .data-confirmed,
+            .chart-config-group .data-recovered,
+            .chart-config-group .data-deaths {
                 display:none;
             }
-            .chart-config-container input#chart-values-per-million:checked ~ .chart-config-group .per-million {
+            .chart-config-container input#chart-values-per-million:checked ~ .chart-config-group .per-million,
+            .chart-config-container input#chart-data-confirmed:checked ~ .chart-config-group .data-confirmed,
+            .chart-config-container input#chart-data-recovered:checked ~ .chart-config-group .data-recovered,
+            .chart-config-container input#chart-data-deaths:checked ~ .chart-config-group .data-deaths {
                 display:inline;
             }
             .chart-config-group.chart-average {
@@ -293,9 +299,9 @@
             <canvas id="the-chart"></canvas>
         </div>
         <div class="chart-config-container">
-            <!--input type="radio" id="chart-data-confirmed" name="chart-data" value="confirmed" checked="checked"/>
+            <input type="radio" id="chart-data-confirmed" name="chart-data" value="confirmed" checked="checked"/>
             <input type="radio" id="chart-data-recovered" name="chart-data" value="recovered"/>
-            <input type="radio" id="chart-data-deaths" name="chart-data" value="deaths"/-->
+            <input type="radio" id="chart-data-deaths" name="chart-data" value="deaths"/>
             <input type="radio" id="chart-type-logarithmic" name="chart-type" value="logarithmic" checked="checked"/>
             <input type="radio" id="chart-type-linear" name="chart-type" value="linear"/>
             <input type="radio" id="chart-cases-cumulative" name="chart-cases" value="cumulative" checked="checked"/>
@@ -306,12 +312,12 @@
             <input type="radio" id="chart-start-tenth" name="chart-start" value="10" checked="checked"/>
             <input type="radio" id="chart-start-hundredth" name="chart-start" value="100"/>
             <input type="radio" id="chart-start-thousandth" name="chart-start" value="1000"/>
-            <!--div class="chart-config-group">
+            <div class="chart-config-group">
                 <p>Show:</p>
                 <label for="chart-data-confirmed">confirmed cases</label>
                 <label for="chart-data-recovered">recoveries</label>
                 <label for="chart-data-deaths">deaths</label>
-            </div-->
+            </div>
             <div class="chart-config-group">
                 <p>Scale:</p>
                 <label for="chart-type-logarithmic">logarithmic</label>
@@ -338,7 +344,7 @@
                 <label for="chart-start-tenth">10th</label>
                 <label for="chart-start-hundredth">100th</label>
                 <label for="chart-start-thousandth">1000th</label>
-                <p>case<span class="per-million"> per 1M</span></p>
+                <p><span class="data-confirmed">case</span><span class="data-recovered">recovery</span><span class="data-deaths">death</span><span class="per-million"> per 1M</span></p>
             </div>
         </div>
         <div id="disclaimers-container">