Want to create an animation from a set of data? If the data has spatial and chronological components, you can view it as a map-based movie. I’ve been making short animations from Capital Bikeshare data using Processing, a mini Java development tool. Here are steps you can follow to try making your own movies.


The animation uses three types of data:

  • background data: map, geographic features, stations
  • chronological vector data: start location & time, end location & time
  • overlay data: summary information, such as date and time, and activity level

The background data is static; it doesn’t change over the course of the animation. (Though in other examples it certainly could.) The chronological vector data is the bikeshare trip history. Each trip shows the starting and ending stations, and the start and stop times. I draw overlay data on top to clarify the visualization, to add data that wouldn’t be obvious otherwise.

The tool I use to put this together is Processing, a free Java environment designed to simplify coding graphics. We’ll create a QuickTime-format movie, with a “.mov” extension, so you’ll need to download QuickTime or some other way of viewing those files.

Here are the steps I went through to create the above animation.

To get started, download a copy of the “cabi2012Q4” Processing program I wrote. It’s available on GitHub (or go to mvjantzen.com/cabi/cabi2012Q4.pde). When you open the PDE file, you should be prompted to move it into the appropriate “sketch” folder, which you should do.

Next, you need to download the data from CaBi. They regularly release trip history data every quarter, posted to capitalbikeshare.com/trip-history-data. I downloaded the “4th Quarter 2012” file, 53MB. Your Processing folder should have a “data” folder, which is where you should store the file, 2012-4th-quarter.csv. You will need to edit the file, just to remove the first line, which contains header information.

The trips include the names of the stations where they start and stop, but not the geographic coordinates. To figure that out, you need a reference file that lists coordinates for each station. The official list of stations is capitalbikeshare.com/data/stations/bikeStations.xml, but there are some caveats. The problem is CaBi occasionally changes the names of stations. Those changes are not made retroactively to the trip history data, so those trips are not going to match to the current list. Also, CaBi doesn’t include the White House station, presumably because it’s not open to the public, and they don’t want apps to show that it is available. So, my code has some contortions to make sure all trips are matched to a valid station.

Processing has a function that can read XML files from the Internet, so you don’t have to copy that list to your own computer. I use loadXML() to read XML, and loadStrings() to read the CSV file that you unzip.

Drawing the Background Data

Getting a map for the background is a bit tricky. All our geographic data is in latitude and longitude, but the output has to be converted into pixels. That mapping needs to align with the map, so you need a map where you know the exact latitude and longitude of the boundaries. It’s also nice to be able to choose the size of your map. Because I couldn’t find a map-making tool that met my requirements, I created my own tool. See Made-to-Order Mapmaking. Before using it, you need to get the bounds of the data. My Processing program has a function called showBounds() which scans the station list and configures an URL which you can copy from the console into a browser:

mvjantzen.com/tools/map.php?width=480&height=360&top=38.95481&left=-77.1207&bottom=38.803123&right=-76.93723

I picked a width and height of 480 by 360 in hopes of getting a good fit for YouTube, but you can pick any size. The tool doesn’t yet allow you to add a margin, so I manually tweaked the north and south borders to make sure the stations on the edge had a bit of breathing room. The modified URL is

mvjantzen.com/tools/map.php?width=480&height=360&top=38.95482&left=-77.1207&bottom=38.803113&right=-76.93723

You can also adjust the boundaries within the tool, but tweaking the URL let me ensure both sides were moved the same amount (0.00001 degrees). You can then save the map image and put in it your “data” folder. The OpenStreetMap Copyright and License lets you use their maps for other applications. The map at the bottom of the page is the one you want to copy (or for this project, just copy my own version of cabiregion2.png). The new map will be labeled “Bounding box with padding” below. It uses the format “(north, east) to (south, west).” My Processing program has a section near the top where four variables must be assigned to these values, in order for the drawings to align to the map. (This has already been done in the example.)

I used the Mac Preview program to modify the image in order for the vector data and overlay to show up better. I reversed the colors, then desaturated it to make it black-and-white, then darkened it.

Before I figured out how to get maps with precise boundaries, I just drew the main geologic features on my own. You can see an early example of this in Watching Bikeshare Stations Grow Unbalanced. Sometimes this simplified background might be better.

For each frame of the animation, I copy the map to my display window, then draw a circle for every station.

Drawing the Chronological Vector Data

Though the data covers 91 days, I’m going to animate only a single day. The standard rate for animations is 30 frames a second. If I take a snapshot of the data at 1-minute intervals, I’ll get 1,440 frames (24 times 60), which will take 48 seconds to display. At this rate, a 15-minute bike trip will flash by in half a second. CaBi’s source data shows start and stop times rounded to the nearest minute, but you could still speed up your snapshot interval. The code interpolates the rider’s location, by taking the ratio between the start and stop times and applying it to start and stop locations.

I picked Friday, Oct 5, 2012 because it has the highest ridership of the quarter; 8,165 trips.

There are endless options for how to visualize trips. In this example, I use different colors for casual and registered riders, green for casual and blue for registered. I then add red, using the same scale that shows how far along their trip they are, so at the beginning I add no red, but at the end of their trip they get the maximum redness added. That changes green to yellow, and blue becomes purple.

Drawing the Overlay Data

As the day progresses, I build a histogram showing how many bikes are in use at that moment. This information gets drawn on top of everything else. I label the histogram with the date and time and the number of bikes in use.

The histogram needs to know in advance how wide it will be at the peak of activity. The program has a bit of code that finds the maximum number of bikes in use. Once I have that number, I comment-out the code and just assign the max right away, to same time the next time I run the program.

Creating the Animation

When you run the program, it creates an image for each frame, stored in a folder below where the PDE file resides. There are many tools that can stitch frames together into a movie, but the one I use is the one included with Processing. From the Tools menu, select Movie Maker. Just drag the folder that was created to store the images into the first field, and check “same size as originals,” then “create movie.” You could add a sound file (such as one from Musopen), but it doesn’t work that well if the sound file isn’t the same duration as your animation.

The Java code is not quite “one size fits all.” As you deal with other data sources, you’ll find that you have to do a lot of work to clean up bad data, or data that does not match up to your reference file.

As more agencies publish more open data, we’ll have more opportunities to visualize that data to make sense of our world and build tools that help guide future decisions.

You can see more variations of this data in Neighborhood CaBi Animations. If you use the program to make your own animation, please leave a link to your creation in the comments.

Animating Data with Processing

4 Responses to “Animating Data with Processing”