Coronavirus Dashboard Ireland

Table of Contents:

• UX
  • Design Choices
    • Fonts
    • Colours
  • Wireframes
    • Homepage
    • Graphs
    • Interactive SVG
• User Stories
• Features
• Future Goals
• Project Planning
• Technology Used
• Testing
  • Homepage Testing
  • Graphs Testing
  • Interactive Map Testing
• Issues
  • Open Issues
  • Closed Issues
• How to Run Project Locally
  • Building svgMap for Source
• Deployment
• Credits

UX (User Experience)

The design of this site is pretty simple. There is a sidebar that allows you to navigate through the website. This side bar can be toggled closed to allow for a better viewing experience when needed. The data for the Coronavirus statistics is split into 2 different sections. Graphs is used to display statistics in a graphical manner with statistics such as a breakdown of confirmed cases vs gender, hospitalisations, age, etc. Interactive Map is a visual representation of Ireland and its counties with a breakdown of the confirmed cases in each county. This data is displayed when hovering over the county.

Design Choices

Fonts

Statistics font - I chose a sans-serif font called Segoe UI as this font is very readible at small sizes. This is important when displaying lots of data. Body font - I chose a sans-serif font called Poppins as this is a good font for websites with easy readability at diferent sizes. Heading font - I chose Helvetica as this font pairs well with Segoe UI.

Colours

Since this is a dasboard I kept the colours simple so that the data would be easy to read

• Background: #f5f6fa
• Side Bar Background: #212121
• Side Bar Active List Element: #32373d
• Chart Boxes: #fff
• Highlight Colour: #fff

Wireframe Mockups

Homepage

Graphs

Interactive SVG

User stories

Below is a list if the specific user stories for this project.

1. As a user I want to be able to see the latest Coronavirus figures for Ireland.
2. As a user I want to be able to see the latest Coronavirus figures for specific counties in Ireland.
3. As a user I want to be able to see the amount of confirmed cases, deaths, recoveries in total and for today.
4. As a user I want to be able to see the breakdown of figures related to gender, age and how the virus is transmitted.
5. As a user I want to be kept up to date with the latest daily figures.

Features

View Daily Coronavirus Figures

The user has the ability to see the new confirmed cases, deaths and recoveries for that day.

View Total Coronavirus Figures

The user has the ability to see the total confirmed cases, deaths and recoveries since the virus first occured in Ireland.

View County Specific Coronavirus Figures

The user has the ability to see the total confirmed cases for each county in Ireland.

Sign Up For Email Updates

The user has the ability to subscribe for daily email updates to see the total new confirmed cases, deaths and recoveries for that day. Note: these daily email updates will be implemented at a later date, for now the emails are just being collected.

Future Goals

There are many useful updates that could be implemented in this project in the future.

Use better datasets

The datasets that were used are very poor quality. A future update would use more accurate and regularly updated datasets

Newsletter

The newsletter requires a backend so a future update would add a backend to this project which emails all subscribers with a daily update. Alternatively a paid plan with an email marketing platform would also work.

Worldwide statistic

This project could be expanded to provide worldwide statistics and a worldwide Interactive SVG map.

News Updates

Another useful feature could be latest news updates from the Irish government, WHO and CDC.

Project Planning

Stage 1 - Implement the genral layout of the dashboard.

Stage 2 - Create bar and pie charts using the chart.js library to display sample data. This data will later be replaced with the latest coronavirus figures.

Stage 3 - Create an interactive SVG map of Ireland, which when a county is hovered over will display sample data. This data will later be replaced with the latest coronavirus figures.

Stage 4 - Use the data.gov APIs to populate the charts and interactive map with the data from the datasets.

Stage 5 - Test robustness of the site and optimize performance and code.

Technologies Used

• HTML
• CSS
• JavaScript
• Bootstrap - to help adapt for numerous input types
• Google Fonts - Fonts from Google
• VSCode - IDE for local development
• GIT - Version Control
• GitHub - to host the repositories for this project and the live
• JQuery - Used to simplify Javascript
• Chart.js - Used to display charts
• data.gov APIs - APIs used to access Coronavirus datasets
• Font Awesome - Used for Icons
• svgMap - GitHub World Map project, modified to work for Ireland
• svg-pan-zoom - JavaScript library that enables panning and zooming of an SVG in an HTML document

Testing

Homepage Testing

Newsletter:

1. Try to submit the empty form and verify that an error message about the required fields appears.
2. Try to submit the form with an invalid email address and verify that a relevant error message appears.
3. Submit the form successfully and verify that a success message appears and the form disappears.

Buttons:

1. Ensure that the button under the graph section navigates the user to the graph page
2. Ensure that the button under the interactive map section navigates the user to the interactive map page
3. Ensure that the hamburger menu button at the top of the page, closes and opens the sidebar. On Desktop the sidebar, when opened should reduce the width of the content area but on mobile the sidebar should overlay on top of the content area.

Sidebar:

1. Ensure that when the Dashboard link is clicked, that two additional pages, Graphs and Interactive Map, are displayed
2. Ensure that links direct the user to the appropriate page.

