Covid-19 Tracker

Inspiration

In the current age of social media and news, the exaggeration of information throughout the internet is prevalent. Covid-19 Tracker aims to reduce as much misinformation as possible by providing the user with daily updated coronavirus data. The web application makes use of data visualization to give the user a clear insight of the severity of coronavirus through visual context through maps or graphs.

What it does

Covid-19 Tracker fetches Coronavirus data (updated daily by the Coronavirus COVID19 API) and visualizes the data in a variety of different formats such as charts and heatmaps. The user will be able to compare, analyze and predict the trend of confirmed cases, recovered cases, and deaths for different countries. In addition, Covid-19 Tracker provides a summary of

How we built it

Covid-19 Tracker is built with HTML, CSS, and javascript. The charts are built with the chart.js javascript library. Similarly, the heatmap of Covid cases is made with the leaflet.js javascript library. All of our data is sourced from the Coronavirus COVID19 API.

Challenges we ran into

Some of the challenges we ran into when building Covid-19 Tracker include managing and formating JSON data from the API in order for the fetched data to be compatible with the data visualization. In addition, formatting the web application in a responsive layout was also challenging as the charts from Chart.js were difficult to format in a responsive layout.

Accomplishments that we're proud of

Accomplishments that we're proud of include creating multiple forms of data visualizations with Chart.js and Leaflet.js

What we learned

We learned how to fetch and interact with APIs with javascript as well as integrating JSON data via javascript libraries such as Chart.js and Leaflet.js. In addition, we further developed our skills in HTML and CSS via creating responsive layouts capable of handling mobile devices and other window sizes.

What's next for Covid-19 Tracker

1) Implement additional chart types (scatter, bubble, etc.) 2) Add a 'compare' function which allows the user to directly compare data between different countries 3) IP address integration to facilitate the user in viewing data about their current location.