Exploring realtime interactive visualization, using COVID-19 data
A data retrieval and visualization library 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 observable notebooks. 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.
The primary source of data is the one kept updated in github (see Data below), originally reported in
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 [PMID32087114].
The source data is compiled by Johns Hopkins Whitting School of Engineering, Center for Systems Science and Engineering at github.com/CSSEGISandData/COVID-19 The interoperability relies on gh-pages as instructed by this pull request. That is, the data is retrieved directly from github's versioned repository, i.e.
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));
The js library can be loaded through script tag loading or through require
<script src="https://episphere.github.io/corona/corona.js"></script>
corona = require('https://episphere.github.io/corona/corona.js')
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:
observablehq.com/@episphere/corona
The material below is generated by calling the ui method (