Create a renderer using Arcade Expressions | ArcGIS API for JavaScript 3.26

This sample demonstrates how to create a predominance visualization with an arcade expression. Arcade is useful for creating data-driven visualizations based on a value generated from an expression instead of a field value. Read more details in theArcade help topic.

In this case, we have a feature service whose features represent counties in the U.S. each feature contains a total count for registered republicans, democrats, and independents. If you wanted to shade each county with a different color depending on the dominant party in the county, you could do so by referencing an additional field indicating the dominant party. In this case, we don't know what the dominant party is for each feature because there isn't a field for it. Arcade allows us to write a simple expression that evaluates to the predominant party. This expression is passed to the valueExpression property of the UniqueValueRenderer.

You can also optionally pass an arcade expression to a visual variable. In this sample we also pass an expression to the opacityInfo visual variable to indicate which counties are more lopsided in their support for a particular party.

Code

<!DOCTYPE html>
<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
<title>Arcade</title>

<link rel="stylesheet" href="https://js.arcgis.com/3.26/esri/css/esri.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.26/dijit/themes/claro/claro.css">
<script src="https://js.arcgis.com/3.26/"></script>

<style>
  html, body, #viewDiv {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  #info{
    top: 0px;
    right: 0px;
    position: absolute;
    z-index: 99;
    opacity: 0.9;
    background-color: white;
    padding: 0px 0px 0px 10px;
    max-width: 200px;
  }
</style>



<script type="text/plain" id="winning-party">

  ////////// PREDOMINANT POLITICAL PARTY ////////////

  // Arcade expression that determines the predominant political
  // party in each feature. First, feature values are assigned
  // to meaningful variable names and placed in an array.
  // Then the maximum count is determined with the Max() function.
  // That count is then compared with each variable using Decode()
  // Once a match is found, a string for the corresponding party is
  // returned.

  var republican = $feature.MP06025a_B;
  var democrat = $feature.MP06024a_B;
  var independent = $feature.MP06026a_B;
  var parties = [republican, democrat, independent];

  return Decode(Max(parties),
    republican, 'republican',
    democrat, 'democrat',
    independent, 'independent',
    'n/a');

</script>

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

  //////////// STRENGTH OF WIN //////////////

  // Arcade expression determining the strength of the predominant party
  // in each feature based on the proportion of that party to all others.
  // A simple percentage is calculated and returned for the max value.

  var republican = $feature.MP06025a_B;
  var democrat = $feature.MP06024a_B;
  var independent = $feature.MP06026a_B;
  var parties = [republican, democrat, independent];
  var total = Sum(parties);
  var max = Max(parties);

  return (max / total) * 100;

</script>

<script>
  require([
    "esri/map",
    "esri/layers/FeatureLayer",
    "esri/renderers/UniqueValueRenderer",
    "esri/symbols/SimpleFillSymbol",
    "esri/symbols/SimpleLineSymbol",
    "esri/Color",
    "esri/dijit/PopupTemplate",
    "esri/dijit/Legend",
    "dojo/domReady!"
  ], function(Map, FeatureLayer, UniqueValueRenderer,
    SimpleFillSymbol, SimpleLineSymbol, Color,
    PopupTemplate, Legend
  ) {

    var map = new Map("viewDiv", {
      basemap: "dark-gray",
      center: [ -95, 39 ],
      zoom: 5
    });

    // Get the expression from the `winning-party` arcade script

    var winnerArcade = document.getElementById("winning-party").text;

    // Add the expression to a unique value renderer and create a fill
    // symbol for each possible value.

    var renderer = new UniqueValueRenderer({
      valueExpression: winnerArcade,
      valueExpressionTitle: "Counties by dominant party among registered voters",
      uniqueValueInfos: [{
        value: "democrat",
        symbol: createSymbol("#00c3ff"),
        label: "Democrat"
      }, {
        value: "republican",
        symbol: createSymbol("#ff002e"),
        label: "Republican"
      }, {
        value: "independent",
        symbol: createSymbol("#faff00"),
        label: "Independent/other party"
      }]
    });

    // Get the expression from the `strength` arcade script

    var strengthArcade = document.getElementById("strength").text;

    // Add the expression to an opacityInfo visual variable. Counties where
    // the predominant party is nearly equal with the others (33%) are very
    // transparent. Counties where the dominant party makes up at least 44%
    // of all people registered to a party are fully opaque.

    var opacityVisualVariable = {
      type: "opacityInfo",
      valueExpression: strengthArcade,
      valueExpressionTitle: "Share of registered voters comprising the dominant party",
      stops: [
        { value: 33, opacity: 0.05 },
        { value: 44, opacity: 1.0 }
      ]
    };
    // set the visual variable on the layer
    renderer.setVisualVariables([ opacityVisualVariable ]);

    // Create the layer and add it to the map

    var serviceUrl = "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/counties_politics_poverty/FeatureServer/0";

    var layer = new FeatureLayer(serviceUrl, {
      outFields: [ "MP06025a_B", "MP06024a_B", "MP06026a_B", "COUNTY", "STATE", "POP18UP_CY" ],
      infoTemplate: new PopupTemplate({
        title: "{COUNTY}, {STATE}",
        description: "Population: {POP18UP_CY}",
        fieldInfos: [{
          fieldName: "MP06024a_B",
          label: "Democrat",
          format: {
            digitSeparator: true,
            places: 0
          }
        }, {
          fieldName: "MP06025a_B",
          label: "Republican",
          format: {
            digitSeparator: true,
            places: 0
          }
        }, {
          fieldName: "MP06026a_B",
          label: "Independent/Other",
          format: {
            digitSeparator: true,
            places: 0
          }
        }],
        mediaInfos: [{
          type: "piechart",
          caption: "",
          value: {
            fields: [ "MP06024a_B", "MP06025a_B", "MP06026a_B" ]
          }
        }]
      })
    });

    layer.setRenderer(renderer);
    map.addLayer(layer);

    // Create a legend when the map loads

    map.on("load", function(evt){
      var legend = new Legend({
        map: map,
        layerInfos: [{
          layer: layer,
          title: "Dominant political party by number of registered voters for each U.S. County"
        }]
      }, "legendDiv");

      legend.startup();
    });

    // Creates a SimpleFillSymbol based on an input color

    function createSymbol (color){
      var outline = new SimpleLineSymbol()
        .setColor(new Color([ 0, 0, 0, 0.2 ]))
        .setWidth(0.5);

      return new SimpleFillSymbol()
        .setColor(new Color(color))
        .setOutline(outline);
    }
  });

</script>

</head>

<body class="claro">
  <div id="viewDiv"></div>
  <div id="info"><div id="legendDiv"></div></div>
</body>

</html>

	Site wide shortcuts
`?`	Bring up this help dialog
`esc`	Dismiss this help dialog
`gh`	Go to Home
`gg`	Go to Guide
`ga`	Go to API Reference
`gs`	Go to Sample Code
`gt`	Scroll to top of page
`spacebar`	Scroll page down
`shift spacebar`	Scroll page up
`gb`	Scroll to bottom of page

	Sample Code
`/`	Focus search
`es`	Explore in the Sandbox
`s`	Share in online code editor
`vl`	View live example

Explore in the sandbox Share View live sample Download as a zip file

Description

Code

Keyboard shortcuts

Explore in the sandbox Share
View live sample
Download as a zip file