1

I'm trying to make an animated map using the Torque Cat feature in CartoDB editor.

But I could not figure out how to edit the cartoCSS to vary both bubble size and color based on my dataset. I want to vary the bubble size based on a column with numbers (number of A), and also vary the color based on another column with strings (country name).

According to the documentation, it is not possible to use more than one column.

cluster does not contain values for all the columns, you can only use value variable you would need to use an aggregation function for strings

A blog post by CartoDB's Andrew Hill on Torque examples did not address such issue too.

Anyone has experience working on this issue?

2

You could create new categories based upon two-variable conditions.

Apply a query like this one:

SELECT 
  cartodb_id,
  time_column,
  the_geom_webmercator,
  numbers,
  categories
  CASE
    WHEN categories LIKE 'cat1' AND numbers <50 THEN 1
    WHEN categories LIKE 'cat1' AND numbers >=50 THEN 2
    WHEN categories LIKE 'cat2' AND numbers <50 THEN 3
    WHEN categories LIKE 'cat2' AND numbers >=50 THEN 4
    WHEN categories LIKE 'cat3' AND numbers <50 THEN 5
    WHEN categories LIKE 'cat3' AND numbers >=50 THEN 6
    END new_cat
FROM
  table

Creating a new dataset from that query would improve further performance.

You could then create a 'Torque Cat' visualization, based on new_cat column. This wizard uses the CDB_Math_Mode() to get the most repeated value in the grid cell, and passes it as value.

Then, adding as many CartoCSS rules as you need, you could style the map to your needs.

Map {
-torque-frame-count:256;
-torque-animation-duration:30;
-torque-time-attribute:"actor_postedtime";
-torque-aggregation-function:"CDB_math_mode(new_cat)";
-torque-resolution:8;
-torque-data-aggregation:linear;
}

#layer{
  comp-op: lighter;
  marker-fill-opacity: 0.9;
  marker-line-color: #FFF;
  marker-line-width: 0;
  marker-line-opacity: 1;
  marker-type: ellipse;
  marker-width: 6;
  marker-fill: #0F3B82;

  [value=1]{
    marker-fill:red;
    marker-width:10
  }
  [value=2]{
    marker-fill:red;
    marker-width:15;
  }
  [value=3]{
    marker-fill:blue;
    marker-width:10;
  }
  [value=4]{
    marker-fill:blue;
    marker-width:15;
  }
  [value=5]{
    marker-fill:yellow;
    marker-width:10;
  }
  [value=6]{
    marker-fill:yellow;
    marker-width:15;
  }

}
#layer[frame-offset=1] {
 marker-width:8;
 marker-fill-opacity:0.45; 
}
#layer[frame-offset=2] {
 marker-width:10;
 marker-fill-opacity:0.225; 
}
  • Thanks @Ernesto got the idea. The same new_cat can also be created beforehand in spreadsheet before uploading to CartoDB. – user3591660 Jun 9 '16 at 9:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.