Coronavirus disease(COVID-19)is an ongoing global pandemic resulting in more than 28 million cases and 900K deaths. As of now, countless people’s lives have been changed because of the loss of jobs or family and it becomes one of the most concerning topics. Many digital tools are in turn created to enable people to keep track of the latest situation.
However, these tools often display too much information to users requiring specific data. Besides, the interface is also too complex for them. Therefore, this project aims to simplify data and the interface as much as possible so that those users are able to perform the daily query with ease.
Overview of the Selected Country: A user can not only get to know the amount of today's confirmed, recovered, deaths cases but also the current amount and ratio of recovered and deaths cases to confirmed cases of the selected country.
Comparison of Selected Countries: A user can select up to five countries and compare their case-growing trend and further details. Moreover, the information of each country can be turned on or off and all countries can be sorted in ascending or descending order according to different user needs.
The wireframe was further crafted by implementing the design system. The main design goal is to differentiate complex data with a clear visual hierarchy. For instance, the chromatic color theme classified data into confirmed, active, recovered and deaths cases.
The COVID-19 Tracker is a single-page application(SPA) and progressive web application(PWA) developed in HTML, CSS, React.js and Service Workers and deployed on Netlify.
The data is powered by NOVELCovid API sourced from Worldometer, Johns Hopkins University, etc. and visualized with Mapbox GL JS and Chart.js in various ways such as map, histogram, pie chart, etc. In addition, Chart.js and CountUp.js were implemented to animate the transition of charts and numbers respectively.
Selecting & Tracking Countries
Apart from the drop-down menu, the confirmed-case map offers an alternative way to select a country for users. In the comparison section, the selected countries are saved in the localStorage to reduce the repetitive selection of tracking countries next time.