Given the current state of events, many websites have been created to summarize the statistics, trends, and predictions of the COVID-19 virus, showing data at the country, state, and county levels, using a combination of maps, tables, graphs (linear and logarithmic scatter plots, bar charts and tree graphs) comparing the spread from region to region.
Your teams task is to use client-side JavaScript, forms, ReactJS, React frameworks, and Firebase to build a COVID-19 website. You may use any additional third-party Web Service APIs, libraries, or modules, provided you comply with the terms of their licenses.
Students will work in teams of 3-4 members, with one member serving as the Team Leader. The choice of Covid-19 website to create is up to the individual team; it will not be assigned. It will, however, require approval from the instructor.
To help you decide on a design, the most popular COVID-19 sites are shown in this document.
All of these sites pull their data from a relatively small number of International, national, and state sites. The top data sources are: BNO, 1point3acres, worldometers.info, the Covid tracking project, CDC. ECDC. WHO. Detailed links for these sites are shown at the end of this document.
All of these sites heavily use tables and graphs. The top 6 React CHART FRAMEWORKS all have a wide variety of examples on their sites, with code. nivo rocks: https://nivo.rocks/#/ (wide variety of data visualization components, built on React)
| React-Vis: | https://uber.github.io/react-vis/ (Ubers large, composable charting library) |
| Victory: | https://formidable.com/open-source/victory/ (range of modular charting components) |
| Recharts: | https://recharts.org/en-US (super simple, well-built, React composable charting library) |
| ChartJS: | https://www.chartjs.org/ (simple, flexible, JS charting library for developers) repackaged as React-chartjs-2: https://github.com/jerairrest/react-chartjs-2 |
| canvasJS: | https://canvasjs.com/react-charts/ |
Data inks on this site drill down
| Bing COVID-19 tracker: Tracks local and global coronavirus cases. https://www.bing.com/covid Includes drill-down by country, state, and county (US examples) |
| More examples from https://www.bing.com/covid |
| Tracking Covid-19 cases in the US: https://www.cnn.com/interactive/2020/health/coronavirus-usmaps-and-cases/ State by state, and county by county. (First graph is a tree graph.) |
| https://coronavirus.thebaselab.com |
| Note the startling speed of spread: https://www.nbcnewyork.com/news/national-international/mapwatch-the-coronavirus-cases-spread-across-the-world/2303276/ |
| From johnhopkins (most websites get their data from here, which in turn gets its data from the Centers for Disease Control (CDC), and the World Health Organization (WHO). https://coronavirus.jhu.edu/us-map |
| Total confirmed cases by county Adjusted by population |
| From the Institute for Health Metrics and Evaluation (Univ. of Washington site supported by Microsoft). https://covid19.healthdata.org/united-states-of-america |
Examples from the Top 5 React Graphing Frameworks
| React-Vis: https://uber.github.io/react-vis/ |
| Victory |
| Recharts: https://recharts.org/ |
Firebase articles you may want to read
| Auto refreshing your Firebase app using Pub/Sub and Cloud Functionshttps://www.unacast.com/post/auto-refreshing-your-firebase-app-using-pub-sub-andcloud-functions |
| https://web.dev/covid19/ Ensure your website is available and usable for everyone during COVID-19. How to ensure the functionality of your website is available, accessible, secure, usable, discoverable, and fast. |
Functionality: Projects must
Use ReactJS and one or more ReactJS frameworks
Use Firebase as the backend
Connect to at least one datasource for showing your statistics
Create a COVID-19 website that shows
- Cumulative confirmed, active, recovered, and died cases
- Current state of the spread of the virus in a table, ranked in descending order
By country, and/or
By states or provinces within a country, and/or
By counties, and/or
By zip codes (mail codes)
- Current state in a graph which updates as the user selects a geographic region
- Recent changes from the previous day, and/or a history of changes in a graph
- Prediction/rate of change (e.g., doubling every 2 days, or halving every 4 days)
- Predicted actual cases (not just confirmed e.g., a possible number is between confirmed * 10 to deaths * 1000). For example, 40,000 confirmed / 900 deaths -> 400,000 to 900,000 actual Provide updates of your statistics throughout the day (at least once/day)
For debugging, allow your data to be downloaded and compared against the sources
Reviews
There are no reviews yet.