Project: Covid-19 Data Dashboard

0. Project Set-up

Get your starter code and project set up here

1. Project Summary

In this project, you will build an interactive data dashboard that provides meaningful insights into the COVID-19 pandemic based on given data. The dashboard will display data related to cases, deaths, and recoveries, and allow users to filter and sort this data by country or date.

2. Learning Objectives

This project aims to practice your skills in:

  • JavaScript ES6 array methods (map, filter, sort, forEach, reduce, etc.)
  • Data manipulation and presentation
  • Creating responsive and interactive UIs using CSS Flexbox

3. Project Description

The COVID-19 data dashboard will consist of the following features:

  • Display Total Statistics: Show the total cases, deaths, and recoveries for a specific set of countries.
  • Filter by Country: Allow users to type a country name in an input field to view its data.
  • Filter by Date: Allow users to select a month or a year to view data specific to that period.
  • Sort by Cases, Deaths, Recoveries: Allow users to sort the data based on the number of cases, deaths, or recoveries.

Your aim is not only to write functional code but also to create a user-friendly and visually appealing dashboard. Be creative!

4. Milestones

Milestone 1: Display Total Statistics

  • Display stats on your dashboard for 20 provided countries.

Milestone 2: Implement Country Filter

  • Add an input field to allow users to type the name of a country. Make sure to handle cases where users type in lowercase, uppercase, or a combination of both.
  • Display data for the selected country when a valid name is entered.

Milestone 3: Implement Date Filter

  • Add buttons or a dropdown menu to allow users to select a month or a year.
  • Display data for the selected period when a valid date is chosen.

Milestone 4: Implement Sorting

  • Add clickable table headers that allow users to sort countries based on the number of cases, deaths, or recoveries.

Milestone 5: Bonus

  • Use a library like D3.js to implement more graphs that use the same data. Maybe a bar or pie graph. Show off your skills.

5. Workspace Setup and Resources

We'll provide the JSON data, which includes information about the COVID-19 pandemic for 20 countries over 12 months.

6. Delivery

  • The project should be pushed to your GitHub repository: include all code files, a screenshot of your dashboard, and a README that includes an overview of your project, challenges you faced, solutions you found, and what you learned during the project.