3D COVID-19 Visualisation

https://covid19visualiser.com/

3D visualisation of coronavirus cases over time. Uses the Johns Hopkins combined dataset.
An attempt to demonstrate the global spread of disease using real data.

How to Use.

Left click and drag or drag finger to rotate the globe.

Scroll or pinch to zoom in and out.

Move the slider to move through time. Play/Pause button starts and stops playback.

What is this showing me?

The visualisation displays the (cumulative) number of confirmed Coronavirus cases over time by country/region. Data is taken from the Johns Hopkins combined global dataset which is available here: https://github.com/CSSEGISandData/COVID-19.

Each point is displaced away from the surface by an amount that takes into account the number of cases of the 4 closest recorded countries/regions and applies an inverse square falloff. Displacement is the Log(10) of the total cases for that point. This means that if there are only a few cases in an area, the number of dots and their displacement will be much less than if there are hundreds or thousands.

The more cases there are, the more the virus will spread to neighbouring regions and so spread as well as displacement increase as cases do.

Why create this?

A great deal of in depth visualisations for these data currently exist. The dashboard created by Johns Hopkins is a good example. However, none of these attempt to convey the idea of how a disease spreads over time. When we talk about “flattening the curve” what we mean is attempting to slow the spread of disease, not stop it. But my hope is that this visualisation will help people understand how important that “slowing down” is. Just look at how quickly the spread has ramped up from the beginning of March. This aims to give viewers an idea of just how crazy an exponential increase is by using real data.

We can all help to curb this spread by adhering to the advice given by medical professionals and public health organisations. In the end, if this makes even one person think that it’s better to distance and isolate then I’ll think it was time well spent!

How was this made?

Built in React with Three.js and custom Vertex/Fragment GLSL shader code.

Animation runs entirely on GPU once initial calculations triangulate distances from data points (given in data by lat/long coordinates). The case data is sent to the shader via a texture (tutorial on that is imminent).

Source code available here. Feel free to fork or drop me a tweet if you think things can be improved (or if you’d just like to comment).

8 Likes

This is a really great way of visualizing the how the virus is spreading. However, I’m not sure how accurate your representation of the data is.

I’ve checked Ireland since that’s what I’m most familiar with.

The first case in Ireland was 29th Feb, while this shows the entire country covered by 28th Feb.
By the 28th Feb there were 21 cases in the UK (20 mainland, 1 northern Ireland) while this shows zero.

You say that each point takes into account the data from the four closest countries - does that mean the red area over Ireland is the combined total of Ireland, UK, Scotland, and Northern Ireland? In which case, why place it over Ireland rather than centered between the four territories?

Aside from that, it seems like the highlight is far too large for just 21 people.

1 Like

I agree with @looeee, that the data doesn’t seem accurate. It showed me Poland as the first infected country in Europe, but the first virus case in Poland was 4th of March, while I remember, that over thousand people were already sick in Italy and Germany (which is certain, because that first case was a tourist coming back from Germany :slight_smile: )

1 Like

Hmm, that’s very strange. It looks like the points on your screenshot differ vastly from mine! I wonder if there’s a strange issue with texture placement as all the points seem skewed in the screenshot @looeee. For reference here’s a shot of the same day on my system. Note that Poland is also not affected on my map @DolphinIQ !

. I’ve tried to replicate your findings on all my systems (mac, pc, iphone 11 and Galaxy S7) but I can’t seem to get the same texture offset that you’re both experiencing!

Could the two of you please post your system spec and browser either here or make an issue on the github repo: https://github.com/patricknasralla/covid19_3D_visualisation/issues ?

I’d really like to get to the bottom of this!

Cheers!

I’m using windows, tested with Chrome beta, Chrome, and Firefox. They all look the same.

Hmm… that’s interesting. The only difference I can see is that your localeTime string is in US format rather than UK. But that shouldn’t have any bearing on the location of the points… I’ve asked a colleague in Switzerland to check to see if it might have something to do with physical location but that’s a long shot! I’ll keep trying to hunt this down though but until I can reproduce it myself I’m a little stuck as to how to fix! Is there a way in Three to set the texture to specific coordinates when you map to a sphere? I still think it’s more likely that the globe texture has been offset but, again, I don’t know.

Yeah, that’s a bit annoying. I don’t use US style dates myself.

Tried proxies to attempt to recreate locale problems but nothing yet… @looeee , can I ask a favour? Could you send me a screenshot of your globe’s (0,0) coord? there should be a datapoint there from the extranational cases (eg. diamond princess etc.). on the 28th Feb it should look like this:

But if I can see where your equivalent point is it might help me make a bit more sense of this!

Tracked down the bug! Looks like it was an issue with some nVidia GPUs antialiasing my dataTexture. Should be working correctly for everyone now.

2 Likes

Works good now! :+1:

1 Like