I've recently open-sourced a new 📈 Coronavirus (COVID-19) Dashboard which 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".
Here is how the main function looks like:
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 display the data I've used Charts.js to draw the chart and Bootstrap Table to display a sortable, searchable, and clickable data table.
Main Functionality
The dashboard is still raw but it provides the basic functionality of displaying the global and per-country data charts.
For example here is how Global dynamics of confirmed/recovered/deaths use-cases looks like as for March 23rd:
Here we may see positive dynamics for China (Hubei):
We may also compare Italy to Spain:
The regions are displayed in sortable, searchable, and clickable data-table:
Known issues
The following functionality is not implemented yet but it would improve the usability of the dashboard:
- Grouping the regions by countries to see aggregated statistics for the whole US, China, etc. (for now statistics for the US is split by states)
- Resetting the regions/countries selection by one click
- Putting the selected filters to the URL so that the dashboard link would be sharable (with pre-selected filters)
Oldest comments (116)
Nice. I love the chart functionality.
I've got one too, It's a little on the minimal side of things though
Covid-19 Counter
Minimalistic but very nice, thanks for sharing.
Thanks
Good job!
Hi Siddharth, can you tell me how to get the data source?
the data source is a server that's scraping worldometers
Looks great! Just one tiny bug I found.. Pagination doesn't reset when searching.
e.g: Type "Tu" and it shows 4 results and "17" pages.
Oh thanks, Will be fixed today
Thanks for reporting the bug! Do you mean that countries table height is not being changed when, let's say, it is only two countries found as a search result?
That was for me, hahah
Sorry Oleksii! I meant to reply to only Sid's comment (I was referring to his app, not yours).
Your app works great btw, and I've already shared it :)
Haha! I see now :D
Great work! Would love to share mine too, coronavirus-epidemic.com
(Should be pandemic though! ) You can also read about it here coronavirus-covid-19-dashboard-wit...
Nice one!
Looks really pretty.
With Brave Browser the site didn't come up.
It works with Chrome instead.
I will definitely try on BB which i'm less familiar with.
Thank you for your comment!
I just tested it on BB, looks like its blocking for some security tracking reason (analytics/api) or because the name of the domain includes the word virus.. You can also check this link instead.
Thanks for your reply and the alternate link.
This is so beautiful! Nice work!
This is cool. What tools did you use to create this?
For backend I used TypeScript + Node.js, and for the frontend I used HTML, CSS, jQuery and lots of jQuery Plugins & Widgets
nice job! can you add a filter by continent? it's interesting expose the worst country of the continent by fatalities rate.
Thank you & this is a great idea :) !
You can get a more detailed view of corona here if you like: bing.com/covid
Can you tell if there's a free API to use with that?
Sorry, I dont know...
Theres a json with all the informations inside - bing.com/covid/data
So you should be able to consume that data.
I don't know which restrictions exists.
Though this app (bing.com/covid) is UX/UI-friendly, data are outdated. Take caution when using it. At the moment I am writing this, The global situation is 1,503,900 confirmed from here but from their site.
Another test, the situation in the DRC is 207 from this other source but 180 from our beautiful bing.com.
great work.
I have some questions
Thanks
Hey @chan_austria777 ! Thank you for the feedback :) I created a post of my own with all the details - feel free to check it - coronavirus-covid-19-dashboard-wit...
thanks
Well done!
Well done!
Which API did you use?
Thanks in advance
It's a personal scraper that's reading data off of worldometer.info
The Chart functionality is very cool!
Can you please let me know if you can associates with github.com/open-source-ideas/open-...
manishfoodtechs@gmail.com
Manish, could you please clarify what do you mean by association with the open-source-ideas project?
Oleksii, I need few friends to join as backer or founding members for this project. Refine idea and structure. I am alone struggling with it
I hope you'll find someone who will help you with the project
Yeah, I can't distinguish between the deaths and one country and deaths in another, though I happen to know that Italy has the most deaths. It would be helpful if different countries were colored differently. But this is cool!
The fix was made recently, so now when you select several countries the confirmed/recovered/deaths charts will have slightly different shades (for now 5 different shades for each chart are supported).
Btw that fix was made by the community. The power of open-source, so to say :)
I've got mine as well. I thought of using charts but sadly I could not :(
COVID-19 web dashboard
Nice panel also!
The charts are nice, but with spreading like with the corona virus, it would be helpful if the scale was logarithmic, since the spreading of the virus is logarithmic. It would be cool if you could toggle between logarithmic and linear
Very good idea, Patrick. I've created an issue for that github.com/trekhleb/covid-19/issue...
When comparing two countries, it would be nice if one of them could move to a secondary axis. That way we can compare the shape of the two, instead of the absolute numbers.
And additionally, adding a (negative) offset to one of the two would be awesome as well, so we can overlay them.
Thanks Stephan, that functionality might be useful!
Very nice tool.
It would be a good idea to add the filters in the url to be able to share the url with the filters.
That's a very good idea! I've already created an issue for that github.com/trekhleb/covid-19/issues/3
Logarithmic scale for COVID-19 registered/recovered/deaths charts is now supported in the dashboard. Log scale makes it easier to compare the trends for countries with huge difference in absolute numbers.
📈 trekhleb.github.io/covid-19/
Nice work Oleksi, however, you are actually log-transforming the values, and not using the log scale. In log scale, the values are spaced according to the logarithm, however they are still the original values. Read on the different approaches here: people.umass.edu/whopper/posts/log...
Your solution loses interpretability.
Thanks for reporting that! I've created an issue here github.com/trekhleb/covid-19/issue...