In the previous section we talked about using different types of input for ramp, but we always output colors picked from a list.
ramp supports to use other types of outputs and also CARTO VL includes some fixed constant palettes of colors. Let’s see it!
One way to output colors is to specify a list of colors, just like we have done in all the previous examples. This can be done with expressions like
ramp($dn, [blue, red]). But usage of named colors (
green…) is not enforced, any valid color expression is ok, for example:
ramp($dn, [rgb(200,220,222), rgba(200,120,22, 0.8)])
ramp($dn, [hsv(0,1,1), hsv(0.5,1,1)])
ramp($dn, [#00F, #F00])
ramp($dn, [blue, #F00])
ramp($dn, [opacity(blue, 0.4), opacity( #F00, 0.6),])
There is also another way to specify colors, and that is to use one of the built-in color palettes. We have built-in all the CARTOColors and ColorBrewer palettes. You can use them like this:
The complete list of CARTOColors can be seen here.
Let’s see all these options in actions!
When dealing with point data, an interesting visualization is the bubble-map. In a bubble-map, each point has a width that depends on a feature property.
Matching between numbers (the feature’s data) and other numbers (the point sizes) is a special case because basic math can create the required match without the need for the special function
ramp. However, using
ramp facilitates some advanced usages. In the following subsections we’ll see both approaches, learning how to create bubble maps like this:
ramp can be used in the same way it can be used with colors by replacing the colors with numbers. With this approach, the same implicit casts we talked before will be performed.
1 width: ramp($number, [0, 50])
Classified numerical properties are similar too:
1 width: ramp(globalQuantiles($number, 7), [1, 50])
Categorical properties can be used like before too, although normally, it doesn’t make sense to set the width by a categorical property:
1 width: ramp(buckets($cat, 'categoryA', 'categoryB'), [1, 50])
ramp($number, [0, 50]) works, and it probably works as expected. If
$number is a property with a minimum of 0 and a maximum of 300 in the dataset, a feature with
$number=150 is halfway in the
linear range. Therefore, ramp will output
However, this is probably not what you want. The reason for this is that a change of
3x in width is not perceive as a change of
3x, because we perceive the change of area, not the change of width, and the change of area when triplicating the width is not a
3x, but a
9x. Basic geometry tells us that the area of a circle is proportional to the square of its radius.
If we don’t want to accentuate differences we’ll need to take the square root. This can be done with:
1 2 // We'll need to take the square of the output values to specify the widths and not the areas width: sqrt(ramp($number, [0, 50^2]))
Similarly, classifiers can be re-mapped in the same way:
1 width: sqrt(ramp(globalQuantiles($number, 7), [1, 50^2]))
ramp is useful because it allows mapping most input to most values, interpolating the values if needed and providing implicit casts if they are convenient. However, it can be overkill when the matching is done from a numerical property to a numeric list.
For this case, using regular math is probably simpler and easier, while having the same, correct, results.
For example, the
width: ramp(sqrt(linear($number)), [0, 50]) is equivalent to
width: sqrt($number/globalMax($number))*50. And since sometimes we don’t want to normalize by the maximum value in the dataset, this could be reduced further to get
The last supported type of value for
ramp is the
Image type. Let’s see some examples:
As you can see, the features that weren’t specified in the
buckets list received the color gray and were represented with circles. As discussed above, this others bucket receive default values, but they can be overridden, even when working with images. Let’s see that:
1 symbol: ramp(buckets($featurecla, ['Admin-0 capital','Admin-1 capital','Populated place']), [star,triangle,marker], square)