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;
|
utils = readTree ./utils;
|
||||||
emacs = readTree ./emacs;
|
emacs = readTree ./emacs;
|
||||||
learn = readTree ./learn;
|
learn = readTree ./learn;
|
||||||
|
covid-uk = readTree ./covid-uk;
|
||||||
blog = readTree ./blog;
|
blog = readTree ./blog;
|
||||||
lisp = readTree ./lisp;
|
lisp = readTree ./lisp;
|
||||||
gopkgs = readTree ./gopkgs;
|
gopkgs = readTree ./gopkgs;
|
||||||
|
|
|
||||||
|
|
@ -171,6 +171,11 @@ in {
|
||||||
enableACME = true;
|
enableACME = true;
|
||||||
root = briefcase.blog;
|
root = briefcase.blog;
|
||||||
};
|
};
|
||||||
|
"wpcarro.dev" = {
|
||||||
|
addSSL = true;
|
||||||
|
enableACME = true;
|
||||||
|
root = briefcase.covid-uk;
|
||||||
|
};
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue