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
Great job! I love the fact that all known issues you suggested are already done!
Great work!
Hello Oleksii, well done on building this. I haven't looked at the source.
My summary on this is we need more granular data on different pandemics and epidemics to let data experts on this site provide the results to people like you. Unfortunately the data this is based off of is from the WHO website - which is lacking granularity.
My major concern with Coronavirus is around the narrative being portrayed, the number of eminent epidemiologists who are stating things like; social distancing doesn't work, that the deaths are truly weighted towards vulnerable people, that the media puts out instances of outliers as major scare stories - i.e. a young woman who is healthy may succumb to Covid-19. Another suspicion I have is that the testing is different in different countries - I worked in a testing laboratory many years ago and there are different tests for the same virus. We may find certain tests being nothing more than generic tests for standard coronavirus or antibody presence. Notice how many famous people are testing positive but having mild symptoms and recovering almost immediately. More concerningly - Tom Hanks - as a diabetic he is in a higher risk and age group.
So, what we have is a lack of granular data. Am certain many data people on this website would agree, and I am seriously concerned from a libertarian perspective we are simply throwing away our liberty off of what is still a very low infection rate. There are always mis-classifications of morbidity in terms of dying "with" or "of" something.
Does it mean we shouldn't self-isolate or minimise contact? The first thing anybody will do is go on Google or Bing to find studies say. We know that Social Media giants are advised and proactive in trying to dispel bad science. If we look hard enough - we find a lot of studies into previous epidemics that counters what the official narrative is. The histograms does show significant numbers of experts questioning our approach.
So, what would be great is if we can get more insightful data on this. I plan to try and find some.
Many thanks.
Exactly. If you have any luck please let me know and I will do the same.
Nice job !
A little bug however : the last point for every time series is missing on the chart compared to what is displayed in the top "current day" labels
I guess the latest point label is hidden, but the data is still displayed. I guess you may check it if you hover the very last point directly on the chart.
Great work Oleksii !!
Any chance you can allow the Y-axis to be viewed per /100 000 inhabitants or (per 1million) for each country? I think it would be far more relevant than a comparison of the absolute number of cases.
Good suggestion! There is an issue reported for that already github.com/trekhleb/covid-19/issue...