DEV Community

Cover image for 📈 I've open-sourced a simple Coronavirus (COVID-19) dashboard (React + Chart.js + BootstrapTable)

📈 I've open-sourced a simple Coronavirus (COVID-19) dashboard (React + Chart.js + BootstrapTable)

Oleksii Trekhleb on March 23, 2020

I've recently open-sourced a new 📈 Coronavirus (COVID-19) Dashboard which shows the dynamics (the curvature of the graph) of Сoronavirus distributi...
Collapse
 
barelyhuman profile image
Reaper • Edited

I've got one too, It's a little on the minimal side of things though
Covid-19 Counter

Collapse
 
otomer profile image
Tomer Ovadia • Edited

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...

Collapse
 
chan_austria777 profile image
chan 🤖

great work.

I have some questions

  • How did you get all those list of countries with the flag icons? did the icons come along with the api?
  • As i see it, it defaults the the viewer's country, how did you do that?
  • How do you sync the results in the background?

Thanks

Thread Thread
 
otomer profile image
Tomer Ovadia • Edited

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...

Thread Thread
 
chan_austria777 profile image
chan 🤖

thanks

Collapse
 
barelyhuman profile image
Reaper

This is so beautiful! Nice work!

Collapse
 
jamosch profile image
jamosch

Looks really pretty.
With Brave Browser the site didn't come up.
It works with Chrome instead.

Thread Thread
 
Sloan, the sloth mascot
Comment deleted
 
otomer profile image
Tomer Ovadia

I will definitely try on BB which i'm less familiar with.
Thank you for your comment!

Thread Thread
 
otomer profile image
Tomer Ovadia

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.

Thread Thread
 
jamosch profile image
jamosch

Thanks for your reply and the alternate link.

Collapse
 
trekhleb profile image
Oleksii Trekhleb

Nice one!

Collapse
 
firesidecode profile image
Goodnews Oguguo

This is cool. What tools did you use to create this?

Thread Thread
 
otomer profile image
Tomer Ovadia

For backend I used TypeScript + Node.js, and for the frontend I used HTML, CSS, jQuery and lots of jQuery Plugins & Widgets

Collapse
 
hackergaucho profile image
Hacker Gaucho

nice job! can you add a filter by continent? it's interesting expose the worst country of the continent by fatalities rate.

Thread Thread
 
otomer profile image
Tomer Ovadia

Thank you & this is a great idea :) !

Thread Thread
 
hilleer profile image
Daniel Hillmann

You can get a more detailed view of corona here if you like: bing.com/covid

Thread Thread
 
otomer profile image
Tomer Ovadia

Can you tell if there's a free API to use with that?

Thread Thread
 
hilleer profile image
Daniel Hillmann

Sorry, I dont know...

Thread Thread
 
jamosch profile image
jamosch

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.

Thread Thread
 
bam92 profile image
Abel Lifaefi Mbula

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.

Collapse
 
eerrecalde profile image
Emiliano

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.

Collapse
 
trekhleb profile image
Oleksii Trekhleb

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?

Thread Thread
 
barelyhuman profile image
Reaper

That was for me, hahah

Thread Thread
 
eerrecalde profile image
Emiliano • Edited

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 :)

Thread Thread
 
trekhleb profile image
Oleksii Trekhleb

Haha! I see now :D

Collapse
 
barelyhuman profile image
Reaper

Oh thanks, Will be fixed today

Collapse
 
johnnyjamesnavarro profile image
Johnny Navarro

Minimalistic but very nice, thanks for sharing.

Collapse
 
barelyhuman profile image
Reaper

Thanks

Collapse
 
sakibulislam profile image
Sakibul Islam

Well done!

Collapse
 
trekhleb profile image
Oleksii Trekhleb

Good job!

Collapse
 
sakibulislam profile image
Sakibul Islam

Well done!

Collapse
 
hansfpc profile image
Hans Piña

Hi Siddharth, can you tell me how to get the data source?

Collapse
 
barelyhuman profile image
Reaper

the data source is a server that's scraping worldometers

Collapse
 
mfsiat profile image
Md. Nasirul Islam

Which API did you use?
Thanks in advance

Collapse
 
barelyhuman profile image
Reaper

It's a personal scraper that's reading data off of worldometer.info

Collapse
 
trekhleb profile image
Oleksii Trekhleb

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/

Log scale demo gif

Collapse
 
indykpol profile image
indykpol

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.

Collapse
 
trekhleb profile image
Oleksii Trekhleb

Thanks for reporting that! I've created an issue here github.com/trekhleb/covid-19/issue...

Collapse
 
patricktingen profile image
Patrick Tingen

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

Collapse
 
trekhleb profile image
Oleksii Trekhleb

Very good idea, Patrick. I've created an issue for that github.com/trekhleb/covid-19/issue...

