DEV Community

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

Robert on April 01, 2020

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

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

Thank you. I will check those!

Collapse
 
wobsoriano profile image
Robert

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

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

Thank you Andy!

Collapse
 
sandeepbalachandran profile image
Sandeep Balachandran • Edited

Truly amazing and inspirational.

Collapse
 
wobsoriano profile image
Robert

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

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

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

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

Collapse
 
madza profile image
Madza • Edited

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

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

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

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

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

Thanks!

Collapse
 
ben profile image
Ben Halpern

Wow, this is so well done.

Collapse
 
wobsoriano profile image
Robert

Thanks, Ben! 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

Hi thanks. I am planning to add filters soon!

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

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

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

Thank you!

Collapse
 
kedark profile image
Kedar Kodgire

This is so Cool @robert . Great work!

Collapse
 
wobsoriano profile image
Robert

Thank you!

Collapse
 
mikelogaciuk profile image
mikelogaciuk

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

Collapse
 
wobsoriano profile image
Robert

Thank you!

Collapse
 
isajal07 profile image
Sajal Shrestha

This is brilliant Robert. 👏🏼

Collapse
 
wobsoriano profile image
Robert

Thank you!

Collapse
 
dbhaskaran profile image
Deepak Bhaskaran • Edited

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

Nice! thanks

Collapse
 
snesi profile image
David Domingo

Awesome!!

Collapse
 
wobsoriano profile image
Robert

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

Great one

Collapse
 
jakecupani profile image
Jake Cupani

This is awesome! Amazing job.

Collapse
 
wobsoriano profile image
Robert

Thank you.

Collapse
 
askbalubabu profile image
Balu Babu

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

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
 
rne1223 profile image
Rene Tellez Rodriguez

It has ads :/

Collapse
 
wobsoriano profile image
Robert

Where?

Collapse
 
bdeepak23 profile image
Deepak Bhaskaran

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