-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
64 lines (64 loc) · 4.4 KB
/
index.html
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
<head>
<script src='corona.js'></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.27/bootstrap-native-v4.js"></script>
<link href="corona.css" rel="stylesheet">
</head>
<body class="container" onload="corona.ui()">
<h1><span style="font-family:fantasy">COVID-19</span><sup style="font-size:medium;color:green">cases, mortality</sup> <span style="font-size:small;color:blue">[<a href="https://github.com/episphere/corona" target="_blank">code</a>] [<a href="https://github.com/episphere/corona/issues" target="_blank">issues</a>] [<a href="https://observablehq.com/@episphere/corona" target="_blank" style="font-size:x-large;color:red;background-color:yellow">demo</a>]<span></h1>
<p style="color:maroon">Exploring realtime interactive visualization, using COVID-19 data</p>
<hr>
<h2>Summary</h2>
<p>
A <a href="https://episphere.github.io/corona/corona.js" target="_blank">data retrieval and visualization library</a> was developed to support applications
in a variety of forms, from regular web pages like this one to nodejs FaaS (server-side),
and including literate programming in <a href="https://observablehq.com/@episphere/corona" target="_blank">observable notebooks</a>.
The data is retrieved in real-time using a "url-api" approach that exposes client side data wrangling as methods of a glocal corona object.
For live tools and discussion of the web-api approach click on "Demo" above.
</p>
<h2>Data</h2>
<p>
The primary source of data is the one kept updated in github (see Data below), originally reported in
</p>
<p><i style="color:green">Dong, Ensheng, et al. “An Interactive Web-Based Dashboard to Track COVID-19 in Real Time.” The Lancet Infectious Diseases, Feb. 2020, doi:10.1016/S1473-3099(20)30120-1 [<a href="https://www.sciencedirect.com/science/article/pii/S1473309920301201?via%3Dihub" target="_blank">PMID32087114</a>]</i>.
<p>
The source data is compiled by Johns Hopkins Whitting School of Engineering,
<a href="https://systems.jhu.edu/research/public-health/ncov">Center for Systems Science and Engineering</a> at <a href="https://github.com/CSSEGISandData/COVID-19" target="_blank">github.com/CSSEGISandData/COVID-19</a>
The interoperability relies on gh-pages as instructed by this <a href="https://github.com/CSSEGISandData/COVID-19/pull/220" target="_blank">pull request</a>.
That is, the data is retrieved directly from github's versioned repository, i.e.
</p>
<code>
fetch('https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_daily_reports/03-03-2020.csv').then(response => response.text()).then(data => console.log(data));
</code>
<p>
<h3>Two types of dataset:</h3>
<li><a href="https://github.com/CSSEGISandData/COVID-19/tree/master/csse_covid_19_data/csse_covid_19_time_series" target="_blank">time series</a></li>
<li><a href="https://github.com/CSSEGISandData/COVID-19/tree/master/csse_covid_19_data/csse_covid_19_daily_reports" target="_blank">daily reports</a></li>
</p>
<h2>corona.js</h2>
<p>
The <a href="https://github.com/episphere/corona/blob/master/corona.js" targe="_blank">js library</a> can be loaded through script tag loading or through require</p>
<p>
<code>
<script src="https://episphere.github.io/corona/corona.js"></script>
<br> <br>
corona = require('https://episphere.github.io/corona/corona.js')
</code>
</p>
<h2>Observable Notebook</h2>
<p>
Development expedience, and communication, are on oposite plates of the scale when it comes to visualization of real-time data.
A balance is attenpted using literate programming, with no server-side dependency, with Observable Notebooks.
That is, this notebook loads the same js library that would be required in nodejs (server-side) or script tag loading into a web page:
</p>
<p>
<a href="https://observablehq.com/@episphere/corona" target="_blank">observablehq.com/@episphere/corona</a>
</p>
<h2>Web Computing</h2>
<hr>
<p>
The material below is generated by calling the ui method (<cope>corona.ui()</code>) coded in the <a href="https://episphere.github.io/corona/corona.js" target="_blank">corona.js library</a>.
</p>
<hr>
<div id="coronaDiv"></div>
</body>