Some more JavaScript: Interactive maps with Leaflet

In this tutorial, we develop the first taste for using JavaScript to generate a relatively quick interactive infoviz for a webpage. We learn to use a JavaScript library called leaflet.js, which is an open source Javacript library for efficiently generating desktop as well as mobile friendly interactive maps. We do this exercise before we jump into D3 proper to learn that (a) there are a bunch of JavaScript based open tools out there for info-vis of different types (though D3 can also do geodata really nicely), and (b) to get a bit more practice with JavaScript. Leaflet is particularly easy to set up and use.

The second aim for doing this tutorial is to show you a quick way of mining data via APIs (this time we use the World Bank API) and using a tool like Sublime Text to quickly clean up your data to produce a nice clean CSV file.

Ok, let's get started!


World Bank Data API: Let's build some data

For some of your Assessment 2 and 3 stories, you can use sources like the World Bank. The World Bank has a very big open data base for countries around the world. In this tutorial, we build a data set for countries by their names, capitals, income levels, latitude and longitude. We use the data to build our first web-based interactive map. Do the following:

Some more JavaScript: Enter Leaflet

Leaflet is a great JavaScript tool for generating interactive maps. The basic idea is simple:

First, we will need to make a Mapbox account. Click on the link and sign up. Its a simple process. And then, just click on the "Explore Mapbox" link.

Click on Styles and then click on any of the given Styles. The usual ones are "Mapbox Streets", "Mapbox Light", or "Mapbox Dark", depending on your design choice. Here, I have chosen Mapbox Light. The two tabs "Mapbox" and "Leaflet" give us the links to embed in our visualisation HTML file.

We are ready for the final and most exciting part of our experience today. This part of the tutorial draws from the Leaflet quickstart tutorial. Do the following:

Base Map + Data = Vis

In this final part of the tutorial, we will add the World Bank Data onto the Base Map. The aim of the story or visualisation is to explore the geographic/spatial organisation of rich and poor countries around the world. Our visualisation should finally be able to show whether spatial clusters exist between rich and poor countries: does the world have a clustering of riches? To achieve this, we make the following design decisions:

To start putting data on our base map layer, we do the following steps:

Head off to the HTML file link, and open in Chrome to see the full result! Congratulations on generating your first interactive map!


Sarkar, S. and Hussein, D.A., 2017, D3 Tutorials for Information Visualisation Design Studio, University of Sydney.
Email: somwrita.sarkar@sydney.edu.au, dhus4848@uni.sydney.edu.au