you're reading...
Data visualisation, How to guides

How to make an animated map with CartoDB and Torque

Buzzfeed's edit of the Twitter map of Beyonce's album release

Buzzfeed’s edit of the Twitter map of Beyonce’s album release

If you want to make an animated map (and you’re not a coder), there are not  a lot of options out there. CartoDB is the best.

You can use it to make rather gorgeous choropleths but it excels at mapping large numbers of points. That makes it perfect for mapping Tweets — and I used it to make the map above. So, how does it work? This is my guide to using it.

Just because it’s interesting, I’m going to use London transport data — not least because there’s nothing that combines the nerdy pursuits of transport and data better than open transport data. The data itself — a list of London’s overground and underground railway stations is munged together from a few sources, in particular:

I’ve compiled the whole lot into one spreadsheet for you (you can download it here). This is what it looks like:

If you want to, you can play with the interactive itself here.

Here are the main steps to making it:

1. Format the data

The thing about CartoDB is that you can actually format the whole lot in the browser, using SQL commands. I prefer not to (not least because in 2014, I don’t really want to be using a language designed in the 1970s) and find it easier to sort out in advance. For me, that means sorting out time zones and in this case giving every station type a code number for type (ie underground was 1, overground was 2, etc). So it looks like this:

Screen Shot 2014-03-14 at 1.48.25 PM

Timezones are particularly important to sort out in advance (ie you have the data in GMT but may want to show a map in PST so change the time before you upload the data) — and it there are a lot of columns you will want to delete later, it’s better to do it now.

2. Upload the data

When you’re ready, login to CartoDB and upload your new table — my experience is that CSVs work better than xlsx documents — just as is true with Google Fusion tables.

It will look something like this. If you are lucky it will have noticed the Lat and Long columns and already turned those into coordinates.

Telling Carto what type of information is in each column is really important. To do that, click on the heading and change column type — so make a number a number, a date a date and so on. If you don’t do that, nothing else will work properly.

Screen Shot 2014-03-10 at 1.09.12 AM

If it hasn’t geo-referenced everything already, just click on the orange ‘geo’ button and that will start to geotag the table.

3. Create your map

Screen Shot 2014-03-10 at 1.09.35 AM

Already you’re at this stage. You start by clicking ‘visualize’ in the top right hand corner. You can have a number of visualizations feeding from a single table if you want so this step is just the beginning. The table page you see will look exactly the same, the difference being that it has a title and a subtitle and is nearly a real thing.

Screen Shot 2014-03-14 at 2.43.56 PM

Click map view and you see what the dots look like when they’re mapped out:

Screen Shot 2014-03-10 at 1.10.11 AM

First thing to do is choose a map style — and you do that by clicking the basemap button. It also allows you to add your own custom style and I’ve added one for this map from the lovely collection by Stamen design (which you can do by hitting add yours).

This is where you choose:

Screen Shot 2014-03-10 at 1.10.35 AM

So, now you have a map and a background you like. Next step is making it do stuff.

4. Animate the map

You can style the map using CSS commands if you want to but I prefer to use the wizard, which is located at the right of the screen. You get a choice of a number of static map styles but the one on the right, torque, is the one you want. When you hit that button the map will start animating right away. You have to choose the column which has the date option in too.

Use the button below to select colours of your dots:

Screen Shot 2014-03-10 at 1.17.39 AM

Then you have some other options. I wanted the dots to add up rather than switch off and on, so I set cumulative on.

Screen Shot 2014-03-10 at 1.18.05 AM

You can also select how long you want the animation to last by changing durationMarker stroke is the little border around the outside of the dot — I often just switch that to zero. Trails will make the dots flash off and on the screen in a longer way, which can work well.

Screen Shot 2014-03-10 at 1.19.03 AM

The other key thing for this map is that I wanted different coloured dots. This meant that I had to edit the CSS file (there’s a CSS button on the right) which I changed to look like this:

Screen Shot 2014-03-14 at 4.58.01 PM

You can see how the name of the column (‘type_id’) is in the code, so it knows which number to use. And there’s a neat new feature that if you click on the colour hexcode you can actually pick another colour, like this:

Screen Shot 2014-03-14 at 4.59.12 PM

When you hit apply style you should be able to see the changes immediately. Then the map starts to look like this:

Screen Shot 2014-03-14 at 11.52.17 AM

And that’s it! CartoDB has a whole set of tutorials right here for you to use to help train you up — and I would love to see the cool maps you make.

About Simon Rogers

Data journalist, writer, speaker. Author of 'Facts are Sacred', from Faber & Faber and a range of infographics for children books from Candlewick. Edited and launched the Guardian Datablog. Now works for Google in California as Data Editor and is Director of the Sigma awards for data journalism.


10 thoughts on “How to make an animated map with CartoDB and Torque

  1. It’s amazing but how to scrap data from twitter in order to get time and locations of those tweets ? Thanks

    Posted by nitnelave | March 26, 2015, 8:53 am
  2. I wonder if it is possible to assign every position/time entry a value and that the bubble gets a size corresponding to that value?

    Posted by Dan | November 17, 2014, 4:22 pm
    • Sorry for my late reply – yes, it is possible but it’s not easy on the animated version (although it can be done simply with the static version). It involves fiddling with the CSS. Having said that, the results have never looked very impressive to me.

      Posted by Simon Rogers | December 2, 2014, 5:50 am
  3. Very Cool Simon. I loved your Super Bowl 2014: the pulse of the game on Twitter | CartoDB. Thank very much for the instructions. Brilliant!

    Posted by Meg Barbour | March 31, 2014, 12:18 am
  4. Great work Simon. Herne Hill doesn’t seem to be showing there mind.

    Posted by Kevin Sedgley | March 18, 2014, 11:59 am


  1. Pingback: Un resum de les entrades setmanals de Geoinquiets, amb comentari inicial setmana 17- 23 de març – ACTIG - September 27, 2016

  2. Pingback: Twitter Mapping: Foundations « Another Word For It - October 12, 2014

  3. Pingback: 지도와 데이터의 손쉬운 결합, CartoDB | Chris Choi's Blog - July 20, 2014

  4. Pingback: Train Waybills Unlock Crude Oil Mysteries | Inside Energy - June 25, 2014

  5. Pingback: Data Viz News [48] | Visual Loop - March 29, 2014

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

About me

Data journalist, writer, speaker. Author of 'Facts are Sacred', published by Faber & Faber and a new range of infographics for children books from Candlewick. Data editor at Google, California. Formerly at Twitter, San Francisco. Created the Guardian Datablog. All opinions on this site are mine, not my employers'. Read more >>

Free to share

Creative commons

Please share me around. Everything here is free to use under a Creative Commons Attribution-NonCommercial 3.0 Unported License

Follow me on Twitter

%d bloggers like this: