Create a custom visualization using Arcade | Sample Code

Explore in the sandbox

View live

This sample demonstrates how to create a data-driven visualization of unique values with an Arcade expression. Arcade is useful for creating visualizations in a FeatureLayer based on a value generated from an expression instead of a field value.

In this sample, a layer whose features represent counties in the U.S. is added to the map. Each feature contains a total count for registered republicans, democrats, and independents in the county. 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, there isn't a field for dominant political party. Arcade allows you to write a simple expression that evaluates to the predominant party. This expression is passed to the valueExpression property of the UniqueValueRenderer. The Legend component shows both the predominant party color and the strength of predominance.

Arcade expression to determine predominant political party
Use dark colors for code blocksCopy
50
50
50
50
50
50
50
50
50
50
50
50
50
50
50
50
50
50
50
50
50
50
50
50
50
50
50
50
50
50
50
50
50
50
50
50
50
50
50
50
50
50
50
50
50
50
50
50
50
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
70
    <script type="text/plain" id="winning-party">
      // store field values in variables with
      // meaningful names. Each is the total count
      // of votes for the respective party

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

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

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

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

Arcade expression showing strength of predominant political party
Use dark colors for code blocksCopy
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
79
80
81
82
83
84
85
86
87
88
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
    <script type="text/plain" id="strength">
      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>

The Arcade expressions used in this sample are described in more detail in the Visualization profile of the Arcade expressions guide.