Collapse
 
jennschiffer profile image
jenn schiffer • Edited

this is great, the subtle chart js animation on load make this look really slick without overshadowing the story the data is telling. and thanks for open sourcing this - i got this running v quickly on glitch at trekhleb-covid-19.glitch.me/ and i'm going to get it added to this collection of covid-19 related apps other folks have been making on glitch.

Collapse
 
hackergaucho profile image
Hacker Gaucho
Collapse
 
trekhleb profile image
Oleksii Trekhleb

Thanks for sharing it, Jenn!

Collapse
 
smeijer profile image
Stephan Meijer

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.

Collapse
 
trekhleb profile image
Oleksii Trekhleb

Thanks Stephan, that functionality might be useful!

Collapse
 
dogsj profile image
DogSJ

Should try SIR model for each country in order to see where we are in the SIR model graph and what to expect in the future, I mean the time where the infected people rate will start to decrease.

Just an idea.

Congrats and regards : D

Collapse
 
trekhleb profile image
Oleksii Trekhleb

Yeah, it would be really nice to implement some sort of a prognosis for that data.

Collapse
 
zakwillis profile image
zakwillis

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.

Collapse
 
deno2 profile image
Dene Simpson

Exactly. If you have any luck please let me know and I will do the same.

Collapse
 
thomassalty profile image
Thomas Soos

It's a really cool idea Oleksii, well done!

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. Anyhow, good job and keep it up!

Collapse
 
trekhleb profile image
Oleksii Trekhleb

Very good idea Thomas! I've created another issue for that in Dashboard repo: github.com/trekhleb/covid-19/issue...

Collapse
 
kokaneka profile image
kapeel kokane

Created a similar one using ant UI and bizcharts:
kokanek.github.io/corona-tracker/

Collapse
 
trekhleb profile image
Oleksii Trekhleb

Nice one!

Collapse
 
hackergaucho profile image
Hacker Gaucho

what does "percentage increase" mean?

Collapse
 
kokaneka profile image
kapeel kokane

A measure of the increase in the number of cases in the last day compared to total cases.

Collapse
 
oliviermilo profile image
Olivier Milovanovitch

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.

Collapse
 
trekhleb profile image
Oleksii Trekhleb

Good suggestion! There is an issue reported for that already github.com/trekhleb/covid-19/issue...

Collapse
 
bam92 profile image
Abel Lifaefi Mbula

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:

  • I can't find daily data from that source, how do you do to get them? This repo has many sources, I don't know which one is a good fit.
  • Info about US is put by state, this is not good for me. It would be ok to just have US displayed once. For that reason, I am thinking of switching to another API.

This is the link to the API I am using.

Collapse
 
trekhleb profile image
Oleksii Trekhleb

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.

Collapse
 
bam92 profile image
Abel Lifaefi Mbula

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.

Collapse
 
fullstackcoder profile image
fullstackcoder

Excellent job! I built a covid-19 dashboard last week, mainly for demo purposes:
coronapp19.netlify.com/

Collapse
 
siddharthchillale profile image
Siddharth Chillale

Good one. Could use more analysis and charts. I made a dashboard too using Dash-Plotly in Python.
Check it out here COVID-19-VISUAL

Collapse
 
liama482 profile image
Liam A.

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!

Collapse
 
trekhleb profile image
Oleksii Trekhleb

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 :)

Collapse
 
conermurphy profile image
Coner Murphy

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.

Collapse
 
trekhleb profile image
Oleksii Trekhleb

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)

Collapse
 
mikeborozdin profile image
Mike Borozdin

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.

Collapse
 
trekhleb profile image
Oleksii Trekhleb

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.

Collapse
 
slotix profile image
Dmitry Narizhnyhkh

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.

Collapse
 
bostonalex profile image
Alex • Edited

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.
dashboard

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!

Collapse
 
trekhleb profile image
Oleksii Trekhleb

Hey Alex,
Unfortunately its not customisable at the moment.

Collapse
 
hackergaucho profile image
Hacker Gaucho • Edited

nice job! this is my contribuition for Brazil mapacoronavirus.github.io Mapa do Coronavírus no Brasil

Collapse
 
itmeaboutstuff profile image
Peter C

Great job! really useful.

Collapse
 
maurya-anand profile image
Anand

Your work is really inspiring.
I am a beginner and here's a minimal dashboard created by me:
covidlive.herokuapp.com/

Collapse
 
manishfoodtechs profile image
manish srivastava • Edited

Can you please let me know if you can associates with github.com/open-source-ideas/open-...

manishfoodtechs@gmail.com

Collapse
 
trekhleb profile image
Oleksii Trekhleb

Manish, could you please clarify what do you mean by association with the open-source-ideas project?

Collapse
 
