Improve your (musical) timing with CartoDB Time Isolines and derive the best data insights
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.
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:
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!
