Visualizing COVID-19 data and making information available and digestible to the public.
Table of Contents
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.
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.
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
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.
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!
- 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.
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.
Clone or fork this repository.
Install all dependencies with npm
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
If you're new to open source contributions read this guide. Issues and pull requests are welcome!
Try It out