diff options
| author | William Carroll <wpcarro@gmail.com> | 2020-03-19T11·53+0000 |
|---|---|---|
| committer | William Carroll <wpcarro@gmail.com> | 2020-03-19T12·30+0000 |
| commit | 1d45f146158b0bc678f4204f2c22d481d3ea20a7 (patch) | |
| tree | bb7e77dd8dee0202782b25dd6055f68f7d404b9e /covid-uk/index.html | |
| parent | c627fa9cbd9231e38b6c66cad5eed084a33767b5 (diff) | |
Update COVID-19 webpage
- Prefer hosting on sandbox.wpcarro.dev; I would prefer to host it at sandbox.wpcarro.dev/covid-19, but I haven't figure out how to use Nginx to do serve locations like /covid-19 yet. - Splice the src directory: When I develop locally and index.html exists within ./src, I cannot access ./node_modules because ./node_modules is in a parent directory. I could fix this if I used a bundler like Parcel or Webpack, but I do not want to set that up at this time. - Introduce Tailwind for CSS. This complicates my build a bit as well. For now, I'm including output.css even though ideally I should not version-control this file. I haven't figured out how to `yarn install` and run commands like `npx tailwindcss build styles.css -o output.css` in a Nix derivation yet. Hopefully I will learn and refactor this. - Add some content about why I made this chart - Add some content about some of my covid-19 predictions - Add a footer to the webpage - Delete timeseries.json and prefer fetching the published data instead
Diffstat (limited to 'covid-uk/index.html')
| -rw-r--r-- | covid-uk/index.html | 99 |
1 files changed, 99 insertions, 0 deletions
diff --git a/covid-uk/index.html b/covid-uk/index.html new file mode 100644 index 000000000000..15769f7490e0 --- /dev/null +++ b/covid-uk/index.html @@ -0,0 +1,99 @@ +<!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> |