How-to Create Timeline Maps

I like using googleVis in R to quickly create nice interactive Google Geomaps.

Here are more details about this map.

This is great for individual maps.

But I wanted to be able to put a series of Geomaps in a timeline and have them play as an animation or slide show.

There are a number of ways to create timeline maps in R. Here are some recent examples:

• An animated map of 2012 US election campaign trips.

• Visualisation of ocean shipping.

• Growth in US Walmart stores.

• Life expectancy with googleVis This example gives an alternative way to do what we are doing here.

• Many of these examples use the really helpful animation package.

• The animation package pieces together a series of images created by R. These are playable as an HTML webpage, a GIF, a PDF, and so on.

• However, I wasn't able to use the package with googleVis to produce interactive maps.

The solution I came up with was to use the Carousel plugin from Twitter Bootstrap.

• The Carousel plugin creates a slideshow with jquery. Usually Carousel slide shows include static images, but you can include iframes in them as well.

• Placing the maps in iframes in a Carousel <div> tag completely preserves their interactivity.

• The default formatting obviously matches nicely with Twitter Bootstrap produced websites.

Scroll down to see the whole map.

There are 3 general steps to create interactive timeline maps with googleVis & Carousel:

1. Create a series of googleVis maps in R.

2. Include these maps in Carousel div tags on an HTML page.

3. Publish.

First create a function to build the maps in R.

I did this by writing a simple function I called MapAMC (Full replication code).

library(googleVis)
MapAMC <- function(y){
                      yearTemp <- y  
                      TempMap <-  gvisGeoMap(subset(Full, year == yearTemp &
                                              TotalAmcCreated != 0), 
                                              locationvar = "ISOCode", 
                                              numvar = "TotalAmcCreated",
                                              options = list(
                                                colors = "[0xECE7F2, 0xA6BDDB, 0x2B8CBE]",
                                                width = "780px",
                                                height = "500px"
                                                ))

  print(TempMap, file = paste("AMCMap", yearTemp, ".html", sep = ""), tag = "chart")
}

Then run the command.

I ran a vector of containing the years I wanted to map through the MapAMC function with lapply:

Years <- c(1980, 1985, 1990, 1995, 2000, 2005, 2011)

lapply(Years, MapAMC)

In this example, seven HTML files will be saved in the working directory.

You probably want to have them put into the same directory that the framing website is in.

To make things tidy, I put the maps into a folder called BaseMaps in a subdirectory of the file where the website's markup file is located.

Open the HTML file of the webpage you are using to frame the maps.

In the header, declare where jquery and the Carousel javascript files are located.

I linked directly to Twitter Bootstrap's originals:

<script type="text/javascript" 
  src="http://twitter.github.com/bootstrap/assets/js/jquery.js">
</script>

<script type="text/javascript" 
  src="https://raw.github.com/twitter/bootstrap/master/js/bootstrap-carousel.js">
</script>

Note: if you are using Jekyll with GitHub Pages (recommended), you will want to include this code at the end of the markup file.

Now add the Carousel into your website's markup file.

A basic Carousel div tag structure goes something like this:

<div id="MyMap" class="carousel slide">
  <div class="carousel-inner">
    <div class="active item">
      <iframe src="BaseMaps/AMCMap1980.html" height = 560 width = 800>
      </iframe>
        <div class="carousel-caption">
          1980
        </div>
      </div>
    </div
  </div>
</div>

HERE is the full code for the example.

Finally publish the website however you want.

Contact:

If you have any suggestions or comments you can reach me through my blog or @ChrisGandrud

Thanks to:

• Markus Gesmann for creating the googleVis package.

• The people behind Twitter Bootstrap, including Mark Otto and fat-kun.

• Ramnath Vaidyanathan, who created the Slidify package that I used to make this slide show in R.