Skip to content

Instantly share code, notes, and snippets.

@iriberri
Last active August 29, 2015 14:06
Show Gist options
  • Save iriberri/e832f36c68bd04995bb2 to your computer and use it in GitHub Desktop.
Save iriberri/e832f36c68bd04995bb2 to your computer and use it in GitHub Desktop.
Torque-color-size

Styling Torque maps in size and color

Introduction

Usually, you can style your maps with CartoCSS in an easy way by using constraints with the actual value of your columns.

#places[status="Sunny"] { marker-fill: #A6CEE3; }

Nevertheless, this is not how Torque works.

When Torque library render points it does not render exactly the same points you have in the database, it aggregates the points in clusters in order to speedup rendering and data transfer.

So imagine you have this cartocss

Map { -torque-aggregation-function:"count(cartodb_id)"; -torque-resolution: 2; }

This implies that for the current zoom, Torque will fetch points in clusters of 2x2 pixels. Every cluster has a value, that value is calculated using -torque-aggregation-function, so in this case the value will be the number of points inside that cluster. That value can be accessed from CartoCSS using the variable value.

This means that Torque doesn't understand your string/numerical constraints, as it only knows about the variable value.

How to adapt your data for Torque

Depending on your needs, you may need to build a new column (or a SQL query) that will allow you to differentiate your rows with respect to several columns in a unique variable.

Creating a variable to differentiate the data

Defining a variable to be used by Torque can be achieved by many different methods.

Here we will show some approaches, but this will change depending on the number of variables you have and on the differences you want to show in the map.

In order to distinguish color OR size

If you have a unique column with several categories and you want to show each of them in a different way in Torque, you can use some of the following approaches:

  • By color:

    • One column which has two different values: Create a new column of type number. Then go to the SQL panel and use the following query:

    UPDATE _tablename_ SET _newcolumnname_ = (CASE WHEN _column_='Category 1' THEN 1 ELSE 2 END)

    • One column which has more than two different values: Create a new column of type number. Now, you have to give some number to each one of the categories. Take into account that you have to be able to differentiate the categories afterwards by using these numbers, so make them representative enough.

    This is an example for three different values:

      `UPDATE _tablename_ SET _newcolumnname_ = (CASE WHEN _column_='Category 1' THEN 1 WHEN _column_='Category 2' THEN 5 ELSE 10 END)`
    
  • By size: You will be able to use directly this column. Make sure it is a number column!

In order to distinguish color AND size
  • If you want to distinguish by color two categories: PENDING

  • If you want to distinguish by color more than two categories: PENDING

Creating an aggregation function

The default aggregation function that is used in Torque is:

´-torque-aggregation-function:"count(cartodb_id)";´

You may need to use different ones depending on what you want to be shown in the map. Take into account that you can use here Postgres aggregate functions like count, max, min, avg, sum...

It's very likely that the most useful for you is the avg function, that will display the average of the data you have. If you need to show some cummulative records, the sum function may be more suitable for your needs.

This way, in your CartoCSS code you should use:

´-torque-aggregation-function:"avg(newcolumnname)";´

Other examples would be:

´-torque-aggregation-function:"round(avg(newcolumnname))";´ ´-torque-aggregation-function:"sum(newcolumnname)";´ ´-torque-aggregation-function:"max(newcolumnname)";´ ´-torque-aggregation-function:"min(newcolumnname)";´

Building your constraints with CartoCSS

Defining the constraints in order to distinguish the different cases depends directly on the way you modeled the new column to be used by Torque.

Let us focus first in the case about two categories in order to differentiate them by color.

You will have in your table something similar to:

PENDING

And your CartoCSS code should be similar to:

PENDING

[...]

´-torque-aggregation-function:"round(avg(newcolumnname))";´

[...]

PENDING

Now, you should take into account that you have two possible values might appear in the same location (defined by -torque-resolution) that will be averaged, according to -torque-aggregation-function.

References: https://github.com/CartoDB/torque/wiki/How-spatial-aggregation-works (by @javisantana)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment