DEV Community

loading...
Cover image for A simple COVID-19 dashboard I made on the weekend

A simple COVID-19 dashboard I made on the weekend

Pascal Meunier
I'm a passionate Fullstack Web Developer.
・1 min read

I made a simple dashboard over the weekend to monitor the Coronavirus situation.

It all started last friday and I learned a lot on this journey. First I started to mess with jq to convert the CSV files in a more friendly format (JSON). Then I figured that D3.js and Lodash can parse CSV files and transform the data on the fly. 🤯

Soon I had a beautiful and less stressful chart. 🥳

https://covid.ninja/

Let me know what you think. I will try to add a few features on the next hours/days.

Thank you!

Discussion (32)

Collapse
smeijer profile image
Stephan Meijer • Edited

The chart doesn't fit on my screen. It renders to large.

Also, it would be nice if we could:

  • use the keyboard in the country input, I don't want to scroll. I just want to start typing.
  • compare the current country with another country or global (the world). Using a secondary axis, so that we can see how the development is doing comparing the world.
  • save the current form state in the URL, so we can use F5 to refresh and share the URL with friends
Collapse
milhouse1337 profile image
Pascal Meunier Author

Thank you for your feedback! 👍 The URL on my todo list and should rollout very soon.

Collapse
gpeto91 profile image
Gabriel Azevedo

Great work Pascal! The chart by country is really nice and I'd miss it in others dashboards.

Is it possible to inform the data when hovering the line? Also would be nice to improve the chart labels, it feels a bit confusing. But thats all from me, good job! :)

Collapse
milhouse1337 profile image
Pascal Meunier Author

Thank you! Yes, I will add the tooltips on the chart very soon. 👍

Collapse
christopheek profile image
Christophe N. El-Khoury

How often is it being updated? Is it automatic, periodic, etc.? I've checked the stats for Lebanon and they're outdated.

I'd like to point out the same thing as @stephan Mejjer, the graph should be resizable as per the screen size.

Other than that, really neat job mate. gg

Collapse
milhouse1337 profile image
Pascal Meunier Author

Thank you for the feedback. 👍 The source is updated every 24h right now, they used to update it on a more regular basis but I think they are overloaded.

Collapse
milhouse1337 profile image
Pascal Meunier Author

Fixed. 👍

Collapse
brunojs02 profile image
Bruno Santos

the url slug still wrong

Thread Thread
milhouse1337 profile image
Pascal Meunier Author

I can't change it :\

Collapse
w3gaucho profile image
W3G • Edited

information outdated because it shows no recovery in Brazil. this country has already had 2 recoveries. the arcgis map shows 1 recovery and the bing map shows 2.

Collapse
milhouse1337 profile image
Pascal Meunier Author

I know, the source has not updated since 20 hours now, sorry for this. I'm monitoring the update on the GitHub repo, if they don't push an update soon I will look for an alternative.
github.com/CSSEGISandData/COVID-19...

Collapse
aquasar profile image
Alex Quasar

Not sure if it makes sense to plot the deaths and recovered on the same chart, since most (almost all the time they will be less than 1% or close to 0% of the confirmed cases)

I would put these on different charts, or at least have them toggle.
I would also add the number of new cases each day
Perhaps a toggle between linear and log scale.

Does it automatically update?

Otherwise good work so far. I am sure you learned a ton doing it

Collapse
mburszley profile image
Maximilian Burszley

Also see:

arcgis.com/apps/opsdashboard/index...

from Johns Hopkins.

Collapse
milhouse1337 profile image
Pascal Meunier Author

The data is fetched directly from them (the GitHub repo) to your browser.
github.com/CSSEGISandData/COVID-19

Collapse
mburszley profile image
Maximilian Burszley

Gotcha. They already have a mobile-friendly view and graphs/maps. I thought you were doing something on your own.

Collapse
francisperron profile image
Francis Perron

Awesome!

Collapse
yokotobe profile image
yokotobe • Edited

nicely done.
I suggest you adding mouse over to show number on timeline
bl.ocks.org/larsenmtl/e3b8b7c2ca47...

Collapse
milhouse1337 profile image
Pascal Meunier Author

Thank you! I will add this soon. 👍

Collapse
morobi05634339 profile image
Morobi

Hey man, please drop a post when you find a regular and reliable data update source

Collapse
tiim profile image
Tim Bachmann

I haven't looked over it too closely but ecdc.europa.eu seems like a pretty reliable source. They also seem to upload a file every day.

I made a little github repo that uses a github action to download and parse the xls file every day and publishes it as json for easier use.

Collapse
milhouse1337 profile image
Pascal Meunier Author

The main source is updated every 24h right now. They seem a bit overloaded with the amount of work required to crawl the data and summerize it. There is more info here if you want to follow how the crew is doing. github.com/CSSEGISandData/COVID-19...

Collapse
manishfoodtechs profile image
manish srivastava

Wonderful.
Also check out:
github.com/Manishfoodtechs/OSINTHR...

How you feel about contributing

Collapse
ben profile image
Ben Halpern

Not a good looking graph for New York

Collapse
milhouse1337 profile image
Pascal Meunier Author

Yeah, I had the idea to have the amount of new cases (not just the sum) so we might be able to actually see if it there is more new cases than yesterday. 🤔

Collapse
seanmclem profile image
Seanmclem

Recovered should maybe be a negative number? Otherwise it will only ever go up

Collapse
milhouse1337 profile image
Pascal Meunier Author • Edited

That's the point. The amount of recovered is already a negative number in how the stats are compiled. Let me know is it's still confusing, you might not be the only one.

Collapse
icreativekid profile image
ICreativeKid

can u share the code please?

Collapse
milhouse1337 profile image
Pascal Meunier Author

I will probably open source it, how would you contribute ? There is a lot to do right now. 🤓

Collapse
23n6 profile image
23n6

Like!

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/