D3.js Tutorials and Projects

D3.js is one of my favourite libraries for visualising data in interesting and useful ways. Its power to manipulate SVG's to create visualisations means you are able to customise any dimension of your data display.

I enjoy using it to create data visualisations to illustrate data and to ease the explanation of statistical data.

In addition I create tutorials for myself and others to show off some of the features of D3.js and post about it on my blog.

D3.js projects and tutorials

• D3.js Herd Immunity and Vaccinations - In this project I am replicating a popular gif showing how having a high percentage of Vaccinations helps herd immunity, protecting those who are unable to be vaccinated.
• D3.js and Leaflet - In this tutorial I show how you can combine D3.js and Leaflet to overlay SVG data in D3.js onto a Leaflet map.
• D3.js version 5 Data Binding Example - This tutorial goes through the process of binding data to elements and creating a simple updatable SVG graphic using D3.js version 5.
• D3.js version 5 Drawing Shapes - D3.js has a number of built-in symbols which can be used for any data visualisation needs. This tutorial goes through how you can use these with D3.js version 5.
• D3.js version 5 Scatterplot with Shapes - This tutorial goes through how you can create a scatter plot with D3.js version 5 by updating Mike Bostocks version 3 graph. This includes showing how to have custom shapes with your scatter plot and the version 5 changes.
• D3.js version 5 Prediction Line Chart - This tutorial goes through how you can create a simple prediction line chart. This allows you to graph predictions of how a line chart may continue its growth past a known dataset.
• Loading multiple D3 versions at once - This quick tutorial demonstrates how you can load two different D3 versions on the same page. This is important for cases when you are using different D3 code which requires differing versions.
• Implementing the Perforce Helix in D3.js - The Perforce company, the owners of the popular version control system Perforce Helix Core, created a visualisation of a spinning helix on their homepage. I thought this was pretty cool so decided to replicate it using D3.js.
• D3.js version 5 Lazily loading DOM elements - In this example I demonstrate how you can lazily load DOM elements as you scroll through a page using D3.js.