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

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

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

Create account Log in
Cover image for 🌏 I've open-sourced an interactive 3D visualization of COVID-19
Robert
Robert

Posted on • Updated on

🌏 I've open-sourced an interactive 3D visualization of COVID-19

As a result of the enhanced community quarantine, I had the time to develop and open-source an interactive 3D map of latest data regarding COVID-19, provided by the World Health Organization.

Reasoning

I am seeing a lot of coronavirus dashboards using plane map views (google maps, mapbox, leaflet) and was inspired to develop an interactive way to visualize Johns Hopkins CSSE and other reliable data regarding the impact of COVID-19 to our world. It's actually based on covidvisualizer.com but decided to make one that doesn't have annoying ads (and open-source).

Here's a short demo:

enter image description here

Data

The interactive globe uses the NovelCovid/API which gets its data from Worldometer's real-time updates and CSSEGISandData/COVID-19's time series. Both of which utilizes reliable sources from around the world.

The GeoJSON used is from https://github.com/nvkelso/natural-earth-vector.

Tech Stack

For the front-end, I've used plain JavaScript and CSS to make it as simple as possible. The NovelCovid/API was plotted using globe.gl which is a UI component for Globe Data Visualization using ThreeJS/WebGL.

For the polygon colors, I've used D3's sequential color scales. The color starts from a very light orange (low cases) to a red (high cases). Here's a sample:

enter image description here

And lastly, I've used Parcel which is a blazing fast, zero configuration web application bundler to bundle the app.

Links

Repo: https://github.com/sorxrob/covid-3d
Website: https://covid3d.live

If you have questions, suggestions, or feedback, please leave it in the comment section.

I hope you all stay safe and sane during these times!

Top comments (50)

Collapse
 
catalinradoi profile image
CatalinRadoi

Looks cool, Robert, but... this is a map without North Korea :) looks like it's been flooded

Collapse
 
wobsoriano profile image
Robert Author

Hey looks like North Korea has no cases that's why it doesn't have a polygon.

Collapse
 
wobsoriano profile image
Robert Author

Thanks. Ill look into it.

Collapse
 
hallurkn profile image
Hallur KΓ‘rason Nielsen

Same goes for The Faroe Islands - not a country a lot of people are familiar with though, but felt obliged to mention it as it is my home country :) Other than that, really good job!

Thread Thread
 
wobsoriano profile image
Robert Author

Thank you. I will check those!

Collapse
 
andy_preston profile image
Andy Preston

The map is very aesthetically pleasing. This is a great tool for showing people the scale of the virus.

Collapse
 
wobsoriano profile image
Robert Author

Thank you Andy!

Collapse
 
sandeepbalachandran profile image
Sandeep Balachandran • Edited on

Truly amazing and inspirational.

Collapse
 
wobsoriano profile image
Robert Author

Thanks!

Collapse
 
madza profile image
Madza • Edited on

UI/UX-wise this feels way better than covidvisualizer.com.

  1. It's snappier and easier to navigate. You can see stats just on hover. Plus you don't have to wait for country to center after click to show stats.
  2. It looks more beautiful. The color scale used to display the data is more diverse (from pale to dark red instead of just red tones), so it's easier to grasp the spectrum of data.
  3. Animations are the icing on the cake. Initial loading experience is neater and country zoom effect on hover just adds even more 3D feel to the final product.
Collapse
 
wobsoriano profile image
Robert Author

Wow that's very nice of you. Thank you!

Collapse
 
shofol profile image
Anower Jahan Shofol

It's great. I got it from Facebook or somewhere else I don't know before you have posted here! It's more amazing to see the man behind it. Best of luck Robert.

BTW, doesn't it work on mobile? I've just tried now. The globe is disappearing after first load.

Collapse
 
wobsoriano profile image
Robert Author

In nodejs group maybe? Mobile view is still wip. Thanks!

Collapse
 
mhomol profile image
Mike Homol

This is fantastic. I have forked this one. I was thinking of trying to convert it to an o365 Web Part, if you're okay with that. It would mean that I'd have to remove Parcel though and have it build with Webpack. Hopefully that's not too involved.

Collapse
 
wobsoriano profile image
Robert Author

Hello. Yes no worries. Feel free to do what you want. Thanks!

Collapse
 
biuni profile image
Gianluca Bonifazi

Wow, I like this 3D visualization. Well done Robert!

PS: I added your work 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
 
wobsoriano profile image
Robert Author

That's really awesome. Thank you! I appreciate it.

Collapse
 
montoyaaguirre profile image
montoyaaguirre

Looks good! Wouldn't it make sense to set the color depending on the number of daily new cases instead of total cases?

Collapse
 
wobsoriano profile image
Robert Author

Hi thanks. I am planning to add filters soon!

Collapse
 
_chiragbansal profile image
Chirag Bansal

Just a quick suggestion, the info window could be fixed in the side instead of under the mouse, because it is really annoying for the user to interact with the globe otherwise. Other than that great work.

Collapse
 
wobsoriano profile image
Robert Author

Thanks!

Collapse
 
ben profile image
Ben Halpern

Wow, this is so well done.

Collapse
 
wobsoriano profile image
Robert Author

Thanks, Ben! Appreciate it.

Collapse
 
jakecupani profile image
Jake Cupani

This is awesome! Amazing job.

Collapse
 
wobsoriano profile image
Robert Author

Thank you.

Collapse
 
adam_cyclones profile image
Adam Crockett

Umm how did you wrap the map around a sphere?

Collapse
 
thepersonaldev profile image
Oz Ramos

He didn't he's using Globe.gl

Collapse
 
vikkrantxx7 profile image
Vikrant Sharma

Just WoW!! I too was about to start on creating such a dashboard but looking at this, I think it will just be a waste of my efforts as this version is totally awesome.

Collapse
 
wobsoriano profile image
Robert Author

Hey! You should continue that. It'll be a nice addition to your portfolio.

Collapse
 
wchr profile image
Wachira

Best thing I have seen today

Collapse
 
wobsoriano profile image
Robert Author

Thank you!

Collapse
 
thepersonaldev profile image
Oz Ramos

Great idea and execution, and thanks for the links that's a lot to explore!

Collapse
 
wobsoriano profile image
Robert Author

Thank you!

"I made 10x faster JSON.stringify() functions, even type safe"

☝️ Must read for JS devs