loading...
Cover image for 🌏 I've open-sourced an interactive 3D visualization of COVID-19

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

wobsoriano profile image Robert Updated on ・2 min read

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!

Discussion

pic
Editor guide
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

Truly amazing and inspirational.

Collapse
wobsoriano profile image
Robert Author

Thanks!

Collapse
madza profile image
Madza

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
tesh254 profile image
wachira_Dev

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!

Collapse
kedark profile image
Kedar.K

This is so Cool @robert . Great work!

Collapse
wobsoriano profile image
Robert Author

Thank you!

Collapse
mikelogaciuk profile image
mikelogaciuk

What a stellar job! I am amazed, truly amazed!

Collapse
wobsoriano profile image
Robert Author

Thank you!

Collapse
isajal07 profile image
Sajal Shrestha

This is brilliant Robert. 👏🏼

Collapse
wobsoriano profile image
Robert Author

Thank you!

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
wobsoriano profile image
Robert Author

Nice! thanks

Collapse
snesi profile image
David Domingo

Awesome!!

Collapse
wobsoriano profile image
Robert Author

Thanks!

Collapse
joevchs profile image
joevchs

I did a different concept using ThreeJs of my country for visualizing geographic distribution on the map.

Check it out: covid3dmaps.com/

Probably add more soon.

Collapse
wobsoriano profile image
Robert Author

Great one

Collapse
askbalubabu profile image
balu

Hey, I'm a noob so could you answer this for me. How did you build that globe, specifically the functionality that the country the mouse of over hovers and displays its data?

Collapse
wobsoriano profile image
Robert Author

I did not build the globe, I used globe.gl which is stated above. It has a functionality that when you hover on it, a tooltip will appear in a form of text or html. The tooltip was made using pure css and html.

Collapse
bdeepak23 profile image
Deepak Bhaskaran

Super cool interface, my version is at covid-dashboard.herokuapp.com/

Collapse
rne1223 profile image
Rene Tellez Rodriguez

It has ads :/

Collapse
wobsoriano profile image