COVID19 Tracker

Visualizing COVID-19 data and making information available and digestible to the public.

About
Motivation
Technologies
Future Features
What I Learned
Challenges
Getting Started
Contributions

About

The COVID-19 Tracker project is used to visualize and track the COVID-19 (Coronavirus) pandemic. The goal of the project is making information about COVID-19 easily accessible and easy to understand for the public using data visualization. In its current state, the project features a scatterplot layer which changes colors based of the data point and a heat map layer which is weighted based of the value of the data point. It also features the ability to turn these layers on and off, switch between different data parameters such as confirmed cases or deaths and features a tooltip UI component which appears when the user hovers over an element.

Motivation

The motivation for this project came from the inability for people to access accurate, up to date, unbiased, and easily digestible information. There's a lot of misinformation regarding this pandemic and this is a tool to counter that, providing the raw unbaised numbers without having to navigate through government websites. Many COVID-19 trackers have hard to read charts or tables and there's rarely any maps to digest and understand the data. Some maps only show certain countries and it's important to show information from the entire world as this is a worldwide pandemic. Many maps don't show the individual data points, instead clustering the data from each province or state.

Technologies

ReactJS

ReactJS is the web framework for this project. It's used due to its ease of creating front end components quickly with minimal code and its efficient updating and rendering. React GitHub

Deck.gl

Deck.gl is used for powerful and efficient web data visualizations. Deck.gl is used for creating the scatterplot layer and the heatmap layer which are essential aspects of this project. It's able to handle 2500+ COVID-19 data points with no problems due to its efficiency and as it uses the reactive programming paradigm. Deck.gl GitHub

Google Maps API

The Google Maps JavaScript API is used as the base map for this project. Due to its flexibility a custom Google Maps react component was created. The Google Maps API can be accessed using the Google Developers Console, API keys are required for this project.

Firebase

Firebase is used for the hosting and deployment of this project. Firebase provides powerful features such as analytics and its cloud functions. It's also easily scalable.

Data Source

The data source comes from the Coronavirus Tracker API. Worldwide Data comes Johns Hopkins University Center for Systems Science and Engineering (JHU CSSE) and US data comes from the Conference of State Bank Supervisors. The API provides up to date and accurate data with coordinates, 2500+ data points and more, making it a great source of COVID-19 data!

Future Features

Recoveries are planned but not available yet to due issues with the data source
Additional accurate sources for more data points in Asia and Europe
Infected data parameter option: Takes confirmed cases and subtracts deaths and recoveries
Updated UI and homepage
Graphs to see if countries or states / provinces are "flattening the curve"
- Logarithmic scale graphs
Deck.gl Text layer with data clustering as the default layer option for mobile
Table with sorted data with each countries' cases, deaths and recoveries
Data History and timeline
Machine Learning Predictions

What I Learned

I learned deck.gl and the Google Maps API which were technologies I was unfamiliar with and haven't used before in a project.

Challenges

The challenges I faced were mostly with deck.gl. I found the deck.gl documentation hard to work with and at times unclear. Features I believed were basic were impossible to find solutions or documentation for, such as data clustering and how geoJSON layers worked. The first type of layer I wanted to create was a geoJSON layer, this was a very difficult process as a world geoJSON file was hard to find and the deck.gl documentation was unclear. Once the working prototype was created for geoJSON layers, it was scrapped due to long loading times with no known way to optimize the code, large amount of data and was simply not the best way to represent the data I had.

Getting Started

Clone or fork this repository.
```
git clone
```
Install all dependencies with npm
```
npm install
```
Get your Google Maps API key from the Google Developers Console and put it in a .env file.
```
REACT_APP_GOOGLE_API_KEY = <your API key>
```
Run the project
```
npm start
```