manishfoodtechs profile image
manish srivastava

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

Thread Thread
 
trekhleb profile image
Oleksii Trekhleb

I hope you'll find someone who will help you with the project

Collapse
 
samthomson profile image
Sam Thomson

Nice work.

Collapse
 
clozach profile image
Chris Lozac'h

Nice work, @trekhleb ! If you're interested in alternate visualizations to incorporate, this Minute Physics video may be of interest: youtube.com/watch?v=54XLXg4fYsc

Collapse
 
trekhleb profile image
Oleksii Trekhleb

Thanks for the video, Chris!

Collapse
 
core2duo12 profile image
core_2_duo

Nice. I love the chart functionality.

Collapse
 
berns_churches profile image
Berns Fire Death

The Chart functionality is very cool!

Collapse
 
laurence profile image
laurence

Thanks for sharing. Checking it out. I wonder which places do not have reported cases?

Collapse
 
trekhleb profile image
Oleksii Trekhleb

Yeah, for now the list contains only the countries with registered cases. Unfortunately it isn't possible to check it by means of the dashboard

Collapse
 
laurence profile image
laurence

No problem, enjoy "evolving" the dashboard.

Collapse
 
valeriopisapia profile image
Valerio

Nice one man!

Collapse
 
gtobar profile image
Guillermo Tobar

Oleksii, Very good job !!

I would have liked to participate in a project as well done as this one. Thanks for making it open source.

Collapse
 
kometen profile image
Claus Guttesen • Edited

Nice. Can you add death per million inhabitants?

Collapse
 
trekhleb profile image
Oleksii Trekhleb

This is a good point. There is an issue for that has been created github.com/trekhleb/covid-19/issue...

Collapse
 
biuni profile image
Gianluca Bonifazi

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.

Collapse
 
trekhleb profile image
Oleksii Trekhleb

Thanks Gianluca!

Collapse
 
ittahad profile image
Ittahad Uz Zaman

I've got mine as well. I thought of using charts but sadly I could not :(

COVID-19 web dashboard

Collapse
 
trekhleb profile image
Oleksii Trekhleb

Nice panel also!

Collapse
 
jamosch profile image
jamosch

I really like your way of handling this pandemic situation.
Nice work.

Collapse
 
fazzabi profile image
Fares Azzabi

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.

Collapse
 
trekhleb profile image
Oleksii Trekhleb

That's a very good idea! I've already created an issue for that github.com/trekhleb/covid-19/issues/3

Collapse
 
screamz profile image
Andréas Hanss

The logaritmic scale is working strangely

Collapse
 
trekhleb profile image
Oleksii Trekhleb

It is possible that there are bugs in the code. Feel free to create a bug report here github.com/trekhleb/covid-19/issues

Collapse
 
kaki_leela profile image
Leela Sai Lakshmi Kaki

Great work!

Collapse
 
equan profile image
Equan P.

Thanks!

Collapse
 
gdanen profile image
Gerry Danen

I don't use React. How hard/easy is it in plain Javascript?

Collapse
 
trekhleb profile image
Oleksii Trekhleb

Once thing that might be hard to get used to is to have HTML inside JS. With JSX it looks more or less the same, but if you don't plan to use JSX, then React.createElement() (reactjs.org/docs/react-api.html#cr...) will become a new thing.

Collapse
 
codejackdev profile image
Code Jack

hello! If you don't mind check this I worked on last night
covid19-606ca.web.app

Collapse
 
petr7555 profile image
Petr Janik

Great job! I love the fact that all known issues you suggested are already done!

Collapse
 
_juliettech profile image
juliette_chevalier

Very coool! Thanks :)

Collapse
 
dbhaskaran profile image
Deepak Bhaskaran

Try out mine built using Spring boot with a simple UI using JSP covid-dashboard.herokuapp.com/

Collapse
 
dbhaskaran profile image
Deepak Bhaskaran

I really liked your UI, here is a simple version that I built using Spring Boot covid-dashboard.herokuapp.com/

Collapse
 
legzy27 profile image
Legzy27

Great Job!

Collapse
 
diogoleitao profile image
Diogo Leitão

Cool stuff man, nice work!
However... :p
dev-to-uploads.s3.amazonaws.com/i/...

Collapse
 
trekhleb profile image
Oleksii Trekhleb

Whoops :)
There is an issue reported - github.com/trekhleb/covid-19/issues/4
Is this looks similar?

Collapse
 
bdeepak23 profile image
Deepak Bhaskaran

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/

Collapse
 
val09865 profile image
val09865

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

Collapse
 
trekhleb profile image
Oleksii Trekhleb

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.

Collapse
 
bachdx2812 profile image
bachdx

Nicely done!

I also made my version using Vuejs only
behemoth-check-corona-status.netli...