Custom Auto Style Color Schemes

Widget Guides

Custom Auto Style Color Schemes

In some cases, you may want to define a custom color scheme when auto style is applied. This is useful if you want to use colors schemes as an interactive legend, or if you want to make a color scheme more observable over a basemap.

  • When Auto style is applied to your widgets, the custom colors are applied to your filters and to your data!
  • When auto style is not applied, the dashboard inherits the default (or defined) widget color.

Depending on your data, custom color schemes can also be used to display expected patterns of visual perceptions. For example, this guide uses Drought Monitoring data to represent exceptional drought conditions based on location data. While default auto style clearly displays differences in data, we can apply our own "fiery" color scheme to visually represent high to low drought areas. This makes it easy to understand the severity of drought conditions.

Prepare your Dashboard and Auto Style Widgets

For Category and Histogram widgets, a default color scheme is applied when Auto style is selected. The widget color scheme that appears varies, depending on your data.

  1. Unzip the template .carto file packaged from "Download resources" of this guide, and import it to your account to create the map. Builder opens with USDM Life Sciences Data as the first and only map layer.

    View the blog, 3 Data Viz Hacks We Learned While Mapping Drought Data for the details behind the US Drought Monitor data. This map contains advanced TurboCARTO styling for defining thematic data.
  2. Use the widgets and apply Auto style to view the default color schemes that are applied to your data.

While the widgets clearly visualize differences in data, let's customize the auto style behavior to display custom colors.

Custom Colors for Category Auto Style

The custom auto style option appears under the widget behavior options in Builder. For Category widgets, you can customize the solid fill color of each category of data.

The categories that appear in Category widgets are dynamic and change, depending on your visualization. Builder currently enables you to customize up to ten category colors.
  1. From the WIDGETS pane in Builder, select the Drought Severity widget to edit the details.

    Drought severity category widget

  2. From the Behavior options, click the checkbox next to CUSTOM COLORS, which enables you to represent the widget values with custom colors.

    Custom auto style behavior

    A qualitative color scheme is applied.

  3. Click on the default color scheme to open the color picker.

    Default color scheme applied to category widget

  4. Click each category and apply the following HEX input colors to define a custom color for each category of data.

    • Category # 1 #e15383
    • Category # 2 #f67b77
    • Category # 3 #ffa679
    • Category # 4 #ffd08e
    • Category # 5 #fef6b5

      Hex input field for each category

Notice how Auto style is starting to display a better color scheme for drought data, displaying dark colors for high drought values and light colors for low drought values. The choice of using a fiery color scheme is often visually perceived with dry weather conditions.

Custom color scheme applied to auto style

Custom Color Scheme for Histogram Auto Style

For Histogram widgets, you can select a custom color scheme (or apply a custom color set) for histogram data.

  1. Click Auto style from the Drought Conditions (Percent Area) histogram widget.

    For details about Histogram widgets, view the Filter a Range of Numerical Values with Histogram Widgets Guide.
  2. From the WIDGETS pane, select Drought Conditions (Percent Area) widget to edit the details.

  3. From the Behavior options, click the checkbox next to CUSTOM COLORS, which enables you to represent the widget values with a custom color scheme.

    A sequential color scheme is applied.

  4. Click on the default color scheme to open the color scheme picker.

    Default auto style histogram

  5. Modify the number of buckets to 5 and keep the default the classification method to group data (to be applied when auto style is applied from the widget).

    Define number of buckets

  6. Select a color scheme, or click Custom color set to build your own color scheme from scratch.

    Custom auto style histogram

Notice how Auto style displays a custom color scheme of drought data, displaying light colors for low percentages and dark colors for high percentages of data.

Download the final .carto map from the "Download resources" of this guide, and to view the custom color schemes that were applied to all of the widgets.