Styling with Turbo Carto

Over the past few months, we have shared some introductory tidbits about our CartoCSS preprocessor Turbo Carto. Turbo Carto enables you to make thematic maps with a single line of code.

If you are familiar with CartoCSS, you know how intricate your stylesheet can get when building something like a choropleth map. With Turbo Carto, you remove the complexity of writing lines and lines of CartoCSS, and most importantly, with Turbo Carto, your styling is connected to your data. This is an exciting new way to think about thematic mapping for the web.

In this blog, I’ll walk through the basics of Turbo Carto, outlining its syntax followed by some example maps.

Syntax

Turbo Carto is built around the idea of ramps. You can apply a ramp to any traditional CartoCSS property used to define a map symbol’s size (-width), color (-fill), and even opacity (-opacity) based off an attribute in your data.

No matter which CartoCSS property you are ramping, Turbo Carto has a standard syntax you can follow:

#layer{property:ramp([attribute],(values),(filters),"mapping");}

property: the CartoCSS property you want to ramp with Turbo Carto

attribute: the attribute in your data you want to symbolize

values: how the attribute values will be styled (by color, by size, etc.)

filters: defines which values are assigned to which attribute values

mapping: defines how filters are applied (=,>=,<=,>,<)

To see this in action, let’s look at how we would build a choropleth map using traditional CartoCSS and then with Turbo Carto.

In the map below, we are symbolizing each block group by the percent of population 25 and older that holds a master’s degree in San Francisco and surrounding areas.

The data are classified using the quantiles method with five class breaks. Each polygon is colored according to the class it falls using a sequential color ramp. Dark colors indicate high values, and light colors, low values.

With Turbo Carto, we no longer have to hard code our class breaks. Of course this means fewer lines of CartoCSS to manage, but what’s even cooler is that if the values in our data change, our map will automatically update.

For example, if the values for masters_degree were updated, we no longer need to recalculate each class break and update the CartoCSS – Turbo Carto takes care of that!

Using the category() filter, Turbo Carto reads the first 5 colors in the list for the top 5 categories in the complaint attribute and then assigns the last color in the list (#888) as the default for all other values.

Ramping Multiple Properties

Turbo Carto also makes bivariate mapping easier than ever before. On a bivariate map, two visual variables are used to symbolize two different properties in the data.

Using the same 311 example, the map below uses color to show the type of complaint (as seen above) and symbol size to show the number of each complaint type that occured at the same location:

To make this map, we are ramping marker-fill with the categorical attribute complaint, and ramping marker-width using quantiles (with 5 classes), and varying the symbol size between 6-40 pixels depending on the number of a complaint type at a given location: