Styling Guides

Choropleth Map for Statistical Data

A choropleth map is a thematic map where geographic regions are colored, shaded, or patterned in relation to a value. You can use statistical data of counties, provinces, countries, and populations. CARTO Builder offers advanced map styling with CartoCSS and TurboCARTO for choropleth maps.

The selected data column from a choropleth map layer determines the values used to display a type of color scheme (sequential, diverging, or qualitative). These color schemes represent data in each region of the map.

Are your data values normalized? As a general rule, be sure to normalize your numeric data before importing data for choropleth maps into CARTO. Using raw numbers may misrepresent data; such as displaying the raw count, instead of displaying the normalized area, to represent the population density.

A Choropleth Map for Election Data

This guide describes how to make a choropleth map using 2016 US Presidential election data, which requires a map layer containing polygon geometries (counties) with a numeric column (the percentage votes for each party).

  • Import the template .carto file packaged from the “Download resources” of this guide and create the map. Builder opens displaying US election data as a map layer.

    Click on “Download resources” from this guide to download the zip file to your local machine. Extract the zip file to view the .carto file(s) used for this guide.

The objective of this guide is to style a map by two color schemes:

  • The county winner for each unit; using style by value to apply a sequential color scheme to the winner data column.

  • The percentage of votes for each party (pct_dem and pct_gop); by applying TurboCARTO to define color schemes, based on variables in your data. If the values in your data change, map styling updates automatically.

Style by Value

To visualize the percentage votes for the two parties through a sequential color scheme, select the number column pct_dem from the map layer.

  1. Select the election_data map layer.

The STYLE tab opens, enabling you to apply styling options for the map layer.

  1. Click the COLOR to open the color properties for the map layer. The SOLID tab opens by default.

  2. Click BY VALUE to select the pct_dem column for the counties.

When a number column is selected from a map layer, Builder assigns a default sequential CARTOColor scheme.

CHEATSHEET: Color Schemes

Choosing the right colors for your data aids storytelling, engages the map reader, and visually guides the viewer to uncover interesting patterns that may otherwise be missed. When styling by value, different types of color schemes appear, based on the selected data column from your map layer. Builder provides you with CARTOColor and ColorBrewer schemes, and enables you to customize your own color schemes.

  • Sequential Scheme: Color schemes that use variations in lightness make these ideal for displaying orderable, or numeric data. The variations progress from low to high, using colors that range from light to dark (or vice versa).
  • Qualitative Scheme: Color schemes that demonstrate categorical differences in qualitative data, which use different hues, with consistent steps in lightness and saturation.
  • Diverging Scheme: Color schemes that highlight values above and below an interesting mid-point in quantitative data. The middle color is assigned to the critical value, with two sequential type palettes at either end, assigned to values above or below.
  • Since the values are percentage votes, select Equal Interval as the classification method.

CHEATSHEET: Classification Methods

Classification methods group data into ranges. CARTO supports classifying numeric fields for graduated symbology through the following methods:

  • Quantiles: A quantile classification is well suited to linearly distributed data. Each quantile class contains an equal number of features. There are no empty classes or classes with too few or too many values. This can be misleading sometimes, since similar features can be placed in adjacent classes or widely different values can be in the same class, due to equal number grouping.
  • Jenks: Breaks the data into classes based on natural groupings inherent in the data. The groups are formed by decreasing the variance within classes and increasing the variance between different classes -- a 1D k-means. Since Jenks are data-specific classifications, they are not useful for comparing multiple maps built from different underlying data.
  • Equal Interval: Divides the range of attribute values into equal-sized subranges. The class breaks specified by the number of buckets selected. Usually used for percentage values, it is best applied to familiar data columns such as temperature, ratios, and other relative attribute values.
  • Heads/Tails: Best for data with heavy-tailed distributions, such as exponential decay or lognormal curves. This classification is done through dividing values into large (head) and small (tail) around the arithmetic mean. The division procedure repeats continuously until the specified number of bins is met, or there is only one remaining value left. This method, more than others, helps to reveal the underlying scaling pattern of far more small values than large ones.
  • Category: Classifies a limited (or fixed) number of possible values, based on an attribute of a particular group, or nominal category.
  • Define 4 buckets as the number of data ranges to group the data.

Each bucket is assigned a color according to a sequential scheme. The applied styling clearly symbolizes the range of the percentage of votes for the Democratic party in each county.

Selected number value

As a best practice, be sure that you truly understand your data before changing the classification method. Editing the classification method can dramatically change your map, and the result can often be misleading if the selected method does not reflect the underlying pattern of the data.

Apply Multiple Color Schemes

To visualize data with two color schemes, one for each party, apply custom styling using CartoCSS. Instead of having to apply multiple, complex, lines of CartoCSS code for each property, TurboCARTO syntax combines CartoCSS processing into a single line of code for your choropleth map values.

  1. From the STYLE tab, click the slider button from VALUES to CARTOCSS.

Once you apply custom CartoCSS styling for any map layer, you cannot switch back to the VALUES selections; unless you clear the CartoCSS styling applied. Your custom styling will be removed.

The CartoCSS view displays how TurboCARTO syntax combines CartoCSS processing into a single line of code. You can see that the polygon fill applied a TurboCATO ramp to the pct_dem column.

TurboCARTO code in CartoCSS

  1. Copy and paste the following CartoCSS code to apply a second color scheme for the percentage of votes.
    
      #layer {
        line-width: 1;
        line-color: #FFF;
        line-opacity: 0.5;

        [winner = 'Democratic'] {
          polygon-fill: ramp([pct_dem], (#CCFDFE, #6193C7, #9CC0E3, #006AAB), equal);
        }

        [winner = 'GOP'] {
          polygon-fill: ramp([pct_gop], (#FBD0D0, #E99D99, #CF615D, #B02029), equal);
        }
      }
    
  
  • TurboCARTO processes the polygon-fill:ramp based on the pct_dem value, which is the percentage of Democratic votes.

  • Additionally, TurboCARTO processes the polygon-fill:ramp based on the pct_gop value, which displays a second color scheme. The second color scheme generates custom hex colors, based on the result of the winning party. If the values in your data change, the map updates automatically.

Mutiple color schemes applied

  1. To enhance the cartography even further, apply the following CartoCSS code to remove the defined line properties, and replace it with enhanced polygon style properties:
  
    #layer {
      polygon-gamma: 0.4;
      polygon-opacity: 0.9;
      [winner = 'Democratic'] {
        polygon-fill: ramp([pct_dem], (#CCFDFE, #6193C7, #9CC0E3, #006AAB), equal);
      }
      [winner = 'GOP'] {
        polygon-fill: ramp([pct_gop], (#FBD0D0, #E99D99, #CF615D, #B02029), equal);
      }
      polygon-fill: #d3d3d3;
    }
  

Download the final .carto map from the “Download resources” of this guide to view the advanced CartoCSS properties that were applied:

  • A second map layer (state_points_8) with custom marker properties, and text labels applied, to display state labels on the map.
  • A third map layer (state_bound_8) to define the boundary lines between states.

Other Resources