D3.js and Leaflet

Leaflet is an online JavaScript library designed to allow easy creation and visualisation of map data. One of the features it provides is adding layers to the map and overlaying custom data visualisation on top of this.

However searching online I found that all of the tutorials that provide an introduction to combing Leaflet and D3.js are for version 0.7 and 3 respectively. However the current versions of these libraries is 1.3 for Leaflet and 4.13.0 for D3.js. This caused some issues as there have been some major changes in both libraries which meant the examples did not work.

The below example shows how to overlay a number of circles at specific latitudes and longitudes on the map using D3.js. Some of the complexities of this are transforming data in latitude and longitude format to pixel locations on the screen. This is non trivial as the map is zoomable and scrollable but the libraries provide a number of functions to help us.

Example code and full tutorial

The full code is available by viewing the source of the below frame. If you want more detailed instructions there is my blog post I talk through the code step by step.