https://github.com/brayvid/covidreportnyc

View the latest Covid-19 case, hospitalization, and death trends for NYC in a simple web interface.
https://github.com/brayvid/covidreportnyc

chart-js covid-19 dashboard netlify new-york-city open-data public-health web-app

Last synced: 24 days ago
JSON representation

View the latest Covid-19 case, hospitalization, and death trends for NYC in a simple web interface.

• Host: GitHub
• URL: https://github.com/brayvid/covidreportnyc
• Owner: brayvid
• Created: 2020-11-15T11:51:14.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2024-10-15T06:59:30.000Z (4 months ago)
• Last Synced: 2024-11-12T12:18:57.912Z (3 months ago)
• Topics: chart-js, covid-19, dashboard, netlify, new-york-city, open-data, public-health, web-app
• Language: HTML
• Homepage: https://covidreportnyc.netlify.app/
• Size: 4.88 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Covid Report NYC Dashboard

https://covidreportnyc.netlify.app/

This website fetches recent Covid-19 data from [NYC Health Department](https://github.com/nychealth/coronavirus-data), displays key statistics for the last few days (cases, hospitalizations, deaths), and plots a scatter chart to visualize the trend of cases over the last 30 days. All functionality is on the client-side.

### Architecture

1. **Fetch and Parse CSV Data:**

- The `getDataCSV` function is responsible for fetching a CSV file from a remote URL: `https://raw.githubusercontent.com/nychealth/coronavirus-data/master/trends/data-by-day.csv`.

- An `XMLHttpRequest` is used to send an asynchronous HTTP GET request to retrieve the CSV data.

- Once the request is successful (HTTP status 200), the function verifies if the response is of type `text/csv`.

- The CSV data is parsed by splitting the response into lines and using a helper function (`getCsvValuesFromLine`) to break each line into individual values (CSV columns).

- The parsed data is stored in a global variable `days`.

2. **Display Latest Data:**

- The function retrieves the 7-day average of cases, hospitalizations, and deaths, from the parsed CSV data.

- It extracts the most recent three entries: one for each metric—cases, hospitalizations, and deaths.

- These values are then inserted into HTML elements (with IDs `cases`, `hosp`, and `deaths`) to display the data on a web page.

3. **Generate a Scatter Plot:**

- The `scatterPlot` function takes the most recent 30 days of case count data (7-day averages) and creates an array of objects with `x` (representing days relative to today) and `y` (representing case count averages).

- This data is then plotted as a scatter chart using Chart.js. The x-axis represents the days (from -30 to 0), and the y-axis shows the number of cases.

- The chart is rendered on an HTML canvas element with the ID `myChart`.

4. **Helper Function for CSV Parsing:**

- `getCsvValuesFromLine`: This helper function splits a CSV line by commas and removes any quotation marks (`"`) around the values.