Next-Gen Styling for Data-Driven Maps, AKA CartoCSS preprocessor.
tl;dr Enables adding functions to CartoCSS that can be evaluated asynchronously.
It's all about ramps.
You can create color and symbol size ramps with just a single line of code. You no longer need to worry about calculating the bins for your thematic map, if your data changes your CartoCSS changes.
Very basic introduction to CartoCSS
In CartoCSS you usually assign values to properties and apply filters in order to change those values based on some data attributes.
The general form for properties and filters is:
An example of a filter based on price attribute:
Turbo-Carto high-level API for ramps is as follows:
propertyis the CartoCSS property you want to create.
[attribute]usually is a column/key name from your dataset.
propertyis gonna get for different filters.
propertyis gonna get the different values.
mappingis the type of filter that will be applied: <, <=, >, >=, =.
So for the previous example you could write (see examples/readme/example-0.css):
In this case, the first value is the default value.
If you want to have a category map, to generate a CartoCSS like:
You can use the same approach but specifying the mapping type to be an equality (see examples/readme/example-1.css):
See that in this case the last value is the default value, and if the number of values is equal to the number of filters it won't have a default value, like in (see examples/readme/example-2.css):
That's nice, but it is still unlinked from the actual data/attributes.
Mappings default values
<=: Last provided value will be the default value.
=: Last provided value will be the default value, if the number of values is equal to the number of filters it won't have a default value.
>=: First provided value will be the default value.
Associate ramp filters to your data
To generate ramps based on actual data you have to say what kind of quantification you want to use, for that purpose Turbo-Carto provides some shorthand methods that will delegate the filters computation to different collaborators.
Let's say you want to compute the ramp using jenks as quantification function (see examples/readme/example-3.css):
Or generate a category map depending on the room_type property (see examples/readme/example-4.css):
You can override the mapping if you know your data requires an more strict filter (see examples/readme/example-5.css):
Shorthand methods include:
category(): default mapping is
equal(): default mapping is
headtails(): default mapping is
jenks(): default mapping is
quantiles(): default mapping is
For color schemes, there are a couple of handy functions to retrieve color palettes:
You can create a choropleth map using Reds color palette from colorbrewer (see examples/readme/example-6.css):
Or a category map using Bold color palette from cartocolor (see examples/readme/example-7.css):
Go to CARTOcolors website to discover the wide diversity of color schemes that are available.
Sometimes is really useful to have a continuous range that can be split in as many bins as desired, so you don't have to worry about how many values you have to provide for your calculated filters. You only specify the start and the end, and the values are computed linearly (see examples/readme/example-8.css):
It is kind of similar to color palettes where depending on your number of filters you get the correct number of values.
- Node >=0.10
- npm >=2.x
To install the rest of the dependencies just run:
Current examples expect to have CartoDB's SQL API running at http://development.localhost.lan:8080/. It should have a
Examples using a cli tool:
$ ./tools/cli.js examples/populated_places.css # will use a dummy datasource, check tools/cli.js source$ ./tools/cli.js examples/populated_places.css --datasource sql --query 'select * from populated_places_simple'
examples/index.html, to test different styles using CartoDB's SQL API as datasource.
Tests suite can be run with:
That will check code style and run the tests.