maurice/snix
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Create line chart of UK confirmed corona virus cases

Browse source 
I was having trouble tracking the growth of corona virus cases in the UK.
Thankfully someone is publishing some daily COVID data as JSON. I downloaded
that data manually and plotted it using the chart.js library as a programming
exercise with Mimi.

Now I'm attempting to deploy to https://wpcarro.dev/covid-uk.

TODO(wpcarro): Prefer the live API data instead my soon-to-be-stale downloaded.
This commit is contained in:
William Carroll 2020-03-18 21:29:11 +00:00
parent 79b5fce68a
commit dd9788fa73
8 changed files with 51515 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

46
covid-uk/src/index.html Normal file
View file

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Covid UK</title>
</head>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<script src="./node_modules/chart.js/dist/Chart.bundle.min.js"></script>
<script>
var timeseries =
fetch('./timeseries.json')
.then(res => res.json())
.then(createChart);
function createChart(data) {
var uk = data["United Kingdom"];
var data = uk.map(x => x["confirmed"])
var labels = uk.map(x => x["date"])
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'Number of confirmed COVID-19 cases in the U.K.',
data: data,
backgroundColor: 'rgba(255, 0, 100, 0.2)',
borderWidth: 3
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
}
</script>
</body>
</html>