A WEB APPLICATION DASHBOARD FOR MONITORING CORONAVIRUS

CASES

A Project

Presented to the

Faculty of

California State Polytechnic University, Pomona

In Partial Fulfillment

Of the Requirements for the Degree

Master of Science

In

Computer Science

By

Richard Lin

2021

- ii -

SIGNATURE PAGE

PROJECT: A WEB APPLICATION DASHBOARD FOR MONITORING CORONAVIRUS CASES

AUTHOR: Richard Lin

DATE SUBMITTED: Spring 2021

Department of Computer Science

Dr. Lan Yang Project Committee Chair Professor of Computer Science ______________________________

Dr. Gilbert Young Professor of Computer Science ______________________________

- iii -

ACKNOWLEDGEMENTS

My project committee fully supports my effort to finish this project. A special

thanks to Dr. Lan Yang for her leadership and advise for guiding me to the right

path and helping me realize what the project is all about during this semester. I

also thank Dr. Gilbert Young for attending my project defense. Finally, my most

sincere thanks go out to my parent for their encouragement to support my goals.

- iv -

ABSTRACT

Coronavirus (COVID-19) is an infectious disease caused by a newly

discovered virus. In February 2020, the World Health Organization designated

the name COVID-19 for the disease caused by the novel coronavirus. Huge

amount of the population is infected by COVID-19. Good sizes of datasets have

been built up by recording infection cases.

In the beginning of the pandemic, people are not aware of how serious the

infect number is. In order to help people understand the trend of the virus, I

created a coronavirus dashboard. The coronavirus dashboard uses JavaScript([1]

JavaScript Tutorial, 2021) and React Library([2] React – A JavaScript library for

building user interfaces, 2020) then interacts with disease.sh([3] disease.sh –

Open Disease Data, 2020 ) which is a web server containing the data of

coronavirus cases and google map API([4] google map – Google Cloud Platform,

2020). The user can go to the dashboard and choose different countries to view

the number of infection cases, recovery cases and death cases.

- v -

TABLE OF CONTENTS

SIGNATURE PAGE...............................................................................................ii

ACKNOWLEDGEMENTS......................................................................................iii

ABSTRACT...........................................................................................................iv

LIST OF FIGURES ...............................................................................................vi

CHAPTER 1 ENVIRONMENT SETUP…………………..…………...…….……..….1

CHAPTER 2 INTRODUCTION TO REACT....………………..…………..…...…….2

CHAPTER 3 SYSTEM ARCHITECTURE....………..……………............………....3

CHAPTER 4 USER INTERFACE…….....…………..………………..…………......18

CHAPTER 5 CONCLUSION…………...……………………………..……..……....22

REFERENCES.………...……………………………..……………………………....23

- vi -

LIST OF FIGURES

Figure 1. Create a new react application ....……………..…………………...…......1

Figure 2. Start react application ....……………………………….............................1

Figure 3. System Architecture ………………………………...................................3

Figure 4. Communication between dashboard and disease.sh.....………..……....6

Figure 5. Update corresponding data if the country changed……….....................7

Figure 6. Left part of the coronavirus dashboard………….....................................8

Figure 7. Middle part of the coronavirus dashboard……………….........................8

Figure 8. Right part of the coronavirus dashboard……………... ...........................9

Figure 9. Display the number of cases for different countries……….....................9

Figure 10. Display the number of cases in three tables……………....……..........10

Figure 11. Sort the data…………………………………….....………………..........11

Figure 12. Google Map API………………………………….....……………………12

Figure 13. Display number of cases and flag on the map……………..................13

Figure 14. Create statistic graph………………………………….….........……......14

Figure 15. Build statistic chart data…………………............... .............................15

Figure 16. InfoBox.css ....………………………………….....………….……..........16

Figure 17. App.css ....…………………………................... ..................................16

Figure 18. Table.css ...……………………………………........………..……..…....17

Figure 19. Coronavirus Dashboard Overview ....………........…………..……......18

Figure 20. Drop Down List ....…………………………….....…….......………..…...19

Figure 21. Global New Cases Chart ....……………….....…………………...........20

Figure 22. Global Death Cases Chart..………………………………..…...............20

- vii -

Figure 23. Global Recovered Cases Chart...…………………...…………….…....20

Figure 24. Google Map with number of cases and flag…………………..............21

- 1 -

CHAPTER 1

ENVIRONMENT SETUP

