This is a work in progress GatsbyJS application for using time-series data from
This site was initially aimed at motivating non technical or non scientific users to start taking the COVID-19 threat seriously, especially if they're in a country that currently has a low case load.
The ability to compare your own countries current case level and see how another country's infection has spread from a similar level seems to "click" for a lot of people, and therefore motivate change.
Since the inital launch the site has had over 10,000 visits. I am now seeing that 40% of the traffic is repeat meaning the initial goals of the project may switch into providing data hungry people better ways of viewing data, and a comprehensive area where we collate multiple segmented datasets into one.
I understand that the comparisons/projections are not the best way of looking at the outbreaks and could lead to incorrect outcomes, so I am actively working on getting data reformulated into culmulative confirmed / death so they can be used on the log graphs that are commonly seen.
Because the site is statically generated we have zero infrastructure costs, and netlify provide all COVID related projects with free hosting too! This is just a conversion of our time into potentially saved lifes by avoiding healthcare system overload.
I am working full time on this 2 days a week
Advanced-countries: Obtain Italy, Spain, French data
Advanced-countries: Implement Regional Overview graph and table seen on New Zealand page to other advacned country pages
Advanced-countries: Implement the date slider. Allowing a user to transition to a historical period in time and see how everything was going
US Index Page: Table and State Level data obtained from http://covidtracking.com/
Insure that the componentry for this is easily extendable to other countries with more granular data, such as Canada and Australia from the JHU dataset
Turn huge index.js file into components, so state changes of specific components don't effect global scope and trigger a full app re-render.
Split site into multiple pages, with each country page (similar to current index) available at c/new-zealand or c/australia
Show well performing comparisons to give people hope (Can now sort by worst or best)
Global State (without redux). The graphQL query on evey route is stupid
Add real data to the start of projection graphs
Create two new Graph Components that showcases:
Create Index Page that showcases the top outbreaks in the world, using the above Graph component, and table of results
Incorporate fancy styling for home page tool tip, and link to countries from tool tip
Ability for site to function offline
Incorporate table of regions on country page (In current us-index branch).
'connect' this table to a comparison graph.
Flip / Flop country overview graph to cumulative view.
Allow adding other countries to country overview cumulative graph if applicable.
Allow cumulative graphs to have dynamic constraints such as:
Backend: Write logic to pull Taiwan and Hong Kong out of China
Open to all collaboration. I specifically need:
If you want to play with the "stack" it is pretty simple assuming that you have node and npm installed.
The node data processing script may be useful for someone.
cd processing
npm install
sh run.shCountries that show multiple provinces in the John Hopkins data are merged together and country population data is appended from /processing/data/population_world_bank.csv
This will create countries.json and cumulative.json files in client/data the formats are:
[
{
"country_name": "Spain",
"time_series": [
...,
{
"date": "2020-03-18T11:00:00.000Z",
"confirmed": 17963,
"deaths": 830,
"recovered": 1107,
"confirmed_per_mil": 384.45117064557473,
"deaths_per_mil": 17.763985505529533,
"recovered_per_mil": 23.692448138097824
},
{
"date": "2020-03-19T11:00:00.000Z",
"confirmed": 20410,
"deaths": 1043,
"recovered": 1588,
"confirmed_per_mil": 436.82282429862386,
"deaths_per_mil": 22.32269503887627,
"recovered_per_mil": 33.98699877443482
},
{
"date": "2020-03-20T11:00:00.000Z",
"confirmed": 25374,
"deaths": 1375,
"recovered": 2125,
"confirmed_per_mil": 543.0642990569957,
"deaths_per_mil": 29.428289241088084,
"recovered_per_mil": 45.48008337259067
},
{
"date": "2020-03-21T11:00:00.000Z",
"confirmed": 28768,
"deaths": 1772,
"recovered": 2575,
"confirmed_per_mil": 615.7040181000887,
"deaths_per_mil": 37.925038934696786,
"recovered_per_mil": 55.111159851492225
}
],
"highest_confirmed": 28768,
"highest_deaths": 1772,
"highest_recovered": 2575,
"population": 46723749
},
][
{
"highest_confirmed": 28768,
"population": 46723749,
"country_name": "Spain",
"confirmed": [
...,
{
"num_day": 18,
"date": "2020-03-19T11:00:00.000Z",
"confirmed": 20410
},
{
"num_day": 19,
"date": "2020-03-20T11:00:00.000Z",
"confirmed": 25374
},
{
"num_day": 20,
"date": "2020-03-21T11:00:00.000Z",
"confirmed": 28768
}
],
"deaths": [
...,
{
"num_day": 13,
"date": "2020-03-19T11:00:00.000Z",
"deaths": 1043
},
{
"num_day": 14,
"date": "2020-03-20T11:00:00.000Z",
"deaths": 1375
},
{
"num_day": 15,
"date": "2020-03-21T11:00:00.000Z",
"deaths": 1772
}
]
}Built in gatsby, pretty hacky react.
To run local development:
cd client
npm install
npm run developGatsby will automatically load the countries data into GraphQL based on the above two files