3D COVID-19 Visualisation

Showcase
1

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.

Screenshot 2020-03-24 at 11.37.28
Screenshot 2020-03-24 at 11.37.282266Ă—1158 1.17 MB

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

10 Likes
2

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.

Annotation 2020-03-25 135023
Annotation 2020-03-25 135023876Ă—719 733 KB

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.

2 Likes
3

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
4

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 !

Screenshot 2020-03-25 at 11.38.41
Screenshot 2020-03-25 at 11.38.412234Ă—1924 1.46 MB
. 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!

5

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!

6

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

7

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.

8

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

9

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:

image
image2014Ă—1846 576 KB

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

1 Like
10

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

3 Likes
11

Works good now! :+1:

1 Like
12

@Tricknasralla

Very nice presentation. Thank you for this effort/

I have the feeling that if I were looking at a presentation of the COVID-19 virus in action in a Petri dish, the look and feel of a timeline would be quite similar to your presentation of the virus attacking the Globe. And thus a reasonable question might be: are we living in a fractal? :wink:

What you are doing is transforming the data from quantities to qualities - from numeric characters to expressions of motion, touching and multiplying. In turn these representations are much better at conveying feelings of anguish, stress or caring. And there are a lot of people - the majority? - in the world for whom feelings are more important than numbers.

The current version is great at showing the entire timeline of the virus - which is kind of a one-off affair. I would like to see a reason for coming back to the chart from time to time. Perhaps it would be good to see just a set of the recent days of the the timeline. The could replay automatically. Thus I could rotate the globe and see the timeline repeat from a number of points of view. Also I am wondering if you could use color or opacity to indicate the percentage changes as the timeline progresses.

I look forward to seeing you develop your ideas even further.

13

Thank you for your kind comments. I appreciate it!

As to future work on the visualisation. I’m looking to try and get stats for global active and recovered cases as things go forward. Unfortunately, getting anything accurate for these figures is proving difficult. If I do manage to get those though, I’m thinking of modifying the shadercode so that I can represent changes over time as multiple colours - maybe green for recovered and red for active, say. That means as things go into the current phase, you can see where the tide is turning compared to where it maybe isn’t.

I’ll keep you posted here though if I manage to change things :smiley:

1 Like
14

Wow dude! this looks so cool!