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.
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
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
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:
mapshaper.org and gis data converter are also helpful if you need to convert shapefiles to geojson or topojson
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.
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
The next step is the projection algorithm that creates the map in a flat plane
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.
this part of the code sets up the scale for the map
The rest of the code below draws the map from the data in the topojson file
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…..