99 lines
3.6 KiB
HTML
99 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>COVID-19 UK</title>
|
|
<link rel="stylesheet" href="output.css">
|
|
</head>
|
|
<body class="container mx-auto py-10">
|
|
<div>
|
|
<h1 class="text-center">COVID-19 in the UK</h1>
|
|
<p>
|
|
Up until recently, I used a couple of resources (i.e.
|
|
<a href="https://multimedia.scmp.com/infographics/news/china/article/3047038/wuhan-virus/index.html">one</a>,
|
|
<a href="https://www.worldometers.info/coronavirus/">two</a>) for tracking
|
|
an updated number of confirmed covid-19 cases.
|
|
</p>
|
|
<p>
|
|
Given the high speed at which the virus is spreading, I was having a
|
|
difficult time intuiting the shape of this growth. For example if today
|
|
the total number of confirmed cases for covid-19 in the UK was 500, I
|
|
could not remember if yesterday it was 450, 400, or 200.
|
|
</p>
|
|
<p>
|
|
Thankfully someone is <a
|
|
href="https://github.com/pomber/covid19">publishing this data</a> as a
|
|
timeseries database. I am currently living in London, so I decided to
|
|
chart the <u>daily number of confirmed covid-19 cases in the UK</u> to
|
|
better understand what is happening.
|
|
</p>
|
|
</div>
|
|
<canvas id="myChart" class="py-12"></canvas>
|
|
<script src="./node_modules/chart.js/dist/Chart.bundle.min.js"></script>
|
|
<script>
|
|
var timeseries =
|
|
fetch('https://pomber.github.io/covid19/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>
|
|
<div>
|
|
<h2 class="text-center">Back of the envelope predictions</h2>
|
|
<p>
|
|
From what I have read, a population where 60% of its constituents have
|
|
been infected with covid-19 and have recovered is said to have "herd
|
|
immunity". Once a population has herd immunity, the rate at which the
|
|
virus spreads decreases.
|
|
</p>
|
|
<p>
|
|
Roughly 60M people live in the UK; 60% of 60M is around 40M. Before a
|
|
population reaches "herd immunity", the total number of <em>true
|
|
covid-19 cases</em> <u>doubles every five days</u>. Therefore in <u>fifty
|
|
days</u> you might expect the number of true cases to be <u>1000x
|
|
larger</u> than what it is today.
|
|
</p>
|
|
<p>
|
|
So if you think the total number of <em>true covid-19 cases</em>
|
|
<u>today</u> is 40,000 then you might expect the rate of growth to slow
|
|
down in a little less than two months.
|
|
</p>
|
|
<p>
|
|
Thank you for reading.
|
|
</p>
|
|
</div>
|
|
<footer class="pt-5 mb-8 lg:flex">
|
|
<a class="block py-2 lg:w-1/4 text-center hover:underline" href="https://learn.wpcarro.dev">Learn</a>
|
|
<a class="block py-2 lg:w-1/4 text-center hover:underline" href="https://blog.wpcarro.dev">Blog</a>
|
|
<a class="block py-2 lg:w-1/4 text-center hover:underline" href="https://twitter.com/wpcarro">Twitter</a>
|
|
<a class="block py-2 lg:w-1/4 text-center hover:underline" href="https://github.com/wpcarro">Github</a>
|
|
</footer>
|
|
</body>
|
|
</html>
|