Create line chart of UK confirmed corona virus cases
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
parent
79b5fce68a
commit
dd9788fa73
8 changed files with 51515 additions and 0 deletions
14
covid-uk/default.nix
Normal file
14
covid-uk/default.nix
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
{ pkgs, ... }:
|
||||
|
||||
pkgs.stdenv.mkDerivation {
|
||||
name = "covid-uk";
|
||||
buildInputs = [];
|
||||
src = ./.;
|
||||
buildPhase = ''
|
||||
mkdir -p $out
|
||||
mkdir -p $out/node_modules/chart.js/dist
|
||||
cp $src/node_modules/chart.js/dist/Chart.bundle.min.js $out/node_modules/chart.js/dist
|
||||
cp $src/src/* $out
|
||||
'';
|
||||
dontInstall = true;
|
||||
}
|
||||
15
covid-uk/package.json
Normal file
15
covid-uk/package.json
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
{
|
||||
"name": "covid-uk",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"chart.js": "^2.9.3"
|
||||
}
|
||||
}
|
||||
8
covid-uk/shell.nix
Normal file
8
covid-uk/shell.nix
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
let
|
||||
pkgs = import <nixpkgs> {};
|
||||
in pkgs.mkShell {
|
||||
buildInputs = with pkgs; [
|
||||
yarn
|
||||
nodejs
|
||||
];
|
||||
}
|
||||
46
covid-uk/src/index.html
Normal file
46
covid-uk/src/index.html
Normal 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>
|
||||
51378
covid-uk/src/timeseries.json
Normal file
51378
covid-uk/src/timeseries.json
Normal file
File diff suppressed because it is too large
Load diff
48
covid-uk/yarn.lock
Normal file
48
covid-uk/yarn.lock
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
|
||||
# yarn lockfile v1
|
||||
|
||||
|
||||
chart.js@^2.9.3:
|
||||
version "2.9.3"
|
||||
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.3.tgz#ae3884114dafd381bc600f5b35a189138aac1ef7"
|
||||
integrity sha512-+2jlOobSk52c1VU6fzkh3UwqHMdSlgH1xFv9FKMqHiNCpXsGPQa/+81AFa+i3jZ253Mq9aAycPwDjnn1XbRNNw==
|
||||
dependencies:
|
||||
chartjs-color "^2.1.0"
|
||||
moment "^2.10.2"
|
||||
|
||||
chartjs-color-string@^0.6.0:
|
||||
version "0.6.0"
|
||||
resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71"
|
||||
integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==
|
||||
dependencies:
|
||||
color-name "^1.0.0"
|
||||
|
||||
chartjs-color@^2.1.0:
|
||||
version "2.4.1"
|
||||
resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.4.1.tgz#6118bba202fe1ea79dd7f7c0f9da93467296c3b0"
|
||||
integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==
|
||||
dependencies:
|
||||
chartjs-color-string "^0.6.0"
|
||||
color-convert "^1.9.3"
|
||||
|
||||
color-convert@^1.9.3:
|
||||
version "1.9.3"
|
||||
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
|
||||
integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
|
||||
dependencies:
|
||||
color-name "1.1.3"
|
||||
|
||||
color-name@1.1.3:
|
||||
version "1.1.3"
|
||||
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
|
||||
integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
|
||||
|
||||
color-name@^1.0.0:
|
||||
version "1.1.4"
|
||||
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
|
||||
integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
|
||||
|
||||
moment@^2.10.2:
|
||||
version "2.24.0"
|
||||
resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
|
||||
integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
|
||||
|
|
@ -11,6 +11,7 @@ in {
|
|||
utils = readTree ./utils;
|
||||
emacs = readTree ./emacs;
|
||||
learn = readTree ./learn;
|
||||
covid-uk = readTree ./covid-uk;
|
||||
blog = readTree ./blog;
|
||||
lisp = readTree ./lisp;
|
||||
gopkgs = readTree ./gopkgs;
|
||||
|
|
|
|||
|
|
@ -171,6 +171,11 @@ in {
|
|||
enableACME = true;
|
||||
root = briefcase.blog;
|
||||
};
|
||||
"wpcarro.dev" = {
|
||||
addSSL = true;
|
||||
enableACME = true;
|
||||
root = briefcase.covid-uk;
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue