{"id":2080,"date":"2019-03-16T13:00:21","date_gmt":"2019-03-16T13:00:21","guid":{"rendered":"https:\/\/chewett.co.uk\/blog\/?p=2080"},"modified":"2019-03-18T00:19:50","modified_gmt":"2019-03-18T00:19:50","slug":"visualising-herd-immunity-with-vaccinations-using-d3-js","status":"publish","type":"post","link":"https:\/\/chewett.co.uk\/blog\/2080\/visualising-herd-immunity-with-vaccinations-using-d3-js\/","title":{"rendered":"Visualising Herd Immunity with Vaccinations using D3.js"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

In this post I talk about my latest D3.js visualisation showing how herd immunity is affected by vaccination level<\/a>.<\/p>\n\n\n\n\n\n\n\n

Ideas of Visualising Vaccination level and demonstrating Herd Immunity<\/h2>\n\n\n\n

Originally theotheredmund<\/a> 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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

\"\"
Image of Herd Immunity gif taken from Imgur <\/a> <\/figcaption><\/figure>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

How does Vaccination level affect Herd Immunity<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

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).<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Final D3.js library<\/h2>\n\n\n\n

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

Below shows an image of what the population looks like when all people have been infected in the 0% vaccination category.<\/p>\n\n\n\n

\"\"
Image of my D3.js Herd Immunity Visualisation Library<\/figcaption><\/figure>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Improving the library<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

Going forward, when I increase the size of the population these performance improvements will likely be required.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

A second point will be to use real rate of infection data to illustrate the difference in infection rates for different diseases.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Summary of Herd Immunity Library<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

The library is available for testing on my website<\/a>. If you have any questions or like this please leave a comment below!<\/p>\n","protected":false},"excerpt":{"rendered":"

In this post I talk about my latest D3.js visualisation showing how herd immunity is affected by vaccination level.<\/p>\n","protected":false},"author":1,"featured_media":2086,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"This weekend I have written about how I have been Visualising Herd #Immunity with #Vaccinations using #D3.js #D3 #Data","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[98],"tags":[229,291,219,337,336],"class_list":["post-2080","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software","tag-d3-js","tag-d3-js-version-5","tag-data-visualisation","tag-herd-immunity","tag-vaccinations"],"wppr_data":{"cwp_meta_box_check":"No"},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2019\/03\/vaccination_library_d3.jpg?fit=800%2C800&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p2toWX-xy","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":2294,"url":"https:\/\/chewett.co.uk\/blog\/2294\/implementing-the-perforce-helix-in-d3-js\/","url_meta":{"origin":2080,"position":0},"title":"Implementing the Perforce Helix in D3.js","author":"Chewett","date":"July 27, 2019","format":false,"excerpt":"This blog post talks about the steps I took to implement the Perforce helix in D3.js. What is the Perforce Helix? Perforce is a company that makes a version control system of the same name. One of their main products has been recently renamed Perforce Helix Core. Lately on their\u2026","rel":"","context":"In "Software"","block_context":{"text":"Software","link":"https:\/\/chewett.co.uk\/blog\/category\/software\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2019\/07\/d3_perforce_helix-2.jpg?fit=800%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2019\/07\/d3_perforce_helix-2.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2019\/07\/d3_perforce_helix-2.jpg?fit=800%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2019\/07\/d3_perforce_helix-2.jpg?fit=800%2C800&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":2102,"url":"https:\/\/chewett.co.uk\/blog\/2102\/checking-if-two-points-are-closer-than-a-distance\/","url_meta":{"origin":2080,"position":1},"title":"Checking if two points are closer than a distance","author":"Chewett","date":"April 3, 2019","format":false,"excerpt":"This blog post talks about how you can quickly check if two point are closer than a specific distance. How to calculate the distance between two points To calculate the distance between two points you can use Pythagoras Theorem. This states that for a right angled triangle you can find\u2026","rel":"","context":"In "Software"","block_context":{"text":"Software","link":"https:\/\/chewett.co.uk\/blog\/category\/software\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2019\/03\/two_points_closer_distance-1.jpg?fit=800%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2019\/03\/two_points_closer_distance-1.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2019\/03\/two_points_closer_distance-1.jpg?fit=800%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2019\/03\/two_points_closer_distance-1.jpg?fit=800%2C800&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":1463,"url":"https:\/\/chewett.co.uk\/blog\/1463\/summary-of-mike-bostock-on-d3-selections\/","url_meta":{"origin":2080,"position":2},"title":"Summary of Mike Bostock on D3 selections","author":"Chewett","date":"August 25, 2018","format":false,"excerpt":"Today I talk about and link to Mike Bostock's post on D3 selections, in this he talks about the basic unit of d3, the selection. Who is Mike Bostock? Mike Bostock is one of the key developers of d3.js and worked for a number of years creating visualizations with this\u2026","rel":"","context":"In "Software"","block_context":{"text":"Software","link":"https:\/\/chewett.co.uk\/blog\/category\/software\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_mike_post_selections.jpg?fit=800%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_mike_post_selections.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_mike_post_selections.jpg?fit=800%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_mike_post_selections.jpg?fit=800%2C800&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":1485,"url":"https:\/\/chewett.co.uk\/blog\/1485\/drawing-shapes-in-d3-js-version-5\/","url_meta":{"origin":2080,"position":3},"title":"Drawing shapes in D3.js Version 5","author":"Chewett","date":"September 5, 2018","format":false,"excerpt":"This post goes over the various D3.js symbols typically used for scatter plots. D3.js built-in symbols D3.js has a number of built-in symbols which can be used for any data visualisation needs. The most common use of these are\u00a0for points on scatter plots and similar graphs. It is important to\u2026","rel":"","context":"In "Software"","block_context":{"text":"Software","link":"https:\/\/chewett.co.uk\/blog\/category\/software\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_v5_drawing_shapes.jpg?fit=800%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_v5_drawing_shapes.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_v5_drawing_shapes.jpg?fit=800%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_v5_drawing_shapes.jpg?fit=800%2C800&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":1700,"url":"https:\/\/chewett.co.uk\/blog\/1700\/colour-scales-in-d3-version-5\/","url_meta":{"origin":2080,"position":4},"title":"Colour scales in D3 Version 5","author":"Chewett","date":"November 3, 2018","format":false,"excerpt":"Over the past versions in D3.js there have been a number of changes to how you can get a colour scale to use with your charting. This blog post explores what is available and how to use it. This blog post applies to D3.js version 5. Colour scales in D3.js\u2026","rel":"","context":"In "Software"","block_context":{"text":"Software","link":"https:\/\/chewett.co.uk\/blog\/category\/software\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/11\/d3_colour_scales-1.jpg?fit=800%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/11\/d3_colour_scales-1.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/11\/d3_colour_scales-1.jpg?fit=800%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/11\/d3_colour_scales-1.jpg?fit=800%2C800&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":1483,"url":"https:\/\/chewett.co.uk\/blog\/1483\/d3-js-version-5-scatterplot-with-shapes\/","url_meta":{"origin":2080,"position":5},"title":"D3.js version 5 Scatterplot with shapes","author":"Chewett","date":"September 15, 2018","format":false,"excerpt":"Today I write about\u00a0how you can create a scatter plot with different shapes in D3.js version 5. Aim of this tutorial This blog builds on Mike Bostocks\u00a0Scatterplot with shapes example and reworks it for D3.js version 5. This tutorial will focus on the changes needed to convert the original diagram\u2026","rel":"","context":"In "Software"","block_context":{"text":"Software","link":"https:\/\/chewett.co.uk\/blog\/category\/software\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_v5_scatterplot_with_shapes-1.jpg?fit=800%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_v5_scatterplot_with_shapes-1.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_v5_scatterplot_with_shapes-1.jpg?fit=800%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_v5_scatterplot_with_shapes-1.jpg?fit=800%2C800&ssl=1&resize=700%2C400 2x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/posts\/2080","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=2080"}],"version-history":[{"count":3,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/posts\/2080\/revisions"}],"predecessor-version":[{"id":2088,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/posts\/2080\/revisions\/2088"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/media\/2086"}],"wp:attachment":[{"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=2080"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=2080"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=2080"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}