Visualising Herd Immunity with Vaccinations using D3.js

In this post I talk about my latest D3.js visualisation showing how herd immunity is affected by vaccination level.

Ideas of Visualising Vaccination level and demonstrating Herd Immunity

Originally theotheredmund of Reddit created a visualisation showing how herd immunity works at different visualisation levels. This has recently been popularised as long dead illnesses are appearing again now vaccination rates are falling.

I decided I wanted to try and reproduce a similar simulation using D3.js. One of the main objectives was to be able to create a library which can be tweaked to create different simulations.

Above shows an image of the original Herd Immunity gif posted to Reddit. This shows how far the infection has spread at a certain time. My idea was to reproduce these six graphs using one library.

One change I decided to make was to allow users to increase the time step, by pressing a button. So they can change the simulation one press at a time.

How does Vaccination level affect Herd Immunity

Infections that are spread human to human typically are categorised by the number of people they typically pass it onto. Depending on the method of transmission this may be quite high for airborne infections.

Herd immunity occurs when a population has a high enough level of immunity to an infection. This is typically achieved by vaccination of the population.

The more easily an infection spreads, the higher percentage of immune people are required to reach Herd Immunity. This is typically defined as the Herd Immunity Threshold (HIT).

By reducing the number of people that the infection can be passed onto, the herd can be seen as immune as it wont be able to be passed on easily. This would then mean that the disease is no longer endemic.

Herd immunity is incredibly important for those who are unable to be vaccinated against these infections. By having a percentage of vaccination above the HIT level these people will mostly be protected. This is because they are not likely come into contact with someone infected.

Final D3.js library

The final implementation can be viewed on my website along with commentary describing it. The full source code is available by viewing the source code in the frame of this page.

Below shows an image of what the population looks like when all people have been infected in the 0% vaccination category.

Here you can see that because a large proportion of people are vaccinated in the 90% and 95% graphs the infection has not spread as fast.

Here the majority of unvaccinated people are protected due to the vaccinations of the others. This shows the unvaccinated people benefiting from the herd immunity.

Improving the library

In the source code there are a number of comments left noting where code improvements can be made. These are largely performance related however since the current graphs are fast enough for the small population I am visualising these have not been made.

Going forward, when I increase the size of the population these performance improvements will likely be required.

One of the next steps I plan to take is to allow a viewer to modify all percentages. This will allow a level of customisation to see how different levels affect the population.

A second point will be to use real rate of infection data to illustrate the difference in infection rates for different diseases.

A third change will be to improve the graph for colour blind viewers. The original graph used yellow, red, and blue for presumably this reason. So I will update the library to allow a selection of different colours.

Summary of Herd Immunity Library

Here I have created a small library that allows us to visualise the spread of an infection through a population. In addition this allow demonstrating of Herd Immunity in the population.

The library is available for testing on my website. If you have any questions or like this please leave a comment below!