Integrated Development Environment

An IDE, which is also known as Integrated Development Environment, allows

programmers to consolidate the different aspects of writing a computer program.

It increases the programmer’s productivity by combining source code editing,

executable file building and debugging into a single application. Most IDEs are

free to use, visual studio is one of them. Visual Studio is a feature-rich program

that can be used for many aspects of software development including JavaScript

and users can actually download extra libraries if they want. Following are the

steps to help users to set up the environment. First, I would like to create a new

react application called “coronavirus” under D:\CPP\Tracker folder. Second, we

can start the react application by typing $npm start command.

Figure 1. Create a new react application

Figure 2. Start react application

- 2 -

CHAPTER 2

INTRODUCTION TO REACT

JavaScript

JavaScript is a client-side scripting language and is used mainly for the web

application. It supplies objects to control a browser and respond to user events

such as mouse clicks, page navigation and form input. There are several

JavaScript based frameworks and libraries used to develop different web

applications.

For example, a HTML web page can be more interactive with the help of

JavaScript. There are many frameworks that web developers can use such as

AngularJS, VueJS and ReactJS. It really depends on which frameworks you like

to use and which library you like to learn. In this project, I choose ReactJS which

is one of the front-end libraries to finish my project.

React Library

React, also known as React.js or ReactJS, is a front-end JavaScript library for

building user interfaces or UI components. It is also an open-source library.

React was introduced by Facebook in 2011, to simplify the development process

and enhance the user experience. It is currently one of the most popular

JavaScript libraries and has a strong foundation and large community behind it.

The advantages of React are: First, it uses a virtual DOM([6] React Virtual DOM,

2021) which is a JavaScript object. This will enhance the performance of web

applications. Second, it improves the readability of the component and data

patterns, which helps to maintain larger applications.

- 3 -

CHAPTER 3

SYSTEM ARCHITECTURE

The coronavirus dashboard is a web application with front-end development

and back-end development. It will fetch data from disease.sh then update the

corresponding data on the dashboard. Moreover, the dashboard will

communicate with google map API and show the data on the google map.

Figure 3. System Architecture

Front-End

In the front-end implementation, I basically use three main components and

other supporting components.

Main Components :

App.js : Focus on fetching coronavirus data from statistics API, initialize data

structure and the layout of the web application.

StatisticGraph.js : Visualize the coronavirus cases.

- 4 -

GoogleMap.js : Use the google map API and display the corresponding cases on

the map.

Supporting Components :

InfoBox.js : Display daily and total cases including infected cases, recovered

cases and death cases.

Table.js : Display the number of infected cases, recovered cases and death

cases for each country.

Util.js : Create a sorting function which helps to sort the cases number.

CSS Files : Describe how HTML elements are to be displayed on screen.

Back-End

In order to retrieve coronavirus cases number and help people understand

the number easily, I choose two web servers:

Coronavirus Data

The disease.sh is web site which has some open APIs for disease-related

statistics. It provides a big range of detailed information about different types of

viruses, especially for the Coronavirus. There are four main advantages that I

decide to choose disease.sh as the coronavirus data source:

Free : The services are free to use and have a really decent performance.

Multi-Source : The source data is from multiple sources such as: Johns Hopkins

University, New York Times, Worldmeters and Apple reports which give the user

a comprehensive view of the data.

Up-To-Date : It will be updated once the source has been updated.

- 5 -

JSON Formatted : The data can be retrieved in JSON format, which is easy and

reliable integration to the web application.

Google Map

The google map API is built with reliable and comprehensive data for over

200 countries and territories which allow the coronavirus dashboard to cover all

the places. To get started, we need to enable the tool that corresponds to the

web application and include the feature that we want to access. Here, I choose

google map JavaScript API in the dashboard.

APIs AND FUNCTIONS

The following are APIs and functions that I define to handle the front-end

implementation and the communication between front-end and back-end server.

The API stands for Application Programming Interface, it is a way that can allow

two web pages or two software to communicate with each other. API acts as a

middleman, taking the request from one software and then reply with the

appropriate response to other software. Here, I use two different APIs, one

communicates between dashboard and coronavirus statistic data, the other one

communicates between dashboard and google map service.

Fetch Coronavirus Data

It retrieves the data from disease.sh website and calls the sorting function.

After that, it will store into the specific variable.

- 6 -

Figure 4. Communication between dashboard and disease.sh

- 7 -

Update Cases Number