Graphs Testing

Statistics:

1. Ensure that the values being displayed, match the values of the dataset on the date specified next to Last Updated.
2. Ensure that Graphs Move to a single column row on mobile.
3. Ensure that graphs are being rendered.

Buttons:

1. Ensure that the hamburger menu button at the top of the page, closes and opens the sidebar. On Desktop the sidebar, when opened should reduce the width of the content area but on mobile the sidebar should overlay on top of the content area.

Sidebar:

1. Ensure that when the Dashboard link is clicked, that the Graphs and Interactive Map links are hidden
2. Ensure that links direct the user to the appropriate page.

Interactive Map Testing

Map:

1. Hover over each / Hold down on each county and ensure that the tooltip is being displayed.
2. The tooltip should display a "No Data Available" message when hovering over counties in Northern Ireland
3. The tooltip should display the confirmed cases when hovering over counties in Republic of Ireland. There is currently no data available for 'Active', 'Deaths' and 'Recovered'
4. When double clicking/tapping the map should zoom in.
5. Click and drag / hold and drag to pan.

Buttons:

1. Click the '+' button and ensure that the map zooms in.
2. Click the '-' button and ensure that the map zooms out.
3. Ensure that the hamburger menu button at the top of the page, closes and opens the sidebar. On Desktop the sidebar, when opened should reduce the width of the content area but on mobile the sidebar should overlay on top of the content area.

Sidebar:

1. Ensure that when the Dashboard link is clicked, that the Graphs and Interactive Map links are hidden.
2. Ensure that links direct the user to the appropriate page.

Issues

Open Issues

The list below displays the current open issues with the project:

1. There appears to be an issue with the dataset that is used for the Graphs page as the value for the daily confirmed recoveries is the same as the total confirmed recoveries.

2. To send a daily newsletter I would either need a backend to send the newsletter at a specific time each day or I would have to use a paid plan on an email marketing platform such as Mailchimp.

3. The dataset for populating the county data does not contain any data for deaths or recoveries even those these parameters are available.

4. Could not use JQuery on charts.js and interactive_map.js as they the following error was thrown

Uncaught SyntaxError: Unexpected token 'export'

From researching it seems like maybe JQuery is not supported by ES6

5. The dataset for populating the county data does not contain any data for Northern Ireland.

Closed Issues

The list below displays the current closed issues with the project:

1. Renaming files cause issues with GitHub. Locally, case did not matter but it mattered on GitHub pages so some files were not being referenced properly.

2. The APIs from data.gov did not have an easy way to get the latest days data. For the Graphs data I had to make an API call which sorted the data by Date descending. This allowed me to take the 1st element from the data array to get all the data related to the latest date. For the interactive map I had to make an API call which sorted the data by TimeStamp descending. This allowed me to take the 1st 26 elements from the data array to get all the data related to the latest date for each of the 26 counties of Ireland.

3. The svgMap project did was developed for a map of the globe and each country was an element. I needed to refactor this whole project so that it used a map of Ireland and each county was an element.

4. The tooltip did not get displayed when using a touch enabled device. This is a bug from the svgMap project. I have fixed this issue and also pushed a fix to the repo for the original project.

How to Run Project Locally

To run this project in a local environment, you first need to clone this project from GitHub:

1. Copy the clone URL for the repository by using the "Clone or download" button at the top right of the repo.
2. In a command line, navigate to the directiory you want to clone the repo to and type the following command: git clone https://github.com/Jakejamesreid/Coronavirus_Dashboard.git
3. To run the project I use a VS Code addon called "Live Server". This allows you to launch a development local Server with a live reload feature for static & dynamic pages.

Building svgMap for Source

If changes are made to the svgMap project, the project should be built using Gulp

1. Navigate to the interactiveSVG folder
2. Install Gulp with the following command:

$ npm install gulp

3. Build the project using:

$ gulp build

Deployment

Steps for GitHub Pages deployment:

1. Go to the Settings for the project.
2. Scroll down until you see the GitHub Pages section.
3. Under the Source heading, click the drop-down menu and select Master Branch
4. Scroll back down to the GitHub Pages section and copy the depoyment link to the description of the repository.

Credits

Data

The data for this project was gotten from the data.gov.ie website:

• The dashboards' chart data is obtained from Irelands open data portal: CovidStatisticsProfileHPSCIrelandOpenData
• The dashboards' interactive map data is obtained from Irelands open data portal: Covid19CountyStatisticsHPSCIreland

Media

The photos used in this site were obtained from:

• Favicon
• Sidebar Image

Acknowledgements

I received inspiration for the design of the website from:

• General layout
• Layout elements
• News Letter Sign Up

I used the following websites for reseach:

• Used for understanding async functions
• Get key for specific value
• Toggle form success and error messages
• Loader

Attribution

This project makes use of the svgMap project created by Stephan Wagner which creates an SVG map to display the GDP values for each country. I modified this project to display the coronavirus statistics for each county in Ireland. svgMap uses svg-pan-zoom by Anders Riutta.

Also a special thanks to my mentor Akshat Garg for his help and advice during this project.