Initial steps: mapping with D3.JS

I have been fascinated by some of the interactive maps on the web created with the d3.js javascript library. The New York Times especially has a bunch of stories augmented with the addition of interactive maps. Some of these maps can be found on chartsnthings.

While the data determines what type of visualization can be created I think that when used well interactive maps can add rich layers to a story.  Perhaps a different type of digital storytelling if you will. The two maps below are examples of this. The first student created project below from UW Madison is  an interactive map that charts the changes in abortion rights since Roe vs Wade in America. If you were to take away the map and leave just the text, you would be left with a compelling story but the story would probably not be as engaging as before.  Likewise with the second example where a timeline integrated with the map depicts flu trends in  various US states over a period of time. Once again the addition of the map makes the story come to life.Unnamed image

 
jobs

After perusing these and other examples from Mike Bostock the creator of D3. I wanted to learn how to build my own interactive maps. Starting from scratch the code  seemed quite daunting but thanks to the many examples I found on the web
http://bl.ocks.org/mbostock/4657115
http://bl.ocks.org/mbostock/2869871

I managed to cobble together some code to draw a simple map with a basic tooltip interaction.

Here’s the simple map I created with D3 and how I created it

Africamap

Finding Data:
The first step was to find geographical data. Initially I found some github repositories with geojson and topojson files but none seemed to have the required details needed so I tried to find shapefiles with the necessary information. These sites (below) were helpful in finding shapefiles:

I went to mapstarter.com   and downloaded the file as topojson. I then had to edit the country names in the topojson file using Brackets.io. After editing the json file all that was left was coding the map with d3.js.

The Code:
I must admit part of the code didn’t make much sense to me initially but after several tests and the help of Chrome’s Inspect Element feature I got it to work and I’m at the point where I have a basic understanding of what everything does. So here goes:

The CSS below styles the tooltip for the map

0

 

 

 

 

 

The next step is the projection algorithm that creates the map in a flat plane

one

 

The tooltip code (below) is setup to display information when the user hovers over a particular country.  The objects property “name” refers to the different countries in the topojson file. The information shown in the tooltip is pulled from there.

two

 

 

The next part of the code below references the specific topojson file
three

this part of the code sets up the scale for the map

6

The rest of the code below draws the map from the data in the topojson file

5

 

 

 

 

 

Once again a simple map but it took several trial and error attempts. Next steps will be to experiment with additional data and creating interaction on the map….using a combination of timeline sliders etc…..

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.