Visual variables

Color

A color variableA color variable is a visual variable that defines the color of a symbol based on a numeric data value returned from a field or expression. If an expression is used, the color can be defined from a color ramp with a set of pre-defined color ranges.Learn more overrides the color of a symbol based on a numeric data value returned from a field or expression along a continuous color ramp. Numeric data should be normalized before visualizing it with color, especially for polygon layers.

Color visual variables require the following:

1. A reference to a data value either from a field name, or an Arcade expression.
2. At least two color stops that match data values to colors. The colors of symbols with data values between the designated stops are linearly interpolated.

The following example renders the current temperature reported by weather stations along a continuous color ramp.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
        visualVariables: [
          {
            type: "color",
            field: "TEMP",
            stops: [
              { value: 20, color: "#2b83ba" },
              { value: 35, color: "#abdda4" },
              { value: 50, color: "#ffffbf" },
              { value: 65, color: "#fdae61" },
              { value: 80, color: "#d7191c" },
            ],
          },
        ],

Size

A size variableA size variable is a visual variable that defines the size of a symbol based on a numeric data value returned from a field or expression.Learn more overrides the size of a symbol based on a numeric data value returned from a field or expression. This does not apply to renderers with fill symbols. To visualize a polygon layer by size, you should use a marker symbol, which will be rendered at the centroid of the polygon.

The size visual variable can be defined in two different ways:

1. With size stops, or
2. Matching a maxDataValue with a maxSize, and a minDataValue with a minSize.

Size visual variables require the following:

1. A reference to a data value either from a field name, or an Arcade expression.
2. At least two size stops that match data values to sizes. The sizes of symbols with data values between the designated stops are linearly interpolated.

The following example renders the current wind speed reported by weather stations along a continuous size ramp.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
        visualVariables: [
          {
            type: "size",
            field: "WIND_SPEED",
            minDataValue: 5,
            maxDataValue: 60,
            minSize: 4,
            maxSize: 22,
          },
        ],

Rotation

A rotation variableA rotation variable is a visual variable that defines the rotation of a symbol based on a numeric data value returned from a field or expression. This value is typically used to rotate symbols that indicate directionality.Learn more sets the rotation of a symbol based on a numeric data value returned from a field or expression. This is typically done to rotate symbols that indicate directionality, such as:

• wind direction
• traffic flow
• aspect

Rotation visual variables are different from other visual variables in that they only require a data value without the need for stops.

1. A reference to a data value either from a field name, or an Arcade expression.
2. An optional rotation type indicating a geometry or arithmetic rotation.

The following example visualizes weather stations with arrow markers and rotates them based on wind direction.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
        visualVariables: [
          {
            type: "rotation",
            field: "WIND_DIRECT",
            rotationType: "geographic",
          },
        ],

Opacity

An opacity variableAn opacity variable defines the opacity of a symbol based on a numeric data value returned from a field or expression. It is typically used to make features more or less prominent than others.Learn more overrides the opacity of a symbol based on a numeric data value returned from a field or expression. This variable is typically used to subdue features or make some more prominent than others.

Opacity visual variables require the following:

1. A reference to a data value either from a field name or an Arcade expression.
2. At least two opacity stops that match data values to opacity values between 0 and 1. The opacity of symbols with data values between the designated stops are linearly interpolated.

The following example visualizes the predominant crop for each U.S. county. The renderer has an opacity variable to emphasize counties with a lot of cropland and subdue counties that have very little cropland by comparison.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
        visualVariables: [
          {
            type: "opacity",
            field: "TotalFarmedAcres",
            normalizationField: "AREA_ACRES",
            legendOptions: {
              showLegend: false,
            },
            stops: [
              { value: 0.0, opacity: 0.2 },
              { value: 0.1, opacity: 0.5 },
              { value: 0.5, opacity: 0.8 },
              { value: 0.9, opacity: 1.0 },
            ],
          },
        ],