maekke.github.io/visualize_ch.html at master · maekke/maekke.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="openzh_covid19.js"></script>
</head>
<body>
<div id="plot" style="width:100%; height:600px;"></div>

<script>

function fetchData() {
	getOpenZhCovid19Data(['ncumul_conf', 'current_hosp', 'current_icu', 'current_vent', 'ncumul_deceased', 'current_isolated', 'current_quarantined'], function(dates, data, data_column) {
		data = fillUnavailableValues(data);
		let data_sum = sumCantonalData(data);
		let data_sum_inc = diffData(data_sum);

		let trace = null;
		if (data_column === 'ncumul_conf') {
			trace = {
				x: dates,
				y: data_sum_inc,
				name: 'Confirmed COVID-19 cases',
				type: 'bar',
			};
		}
		else if (data_column === 'current_hosp') {
			trace = {
				x: dates,
				y: data_sum,
				name: 'Hospitalized',
				type: 'bar',
				visible: 'legendonly',
			};
		}
		else if (data_column === 'current_icu') {
			trace = {
				x: dates,
				y: data_sum,
				name: 'ICU',
				type: 'bar',
				visible: 'legendonly',
			};
		}
		else if (data_column === 'current_vent') {
			trace = {
				x: dates,
				y: data_sum,
				name: 'Ventilated',
				type: 'bar',
				visible: 'legendonly',
			};
		}
		else if (data_column === 'ncumul_deceased') {
			trace = {
				x: dates,
				y: data_sum_inc,
				name: 'Deceased',
				type: 'bar',
				visible: 'legendonly',
			};
		}
		else if (data_column === 'current_isolated') {
			trace = {
				x: dates,
				y: data_sum,
				name: 'Isolated',
				type: 'bar',
				visible: 'legendonly',
			};
		}
		else if (data_column === 'current_quarantined') {
			trace = {
				x: dates,
				y: data_sum,
				name: 'Quarantined',
				type: 'bar',
				visible: 'legendonly',
			};
		}

		let plotDiv = document.getElementById('plot');
		if (trace !== null) {
			Plotly.addTraces(plotDiv, trace);
		}
		else {
			console.error('trace is unassigned!');
		}
	});
}

function initPlotly(){
	let traces = [];
	let layout = {
		title: 'Overview',
	};

	Plotly.newPlot('plot', traces, layout);
};

initPlotly();
fetchData();

</script>

</body>
</html>