Improve your (musical) timing with CartoDB Time Isolines and derive the best data insights


Explore CartoDB's Time and Distance Isolines at SXSW, making tactical business planning easy. Measure pedestrian travel time between hotspots. Time is money!

This post may describe functionality for an old version of CARTO. Find out about the latest and cloud-native version here.
Improve your (musical) timing with CartoDB Time Isolines and derive the best data insights

SXSW Concerts Selector

Planning where to strategically go next can be a daunting task. There are numerous factors to consider  like time. At major festivals  like SXSW  planning how long it takes to move from place to place doesn’t have to be so intimidating anymore. Time and Distance Isolines (also called isochrones)  a new feature coming to the CartoDB platform  allows you to measure time directly through SQL statements. Time isolines provides insight and analysis on how long it takes pedestrians to move from one hotspot to the next  making tactical business planning a cinch.


Time and Distance Isolines is a visual way of showing how much time you need to get from a point to all surrounding places  by forming lines with points related to the same time. Businesses  as well as everyday people  can harness their power by determining through data the most efficient way to spend time. Because as we all know  time is money!


In this visualization  we focused only on musical events and concerts at SXSW  because you don’t often get the opportunity to bring music to your map! This data-driven visualization will show you how much time it takes to go from each venue and hotel in relation to other entertainment spots.

Scraping SXSW agenda data

The SXSW website has a nicely made agenda of events that screams  “Make a map out of me!”

However  not all data is created equal and sometimes you have to get your hands a little bit dirty to gather the data you want to see on your map. In this case we will scrape the website data  using a few simple lines of node.js and a few node libraries (namely request  cheerio  underscore  moment…): basically the ‘node survival kit for scraping.’

The whole process and data are visible in this repo: sxsw-schedule-csv.

After the scraping process  uploading this CSV data into a PostgreSQL table is a breeze using the CartoDB Import API.

This is where an important part of the magic happens: the addresses of the venues are automatically geocoded in the process  converting raw data into geo-data that can instantly be put on a map with the CartoDB Editor.

SXSW venues on the map

For further information on geocoding using the SQL API  see the Geocoding functions section of the Data Services API docs.

Creating isolines for each hotspot

CartoDB nicely abstracts the creation of time isolines geometries into a SQL function:

cdb_isochrone(the_geom  ‘walk’  Array[60  120  180])

The_geom being the center geometry of the isoline  ‘walk’ or ‘car’ the isoline mode  and the third array is a list of time intervals that will be used to create the actual lines.

But there are many more options : have a look at the documentation!

We want to show time isolines for each venue when the user clicks it on the map. We could run a dynamic query every time with the cdb_isochrone function  but as the service is subject to quota limitations  we’re going to prepare our geometries ahead using our sxsw_venues table:

to show a synthetical list of the closest events from a given venue.
To do that we'll determine  for each hotspot  if it can be placed inside each of the isoline geometries that we previously created (using a simple ST_Contains).

Grabbing artists data from Spotify

Wouldn’t it be better if the user could listen to the artists directly from the map? Our friends at Spotify have an amazing REST API that we used to match SXSW artist names to song samples and artist visuals.

We used two API endpoints:

The process uses a node.js script and the CartoDB Import and SQL APIs through the CartoDB node library. This library is currently under heavy improvements  so definitely keep an eye on it!

Have a look at the node script.

Creating the app

We put all of that together using CartoDB.js as the ‘nerve center’ of our app.

The meaty parts of the code are visible here: cartodb-sxsw-concerts on Github

You can see that we are making heavy use of templating  using underscore.js. This truly brings flexibility to our app by allowing dynamic HTML elements  dynamic SQL requests to CartoDB SQL APIs (we are ‘injecting’ venue ids  selected day  etc)  and CartoCSS. Allowing us to quickly edit styles without using CartoDB Editor.

Happy data mapping!