When the user changes the country, it will automatically update the number of

cases for the specific country and set the corresponding latitude and longitude.

Figure 5. Update corresponding data if the country changed

- 8 -

Coronavirus Dashboard Layout

I divide the dashboard into three parts, each part will have the different data

shown on the dashboard.

Figure 6. Left part of the coronavirus dashboard

Figure 7. Middle part of the coronavirus dashboard

- 9 -

Figure 8. Right part of the coronavirus dashboard

3.3.4 InfoBox

The InfoBox is a container that can display the different types of case number

for the specific country including infect number, recovered number and death

number.

Figure 9. Display the number of cases for different countries

- 10 -

Number of Cases Table

Retrieve the data from disease.sh and display all the data in three tables.

Figure 10. Display the number of cases in three tables

- 11 -

Sorting Function

We need to sort the data after retrieving it from disease.sh website.

Figure 11. Sort the data

- 12 -

Google Map API

We need to communicate with google map service. In order to display google

map correctly, we need to assign default value to height and width. We also need

to initialize some default properties.

Figure 12. Google Map API

- 13 -

Image on Google Map

We loop through all the countries and display the number of cases and flags

on the map.

Figure 13. Display number of cases and flag on the map

- 14 -

Statistic Chart

Create a visualization statistic chart.

Figure 14. Create statistic graph

- 15 -

Figure 15. Build statistic chart data

- 16 -

CSS Files

CSS files can customize the layout of each web page.

Figure 16. InfoBox.css

Figure 17. App.css

- 17 -

Figure 18. Table.css

- 18 -

CHAPTER 4

USER INTERFACE

Coronavirus Dashboard Overview

This page displays the overview of Coronavirus Dashboard. We have three

different types of cases sorted in descending order in the left and right hand side.

We also use a statistic chart to visualize the number. In the middle of the

dashboard, there is a google map and a drop down button which allows the user

to select different countries.

Figure 19. Coronavirus Dashboard Overview

- 19 -

Drop Down Page

The drop down page contains many countries that users can choose from. By

clicking the specific country, the dashboard will show the number of infected,

recovered and death cases. Furthermore, the google map will automatically

locate the country and place it in the middle of the map.

Figure 20. Drop Down List

- 20 -

Statistic Chart

These charts display the past 300 days' number of new, death, and recovered

cases.

Figure 21. Global New Cases Chart

Figure 22. Global Death Cases Chart

Figure 23. Global Recovered Cases Chart

- 21 -

Google Map

Using google map API then displaying the number of infected cases and flags

for each country.

Figure 24. Google Map with number of cases and flag

- 22 -

CHAPTER 5

CONCLUSION

In this project, I built up a web application for monitoring coronavirus cases. In

order to help people understand and realize how serious the pandemic is, I

retrieved the infection cases from disease.sh and displayed on the dashboard.

There are some websites which already provided the same functionality;

however, I combined the number of cases with google map in this project which

is something new. I also believe that people will like to use my dashboard to

check the number of infection cases.

For future work, I would like to add more data not only for countries but for

cities which can help people aware the condition nearby them. I will also add a

search bar from which users can select a specific time period to check the cases.

Finally, I can integrate all the features into an app supported by ios and android

systems.

- 23 -

REFERENCES

[1] JavaScript Tutorial [online] https://www.w3schools.com/js/ Retrieved April 10,2021

[2] React – A JavaScript library for building user interfaces [Online] https://reactjs.org/tutorial/tutorial.html Retrieved December 14,2020

[3] disease.sh – Open Disease Data [online] https://disease.sh/

Retrieved April 1,2021

[4] google map – Google Cloud Platform [online] https://console.cloud.google.com/google/maps-apis/metrics?project=lustrous-bounty-302805 Retrieved April 5,20

[5] ReactJS: An Open Source JavaScript Library for Front-end Development [Online] https://www.theseus.fi/bitstream/handle/10024/130495/FInal_Year_Thesis.pdf?se. Retrieved December 21,2020

[6] React Virtual DOM [online] https://stackoverflow.com/questions/21109361/why-is-reacts-concept-of-virtual-dom-said-to-be-more-performant-than-dirty-mode

Retrieved January 12,2021

[7] HTML Tutorial [online] https://www.w3schools.com/html/default.asp Retrieved January 19,2021

[8] Stefanov, S. (2016). React:

Up and running: Building web applications. Sebastopol, CA: O''Reilly.