Choropleth Map for Statistical Data

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.

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

  3. 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.

    • Since the values are percentage votes, select Equal Interval as the classification method.

    • 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

  2. 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

  3. 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, and 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