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)
Latest comments (116)
Great job!
I would like to share our simple Coronavirus API and embeddable web widgets.
After placing a widget on a website, it shows live statistics local to a visitor depending on one's location automatically.
This is brilliant, thanks! I'm wondering, is there a simple way to show just the top 3 boxes? I'd like to embed the Confirmed / Recovered / Deaths counter for the US on a page.
So this URL: trekhleb.github.io/covid-19/?selec...
Basically this with your footer of course.
I poked around the code and didn't see an easy way not to display the graph, search / filter bar and the region list.
Any pointer would be greatly appreciated!
Hey Alex,
Unfortunately its not customisable at the moment.
Great job.
I am a bit curious, I have built also such an app (though I have not yet merged the last PR) using the same source. But I have some issues:
This is the link to the API I am using.
Hi Abel,
I guess the data that you might be interested in is in csse_covid_19_time_series folder. To display the aggregated data for US I believe you might want to sum up the data from each state.
Hi,
I thank you so much for the link.
You're right about US data, I just thought of it after I have submitted my request.
Great work Oleksii!
I added your dashboard in covid-19-coronavirus.tools, a web app create by me, with a curated list of dashboard and data about coronavirus disease. I hope you appreciate.
Thanks Gianluca!
Very nice UI, I focused more on the back end inspired to ramp up my front end after looking at yours covid-dashboard.herokuapp.com/
hello! If you don't mind check this I worked on last night
covid19-606ca.web.app
I really liked your UI, here is a simple version that I built using Spring Boot covid-dashboard.herokuapp.com/
I like your vision - country comparison is something I wanted to build, as well.
Why no JSX though?
I quickly had a look at the code because I was considering contributing a few features. But I wonder if the slightly unusual approach (no JSX) will put people off.
That's a good point! I like JSX and for "long-term", "big team", "complex" project would definitely go with JSX rather than with plain JS. The reason why I chose a plain JS at first is because I wanted the dashboard source-code to be dead-simple (one HTML file, one JS file and no NPM and compilers). But yeah, for now, while adding a new features I have some doubts about plain JS. But with current dashboard complexity I believe it is still bearable.
Love it. Not that we need another one but I'm going to start work on my version of a dashboard. In such horrible circumstances like this pandemic it's amazing how it can be used a learning activity.
One question, did you consider using D3.js, I've looked at chart JS in the past and thought it was great but I hear D3 is more full featured?
Also, is there an API for this data? Or did you need to do some extra work? I had a brief look around the source you linked before couldn't find anything.
Yes, I've considered to use D3.js since I believe it is much more customisable and powerful. However I've switched to Chart.js for now just for simplicity reasons and deliver the chart faster. But in the future I believe D3 might be a very good option.
I've linked the datasource for the dashboard at the bottom of the page, it is "Novel Coronavirus (COVID-19) Cases, provided by JHU CSSE" (github.com/CSSEGISandData/COVID-19)
nice job! this is my contribuition for Brazil mapacoronavirus.github.io