Predominance

Census tracts styled with a unique value renderer, visual variables, and an Arcade expression to show income by educational attainment

What is a predominance style?

A predominance style colors features based on the category with the highest (or predominant) number among a set of similar categories. You can use this style to map anything that involves sub-categories of a larger population.

The winner of an election
The predominant language spoken at home
The most common race/ethnicity in a region

How a predominance style works

This style requires writing an Arcade expression that returns the category with the largest number. The following expression returns a string for the predominant educational attainment level for a given feature.

Use dark colors for code blocks
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />

    <title>
      ArcGIS Developer Guide: Predominance educational attainment
    </title>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.23//esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.23//"></script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <!--ARCADE SCRIPTS-->

    <script type="text/plain" id="predominance">

      // store field values in variables with
      // meaningful names. Each is the total count
      // of people that attained each education level

      var noHighSchool = $feature.NOHS_CY;
      var someHighSchool = $feature.SOMEHS_CY;
      var highSchool = $feature.HSGRAD_CY;
      var ged = $feature.GED_CY;
      var someCollege = $feature.SMCOLL_CY;
      var associates = $feature.ASSCDEG_CY;
      var bachelors = $feature.BACHDEG_CY;
      var grad = $feature.GRADDEG_CY;

      var all = [
        noHighSchool, someHighSchool, highSchool,
        ged, someCollege, associates,
        bachelors, grad,
      ];

      // Match the maximum value with the label
      // of the respective field and return it for
      // use in a UniqueValueRenderer

      return Decode( Max(all),
        noHighSchool, 'No high school',
        someHighSchool, 'Some high school',
        highSchool, 'High school diploma',
        ged, 'GED',
        someCollege, 'Some college',
        associates, 'Associate\'s degree',
        bachelors, 'Bachelor\'s degree',
        grad, 'Master\'s degree or higher',
      'n/a' );

    </script>

    <script>
      require([
        "esri/config",
        "esri/WebMap",
        "esri/views/MapView",
        "esri/layers/FeatureLayer",
        "esri/widgets/Legend",
        "esri/widgets/Expand"
      ],(esriConfig,WebMap, MapView, FeatureLayer, Legend, Expand)=> {

        esriConfig.apiKey = "YOUR_API_KEY";

        function createSymbol(color) {
          return {
            type: "simple-fill",
            color: color,
            outline: {
              width: 0.3,
              color: [255, 255, 255, 0.2]
            }
          };
        }


        const colors = [ "#00b6f1", "#d9bf0d", "#6a28c7", "#c44245", "#b9a087", "#ab579d", "#78aea0", "#1e8553" ];
        const predominanceArcade = document.getElementById("predominance").text;
        const renderer = {
          type: "unique-value",
          valueExpression: predominanceArcade,
          valueExpressionTitle: "Predominant educational attainment",
          uniqueValueInfos: [
            {
              value: "Master's degree or higher",
              symbol: createSymbol(colors[0])
            }, {
              value: "Bachelor's degree",
              symbol: createSymbol(colors[1])
            }, {
              value: "Associate's degree",
              symbol: createSymbol(colors[2])
            }, {
              value: "Some college",
              symbol: createSymbol(colors[3])
            }, {
              value: "GED",
              symbol: createSymbol(colors[4])
            }, {
              value: "High school diploma",
              symbol: createSymbol(colors[5])
            }, {
              value: "Some high school",
              symbol: createSymbol(colors[6])
            }, {
              value: "No high school",
              symbol: createSymbol(colors[7])
            }
          ]
        };


        const layer = new FeatureLayer({
          portalItem: {
            id: "1cbb0faa0f1f424bbe213bfae9319309"
          },
          renderer: renderer,
          blendMode: "multiply"
        });

        const map = new WebMap({
          portalItem: {
            id: "9cf503b654144873a8e33f996f91ba1d"
          },
          layers: [ layer ]
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
          scale: 577790,
          center: [ -117.8099, 34.0441 ],
          constraints: {
            snapToZoom:false
          }
        });

        view.ui.add(new Expand({
          content: new Legend({
            view: view
          }),
          view: view,
          expanded: false
        }), "top-right");

      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

Once the expression is authored, create a unique value renderer and set the following:

Reference the Arcade expression in the valueExpression property.
Create unique value info objects for each of the expected values returned from the expression.

Examples

Predominant value

The following example colors each census tract based on the predominant educational attainment of adults age 25 years or older.

ArcGIS API for JavaScriptUse dark colors for code blocks
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />

    <title>
      ArcGIS Developer Guide: Predominance educational attainment
    </title>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.23//esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.23//"></script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <!--ARCADE SCRIPTS-->

    <script type="text/plain" id="predominance">

      // store field values in variables with
      // meaningful names. Each is the total count
      // of people that attained each education level

      var noHighSchool = $feature.NOHS_CY;
      var someHighSchool = $feature.SOMEHS_CY;
      var highSchool = $feature.HSGRAD_CY;
      var ged = $feature.GED_CY;
      var someCollege = $feature.SMCOLL_CY;
      var associates = $feature.ASSCDEG_CY;
      var bachelors = $feature.BACHDEG_CY;
      var grad = $feature.GRADDEG_CY;

      var all = [
        noHighSchool, someHighSchool, highSchool,
        ged, someCollege, associates,
        bachelors, grad,
      ];

      // Match the maximum value with the label
      // of the respective field and return it for
      // use in a UniqueValueRenderer

      return Decode( Max(all),
        noHighSchool, 'No high school',
        someHighSchool, 'Some high school',
        highSchool, 'High school diploma',
        ged, 'GED',
        someCollege, 'Some college',
        associates, 'Associate\'s degree',
        bachelors, 'Bachelor\'s degree',
        grad, 'Master\'s degree or higher',
      'n/a' );

    </script>

    <script>
      require([
        "esri/config",
        "esri/WebMap",
        "esri/views/MapView",
        "esri/layers/FeatureLayer",
        "esri/widgets/Legend",
        "esri/widgets/Expand"
      ],(esriConfig,WebMap, MapView, FeatureLayer, Legend, Expand)=> {

        esriConfig.apiKey = "YOUR_API_KEY";

        function createSymbol(color) {
          return {
            type: "simple-fill",
            color: color,
            outline: {
              width: 0.3,
              color: [255, 255, 255, 0.2]
            }
          };
        }


        const colors = [ "#00b6f1", "#d9bf0d", "#6a28c7", "#c44245", "#b9a087", "#ab579d", "#78aea0", "#1e8553" ];
        const predominanceArcade = document.getElementById("predominance").text;
        const renderer = {
          type: "unique-value",
          valueExpression: predominanceArcade,
          valueExpressionTitle: "Predominant educational attainment",
          uniqueValueInfos: [
            {
              value: "Master's degree or higher",
              symbol: createSymbol(colors[0])
            }, {
              value: "Bachelor's degree",
              symbol: createSymbol(colors[1])
            }, {
              value: "Associate's degree",
              symbol: createSymbol(colors[2])
            }, {
              value: "Some college",
              symbol: createSymbol(colors[3])
            }, {
              value: "GED",
              symbol: createSymbol(colors[4])
            }, {
              value: "High school diploma",
              symbol: createSymbol(colors[5])
            }, {
              value: "Some high school",
              symbol: createSymbol(colors[6])
            }, {
              value: "No high school",
              symbol: createSymbol(colors[7])
            }
          ]
        };


        const layer = new FeatureLayer({
          portalItem: {
            id: "1cbb0faa0f1f424bbe213bfae9319309"
          },
          renderer: renderer,
          blendMode: "multiply"
        });

        const map = new WebMap({
          portalItem: {
            id: "9cf503b654144873a8e33f996f91ba1d"
          },
          layers: [ layer ]
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
          scale: 577790,
          center: [ -117.8099, 34.0441 ],
          constraints: {
            snapToZoom:false
          }
        });

        view.ui.add(new Expand({
          content: new Legend({
            view: view
          }),
          view: view,
          expanded: false
        }), "top-right");

      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

Predominance with opacity

In a predominance visualization, the color representing the predominant value will shade the whole polygon with the same opacity and saturation as any neighboring polygon even if the predominant value wins over other values by the slimmest margin.

Adding an opacity variable helps emphasize strong predominant values and wash out features where the predominant value is relatively weak. The Arcade expression can return the margin between the predominant value and the second place value, or it can be simpler and return the share of the predominant value as a percentage of all values.

ArcGIS API for JavaScriptUse dark colors for code blocks
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />

    <title>
      ArcGIS Developer Guide: Predominance with opacity
    </title>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.23//esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.23//"></script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <!--ARCADE SCRIPTS-->

    <script type="text/plain" id="predominance">

      // store field values in variables with
      // meaningful names. Each is the total count
      // of people that attained each education level

      var noHighSchool = $feature.NOHS_CY;
      var someHighSchool = $feature.SOMEHS_CY;
      var highSchool = $feature.HSGRAD_CY;
      var ged = $feature.GED_CY;
      var someCollege = $feature.SMCOLL_CY;
      var associates = $feature.ASSCDEG_CY;
      var bachelors = $feature.BACHDEG_CY;
      var grad = $feature.GRADDEG_CY;

      var all = [
        noHighSchool, someHighSchool, highSchool,
        ged, someCollege, associates,
        bachelors, grad,
      ];

      // Match the maximum value with the label
      // of the respective field and return it for
      // use in a UniqueValueRenderer

      return Decode( Max(all),
        noHighSchool, 'No high school',
        someHighSchool, 'Some high school',
        highSchool, 'High school diploma',
        ged, 'GED',
        someCollege, 'Some college',
        associates, 'Associate\'s degree',
        bachelors, 'Bachelor\'s degree',
        grad, 'Master\'s degree or higher',
      'n/a' );

    </script>

    <script>
      require([
        "esri/config",
        "esri/WebMap",
        "esri/views/MapView",
        "esri/layers/FeatureLayer",
        "esri/widgets/Legend",
        "esri/widgets/Expand"
      ],(esriConfig,WebMap, MapView, FeatureLayer, Legend, Expand)=> {
        esriConfig.apiKey = "YOUR_API_KEY";
        function createSymbol(color) {
          return {
            type: "simple-fill",
            color: color,
            outline: {
              width: 0.3,
              color: [255, 255, 255, 0.2]
            }
          };
        }


        const colors = [ "#00b6f1", "#d9bf0d", "#6a28c7", "#c44245", "#b9a087", "#ab579d", "#78aea0", "#1e8553" ];
        const predominanceArcade = document.getElementById("predominance").text;
        const renderer = {
          type: "unique-value",
          valueExpression: predominanceArcade,
          valueExpressionTitle: "Predominant educational attainment",
          uniqueValueInfos: [
            {
              value: "Master's degree or higher",
              symbol: createSymbol(colors[0])
            }, {
              value: "Bachelor's degree",
              symbol: createSymbol(colors[1])
            }, {
              value: "Associate's degree",
              symbol: createSymbol(colors[2])
            }, {
              value: "Some college",
              symbol: createSymbol(colors[3])
            }, {
              value: "GED",
              symbol: createSymbol(colors[4])
            }, {
              value: "High school diploma",
              symbol: createSymbol(colors[5])
            }, {
              value: "Some high school",
              symbol: createSymbol(colors[6])
            }, {
              value: "No high school",
              symbol: createSymbol(colors[7])
            }
          ]
        };



        renderer.visualVariables = [{
          type: "opacity",
          valueExpression: `
            var all = [
              $feature.NOHS_CY, $feature.SOMEHS_CY, $feature.HSGRAD_CY,
              $feature.GED_CY, $feature.SMCOLL_CY, $feature.ASSCDEG_CY,
              $feature.BACHDEG_CY, $feature.GRADDEG_CY
            ];
            var predominantValue = Max(all);
            var total = Sum(all);

            return (predominantValue / total) * 100;
          `,
          valueExpressionTitle: "% of people comprising the dominant educational attainment group",
          stops: [
            { value: 22, opacity: 0.05, label: "< 22%" },
            { value: 40, opacity: 1.0, label: "> 40%" }
          ]
        }];


        const layer = new FeatureLayer({
          portalItem: {
            id: "1cbb0faa0f1f424bbe213bfae9319309"
          },
          renderer: renderer,
          blendMode: "multiply"
        });

        const map = new WebMap({
          portalItem: {
            id: "9cf503b654144873a8e33f996f91ba1d"
          },
          layers: [ layer ]
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
          scale: 577790,
          center: [ -117.8099, 34.0441 ],
          constraints: {
            snapToZoom:false
          }
        });

        view.ui.add(new Expand({
          content: new Legend({
            view: view
          }),
          view: view,
          expanded: false
        }), "top-right");

      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

Predominance with size

Many times in demographic maps, large features represent areas with fewer people. In a predominance visualization, the colors of these large features can dominate the view, thus making them appear more influential or important than they actually are.

Adding a size variable that returns the sum of all categories considered in the predominance expression can help provide additional context to the user. This requires switching from a fill symbol to a marker symbol.

This is particularly important for election maps where relatively unimportant large areas dominate the view more than high population areas.

ArcGIS API for JavaScriptUse dark colors for code blocks
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />

    <title>
      ArcGIS Developer Guide: Predominance with size
    </title>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.23//esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.23//"></script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <!--ARCADE SCRIPTS-->

    <script type="text/plain" id="predominance">

      // store field values in variables with
      // meaningful names. Each is the total count
      // of people that attained each education level

      var noHighSchool = $feature.NOHS_CY;
      var someHighSchool = $feature.SOMEHS_CY;
      var highSchool = $feature.HSGRAD_CY;
      var ged = $feature.GED_CY;
      var someCollege = $feature.SMCOLL_CY;
      var associates = $feature.ASSCDEG_CY;
      var bachelors = $feature.BACHDEG_CY;
      var grad = $feature.GRADDEG_CY;

      var all = [
        noHighSchool, someHighSchool, highSchool,
        ged, someCollege, associates,
        bachelors, grad,
      ];

      // Match the maximum value with the label
      // of the respective field and return it for
      // use in a UniqueValueRenderer

      return Decode( Max(all),
        noHighSchool, 'No high school',
        someHighSchool, 'Some high school',
        highSchool, 'High school diploma',
        ged, 'GED',
        someCollege, 'Some college',
        associates, 'Associate\'s degree',
        bachelors, 'Bachelor\'s degree',
        grad, 'Master\'s degree or higher',
      'n/a' );

    </script>

    <script>
      require([
        "esri/config",
        "esri/WebMap",
        "esri/views/MapView",
        "esri/layers/FeatureLayer",
        "esri/widgets/Legend",
        "esri/widgets/Expand"
      ],(esriConfig,WebMap, MapView, FeatureLayer, Legend, Expand)=> {

        esriConfig.apiKey = "YOUR_API_KEY";

        function createSymbol(color) {
          return {
            type: "simple-marker",
            color: color,
            outline: {
              width: 0.3,
              color: [0, 0, 0, 0.2]
            }
          };
        }



        const colors = [ "#00b6f1", "#d9bf0d", "#6a28c7", "#c44245", "#b9a087", "#ab579d", "#78aea0", "#1e8553" ];
        const predominanceArcade = document.getElementById("predominance").text;
        const renderer = {
          type: "unique-value",
          valueExpression: predominanceArcade,
          valueExpressionTitle: "Predominant educational attainment",
          uniqueValueInfos: [
            {
              value: "Master's degree or higher",
              symbol: createSymbol(colors[0])
            }, {
              value: "Bachelor's degree",
              symbol: createSymbol(colors[1])
            }, {
              value: "Associate's degree",
              symbol: createSymbol(colors[2])
            }, {
              value: "Some college",
              symbol: createSymbol(colors[3])
            }, {
              value: "GED",
              symbol: createSymbol(colors[4])
            }, {
              value: "High school diploma",
              symbol: createSymbol(colors[5])
            }, {
              value: "Some high school",
              symbol: createSymbol(colors[6])
            }, {
              value: "No high school",
              symbol: createSymbol(colors[7])
            }
          ]
        };



        renderer.visualVariables = [{
          type: "size",
          valueExpression: `
            var all = [
              $feature.NOHS_CY, $feature.SOMEHS_CY, $feature.HSGRAD_CY,
              $feature.GED_CY, $feature.SMCOLL_CY, $feature.ASSCDEG_CY,
              $feature.BACHDEG_CY, $feature.GRADDEG_CY
            ];
            var total = Sum(all);
            return total;
          `,
          valueExpressionTitle: "Population 25+",
          minSize: "2px",
          maxSize: "48px",
          minDataValue: 1000,
          maxDataValue: 15000
        }];


        const layer = new FeatureLayer({
          portalItem: {
            id: "1cbb0faa0f1f424bbe213bfae9319309"
          },
          renderer: renderer,
          blendMode: "multiply"
        });

        const map = new WebMap({
          portalItem: {
            id: "9cf503b654144873a8e33f996f91ba1d"
          },
          layers: [ layer ]
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
          scale: 288895,
          center: [ -117.8099, 34.0441 ],
          constraints: {
            snapToZoom:false
          }
        });

        view.ui.add(new Expand({
          content: new Legend({
            view: view
          }),
          view: view,
          expanded: false
        }), "top-right");

      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

Tutorials

Style a feature layer

Use symbols and renderers to style feature layers.

Style layers in a web map

Use Map Viewer to style layers in a web map.

Services

Feature service

Add, update, delete, and query feature data.

API support

Different APIs have different levels of support for data-driven visualization.

	Unique types	Class breaks	Visual variables	Time	Multivariate	Predominance	Dot density	Relationship
ArcGIS API for JavaScript
ArcGIS Runtime API for Android
ArcGIS Runtime API for iOS
ArcGIS Runtime API for Java
ArcGIS Runtime API for .NET
ArcGIS Runtime API for Qt
ArcGIS API for Python

Full supportPartial supportNo support

Tools

Map Viewer

Create, explore, and share web maps for 2D applications.

Scene Viewer

Create, explore, and share web scenes for 3D applications.

Vector tile style editor

Style vector tile basemap layers for applications.

PreviousMultivariate NextDot density

DocumentationMapping APIs and location services

Predominance

Was this page helpful?

Was this page helpful?