Tool Tips for CartoDB Torque

Tool Tips for CartoDB Torque


Now in its fourth year, Azavea’s Summer of Maps Program has become an important resource for non-profits and student GIS analysts alike.  Non-profits receive pro bono spatial analysis work that can enhance their organizational decision-making processes and programmatic activities, while students benefit from Azavea mentors’ expertise.   This year, three fellows worked on projects for six organizations that spanned a variety of topics and geographic regions.  This blog series documents some of their accomplishments and challenges during their fellowship.  Our 2015 sponsors Esri, Temple University Geography and Urban Professional Masters Studies Program and Betsy and Jesse Fink helped make this program possible.  For more information about the program, please visit the Summer of Maps website.

Every single map you will ever come across has at least one thing in common, they all show at least 2 dimensions, the X and the Y, the latitude and the longitude, the length and the width. But there is a third dimension that can be just as crucial in getting your message across and no, it’s not depth. It’s time.

Temporal data can be expressed with any unit of time that is associated with the events in your data, whether it be hours in a day, days in a week, weeks in a month, years or anything in between. Having a temporal element in your data adds an entirely new dimension and allows you to see patterns that might otherwise be hidden if the data was static. For example,Tyler Dahlberg, a 2013 Summer of Maps fellow and current Data Analytics team member, uncovered the seasonality of bike thefts using time series analysis for his project with the Greater Philadelphia Bicycle Coalition.  Before the advent of online mapping technologies and powerful APIs, showing temporal data on maps was limited to either color coding different features or by creating multiple iterations of the same map that each show the data as a series of snapshots in time.

But never fear! This is the future and in the future the web mapping gurus at CartoDB have created an easy to use tool called Torque, a library designed to allow you to display temporal data points to your web map.

Types of Data to show on a Torque Map

  • Growth of an event or program
  • Events that vary at different times of day
  • Events that vary by season/time of year
  • Frequency of clustering of certain events

This Summer, I made a Torque map for the Pennsylvania Horticultural Society showing the growth of their vacant lot cleaning program.While the torque function wizard is very easy to use, I am going to go show you a few tips and tricks to tweak the styling and functionality of your torque map using CartoDB’s built in CSS window.

1. Format Dataset

In order to use the torque function, your dataset needs a field that contains a dates in mm/dd/yyyy format. This must be a point dataset, as Torque cannot display temporal elements in polygon or line data at this time. After uploading the data, set your time column to the “date” data type and CartoDB will convert it to a readable format. You may also consider removing any outlying dates that could cause a large gap in the animation.

2. Select Torque option from visualization wizard

3. Set Time Column to the field which contains the temporal data

4. Select Cumulative

Having accumulating points is great for showing showing the growth of a program or event. With this option turned off, the points only appear during the period of time currently displayed.

5. Point Symbols

I chose the rectangle shape because it symbolizes land parcels in this case, which are often square.

6. Set Number of Steps

The steps are the number of different time frames the animation cycles through from start to finish. Set it according to the range of different dates in your dataset. This must be set to 64, 128, 256, 512, or 1028.

7. Customize CSS

With some of the standard options set, click on the CSS tab on the sidebar to further customize the Torque map. The default option is to have three [frame-offset]’s, which create larger point symbols beneath the initial point to create and effect that the point is growing. When working with large datasets however, this effect can be cluttering and take up too much space on your map. I deleted the third frame offset and changed the marker-widths from 4 and 6 to 2 and 4. This allows my points to still have the effect that they are growing without consuming more space. When using offset frames, set the marker-line-width to 0 or else the border of the multiple marker symbols will overlap and distort the color.

You can also take this time to set the torque-animation-duration which, similarly to the number of steps, should be set according to the number of data points and the range of dates. Unlike the number of steps however, the duration can be any positive number.

Finally, I deleted the blend mode option from the CSS. The blend option can either lighten or darken overlapping points and frame offsets, however by doing so, it can distort your color scheme and sometimes be visually misleading.

/** torque visualization */
Map {
 marker-fill-opacity: 0.9;
 marker-line-width: 0;
 marker-type: rectangle;
 marker-width: 2;
 marker-fill: #81bd41;
#phs_maintainance_points_2000[frame-offset=1] {
#phs_maintainance_points_2000[frame-offset=2] {

You can explore the final map below: Growth of Philadelphia LandCare Torque Map.