Code Monkey home page Code Monkey logo

covid-19's Introduction

Coronavirus (COVID-19) Dashboard

📈 Coronavirus (COVID-19) Dashboard shows the dynamics (the curvature of the graph) of Сoronavirus distribution per country.

Reasoning

The reason for creating a new dashboard was to complement the well-known JHU Dashboard (which is made by Johns Hopkins CSSE) with the feature of seeing the charts with the number of COVID-19 confirmed / recovered/ deaths use-cases per country.

Basically I personally had a question like: "What about the Netherlands/Ukraine?", "Is the virus spread (growth factor) slowing down?", "How I can compare the recovered/deaths dynamics per-country?", "Which countries are doing the proper things to slow down the growth-factor".

Main Functionality

The dashboard is still raw but it provides a basic functionality of displaying the global and per-country data charts.

Here is how the main functionality looks like:

COVID-19 Dashboard Demo

Data source and tech-stack

The dashboard is using COVID-19 (2019-nCoV) Data Repository by Johns Hopkins CSSE as a data source.

Front-end wise I've tried to make it as simple as possible, therefore the dashboard is using a pure React.js (without JSX transpiler or CreateReactApp starter). To draw the chart I've used Charts.js.

Terms of Use

This GitHub repository and its Dashboard relies upon publicly available data from COVID-19 (2019-nCoV) Data Repository by Johns Hopkins CSSE as its main data source. The author of this repository hereby disclaims any and all representations and warranties with respect to the Website, including accuracy, fitness for use, and merchantability. Reliance on the Website for medical guidance or use of the Website in commerce is strictly prohibited.

covid-19's People

Contributors

hugosoftdev avatar jayjaybinks avatar kylegrover avatar rafalgrm avatar trekhleb avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

covid-19's Issues

Page goes blank when selecting Canadian province

Steps to reproduce:

  1. Uncheck "group by countries"
  2. Search for "Canada"
  3. Check the checkbox to select any Canadian province

I haven't been able to find any other sub-national regions (Chinese provinces, US states, etc) that cause this issue. Just Canadian provinces so far.

Console output:

Uncaught TypeError: Cannot read property 'length' of undefined
    at data.js:204
    at Array.reduce (<anonymous>)
    at getTotalCount (data.js:202)
    at DataType (index.js:196)
    at renderWithHooks (react-dom.development.js:14938)
    at updateFunctionComponent (react-dom.development.js:17169)
    at beginWork (react-dom.development.js:18745)
    at HTMLUnknownElement.callCallback (react-dom.development.js:182)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:231)
    at invokeGuardedCallback (react-dom.development.js:286)
(anonymous) @ data.js:204
getTotalCount @ data.js:202
DataType @ index.js:196
renderWithHooks @ react-dom.development.js:14938
updateFunctionComponent @ react-dom.development.js:17169
beginWork @ react-dom.development.js:18745
callCallback @ react-dom.development.js:182
invokeGuardedCallbackDev @ react-dom.development.js:231
invokeGuardedCallback @ react-dom.development.js:286
beginWork$1 @ react-dom.development.js:23338
performUnitOfWork @ react-dom.development.js:22289
workLoopSync @ react-dom.development.js:22265
performSyncWorkOnRoot @ react-dom.development.js:21891
(anonymous) @ react-dom.development.js:11224
unstable_runWithPriority @ react.development.js:2685
runWithPriority$1 @ react-dom.development.js:11174
flushSyncCallbackQueueImpl @ react-dom.development.js:11219
flushSyncCallbackQueue @ react-dom.development.js:11207
flushPendingDiscreteUpdates @ react-dom.development.js:21982
flushDiscreteUpdates @ react-dom.development.js:21962
finishEventHandler @ react-dom.development.js:761
batchedEventUpdates @ react-dom.development.js:795
dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3691
attemptToDispatchEvent @ react-dom.development.js:4390
dispatchEvent @ react-dom.development.js:4312
unstable_runWithPriority @ react.development.js:2685
runWithPriority$1 @ react-dom.development.js:11174
discreteUpdates$1 @ react-dom.development.js:22022
discreteUpdates @ react-dom.development.js:803
dispatchDiscreteEvent @ react-dom.development.js:4291
react_devtools_backend.js:6 

The above error occurred in the <DataType> component:
    in DataType (created by DataTypes)
    in form (created by DataTypes)
    in DataTypes (created by App)
    in div (created by App)
    in div (created by App)
    in App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

Per capita, for each metric

Since we're comparing countries of vastly different sizes, per capita figures can be much more informative. By pulling the population data from the UN or elsewhere we could provide:

  • confirmed per capita per country
  • recovered per capita per country
  • deaths per capita per country
  • and perhaps active cases per capita per country

mortality miss-concept

First of all, congratulations for the dashboard, I really liked it!

There is a problem that I noticed and that has been very common in the covid-19 dashboards, a misinterpretation of the concept of mortality. Mortality is a measure of the number of deaths (usually or due to a specific cause) in a population scaled to the size of that population per unit of time. The correct name of the metric being represented by this dashboard is lethality.

Add "Active cases"

I know it's Confirmed-Recovered, but it would be nice to see Active cases on the graph.
Thanks.

Show estimated infection rate

To the right of the data rows, could we add a row to estimate the mortality rate? It would be interesting to see how that coincides based on other reports and by country and globally.
Probably just in a format like deaths/confirmed=%
or would it be deaths/(confirmed - recovered)=% ?

Add filter by date range

Feature request

Some countries have a delay in infection, an option to make possible to choose the start date is very important to demonstrate the proportion of numbers.

Feature Request: Add a selectable Date for Start analysis

Since the start dates of the infection is in most countries are different will it be possible to add a date for start selectable ?
That would make the analysis more friendly and conclusive.
Eventually a date for end would be a win too.

Feature Request: see increments-per-day

Even more than the absolute number it would be useful to see the new cases / recoveries / deaths per day.

I might find some time to work on this on the following days.

Add how many have been tested

I'm not sure if this is possible, since they might only have testing data for the US, but it would be very nice to be able to see how many people have been tested and what percentage tested positive/negative as seen here: https://covidtracking.com/data/

They do appear to have an API.

Display the confirmed/recovered/deaths cases per capita

According to the comment from Thomas Soos here: https://dev.to/thomassalty/comment/n59a

There's one thing I always think about seeing these numbers which is the percentage of cases according to the population of the countries. Because let's say 80.000 cases in China is very different from 80.000 cases in Italy, whose population is much, much less. So in my opinion, it would be a nice addition to see the percentages in the Bootstrap Table in a new column.

unescaped user input

typing ie / or + into the 'Search country' field crashes the app
problem occurs @ index.js:372 new RegExp(countrySearchQuery.trim(), 'i')

Different graph colors for countries

First, thanks for this, this is very useful.
The graphs for "confirmed", "deaths" and "recovered" are always yellow, red and green. This gets a bit confusing once you want to compare several countries.
I'm sure you've thought about this problem already. Maybe generate different shadings per country?
Thank you for considering!

Chart

Make an option to get chart to show from the start showing a country ex: "USA"

Color on graph

Hello! Color on graph and "Last update" should be the same?

Estimate total active infections from deaths & recoveries

This would require some assumptions about case fatality rate and average time from infection to case resolution. A good starting point might be 1% CFR, 1 week from infection to confirmation, 2 weeks from confirmation to resolution - ie estimated infections 21 days ago = deaths today * 100. Maybe we could also provide sliders to see how those assumptions impact the graph.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.