Torque visualizations using CartoDB.js

My #geopropósito for this year is learning Javascript. Quite useful if you want to know how to use all the APIs for webmapping. I started taking a very interesting course about understanding the weird parts of this language. Then I watched all the Javascript for GIS programmers free-tutorials made by Geospatial Training -especially, the one concerning APIs– and also attended the seminary about the ArcGIS API for Javascript organized by GeoDevelopers. But what I needed was practise. So I decided to instead of using the CartoDB editor, I would created my torque animated maps with the CartoDB.js library.

What is the code behind this map? First, it had Python at the backend. If you do not have yet read the post about how to capture data from the Twitter API, do it now! On the other hand, it has some interesting lines of CartoCSS and Javascript at the frontend. I am still working on it because there are some details to add such as title, legend and a better slider. But I believe the main skeleton is set up. First the CartoCSS:

You can observe that these lines are very similar to the ones found in the CartoCSS of a torque category map. But be careful because that’s tricky. Especially what you put as the torque category (column) and the categorical values. And now the Javascript code lines:

The more important part of the code above in my opinion is the SQL query. In this case is a little redundant, but when you have a more complex dataset (as this one where you have also negative values) it could be very handy. You could grab the whole code from here but I recommend you to have a look of all the CartoDB repositories, examples and tutorials.

GIS Analyst. Working at @CARTO and @ongawa4d.


  1. Graeme

    Con ayuda de mi bola de cristal estoy viendo un taller muy interesante sobre este tema para Geoinquietos Madrid. ¿O no?

Leave a Reply

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *