January 4, 2016 James Thomson

Interactive Mapping

Tweet about this on TwitterShare on LinkedInShare on FacebookGoogle+Share on StumbleUponEmail to someone

Animated World Map

In the past I have used expensive GIS software, or ggmap in R, to produce maps and visualise geographic data. I wanted to see what javascript offered to make more interactive maps. After a little research I found a couple of options Leaflet and good old D3.js. I challenged myself to make an animated map that plots all the places I’ve been to over time.

I started with Leaflet. My initial aim was to make a zoomable and panable map with markers to indicate locations. Using Leaflet and the basic tutorials available this was incredibly easy, and required very little code. The markers could contain clickable text information, and were easy to customize to a different image. You just needed the longitude and latitude. Very soon I had the following:

See the Pen World Map Leaflet by james thomson (@jamesthomson) on CodePen.

I liked the infinite zoom, and the fact you could get right down to street level. It was easy to set the initial location and zoom factor. The markers were easy to customize, and automatically stayed the same size relative to the page no matter what the zoom level. However animating it and adding anything beyond that seemed much more tricky. It was soon clear I would need to use D3.js and overlay that onto the leaflet map.

So I switched directly to D3.js to see what I could do there. I followed a couple of online tutorials and after a while started to get the hang of it. It uses geo shapes stored in JSON form known as topoJSON to create the map, and then uses geo functions built in to D3 to project co-ordinates onto the map space. It took a while longer to get to grips with, and requires much more code, but I got to a basic map with some marker locations:

See the Pen World Map topoJSON by james thomson (@jamesthomson) on CodePen.

You can’t pan around the world and there’s no detail beyond the country shapes. The markers also don’t yet have any extra info. The zoom and start location also seemed to impact how the map was positioned and what you could see when you zoomed out, which was a little confusing and frustrating. It was best just to start zoomed out. It also took a while to make the markers change size as you zoom in and out to reflect to size of the map.

The next step was to animate it. This was relatively straightforward, as it was just a case of applying a few D3.js tricks. I used transition and delay to time lapse the entry of each marker according to each points time variable. I added a tooltip to the each marker to provide additional information. I also added some text linked to the time variable to display the passing of time. I turned all of this animation and interactivity into a function. Then I set up a button to execute that function when clicked. Here is the results:

See the Pen World Map topoJSON with time lapse animation by james thomson (@jamesthomson) on CodePen.

This was my end goal, but as I said earlier the map wasn’t as nice as with Leaflet so I wanted to go back to that and try and integrate the D3 animation with the Leaflet map. I found a couple of nice tutorials on this here, here and here. It involves overlaying the d3 layer onto the Leaflet layer, which sounds simple but they use different co-ordinate systems and they need to work in tandom as you zoom and move around the map. You also need to provide the location data in a featuresJSON form. However I still struggled to get the tooltip working and it wasn’t as slick as I hoped. Here is the result:

See the Pen world map leaflet and d3 time lapse animation by james thomson (@jamesthomson) on CodePen.

In summary:
Leaflet – Easy to create a incredibly detailed map with markers. Hard to animate, as its difficult to integrate it with a D3 layer.
TopoJSON – More involved to create just a basic map with markers. But once you’ve achieved that, its easier to animate.

Finally here is my time lapse animation map of the places I’ve visited (I had to have stayed there overnight and I had to require a passport to get there).I wasn’t interested in close detail, and I wanted to include the tooltip to provide exact dates, so I used the D3 and topoJSON version. I changed the animation slightly and I also added a manual jitter on locations I’d visited more than once. I also brought the time counter into the centre of the map so its easier to absorb all the information at once.

See the Pen My world travel by james thomson (@jamesthomson) on CodePen.

Tagged: , , , , , , ,

About the Author

James Thomson I have over 10 years experience working in analytics and statistics. I worked as a Statistician in the Pharma industry before branching out into analytics and data mining. I'm currently enjoying learning about data visualisation and machine learning. Over years I've worked with: GSK, Nectar, BP, Ford, Whitbread, Wunderman, Jaguar, RNIB, Virgin Media & Channel4. Please visit my own blog on analytics and music

Machine Learning and Analytics based in London, UK