DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 967,911 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for A simple COVID-19 dashboard I made on the weekend
Pascal Meunier
Pascal Meunier

Posted on

A simple COVID-19 dashboard I made on the weekend

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!

Top comments (32)

Collapse
 
smeijer profile image
Stephan Meijer • Edited on

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
 
hackergaucho profile image
Hacker Gaucho • Edited on

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 on

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 on

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!

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!