Visual variables

Weather stations styled with a simple render and visual variables to show air temperature

What are visual variables?

Visual variables are objects that allow you to override one or more properties of a renderer's symbols based on a numeric data value returned from a field or an expression. This is an alternative to visualizing numeric data with a class breaks style. Rather than separate values into discrete ranges of data, visual variables linearly interpolate between data stops to create a smooth, continuous (unclassed) visualization.

There are four visual variables that can be overridden with data values.

  1. Color
  2. Size
  3. Opacity
  4. Rotation

How visual variables work

All visual variables are added to a renderer's visualVariables property. A renderer can contain more than one visual variable, but adding more than one at a time may cause confusion.

Multivariate visualizations

Learn how to effectively use multiple visual variables in a single renderer.

Color

A color variable 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.

ArcGIS JS API
Expand
Use dark colors for code blocksCopy
55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 56 57 58 59 60 61 62 63 64 65 66 67 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68 68
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
          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" }
              ]
            }
          ]
Expand

Size

A size variable 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.

ArcGIS JS API
Expand
Use dark colors for code blocksCopy
53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 54 55 56 57 58 59 60 61 62 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63
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: "size",
              field: "WIND_SPEED",
              minDataValue: 5,
              maxDataValue: 60,
              minSize: 4,
              maxSize: 22
            }
          ]
Expand

Rotation

A rotation variable 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.

ArcGIS JS API
Expand
Use dark colors for code blocksCopy
55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 56 57 58 59 60 61 62 62 62 62 62 62 62 62 62 62 62 62 62 62 62 62 62 62 62 62 62 62 62 62 62 62 62 62 62 62 62 62 62 62 62 62 62 62 62 62 62 62 62 62 62 62 62 62
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"
            }
          ]
Expand

Opacity

An opacity variable 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.

ArcGIS JS API
Expand
Use dark colors for code blocksCopy
74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90 90
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
          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 }
              ]
            }
          ]
Expand
Image preview of related sample Data-driven continuous color

Data-driven continuous color

Data-driven continuous color

Image preview of related sample Size visual variable themes

Size visual variable themes

Size visual variable themes

Image preview of related sample Data-driven extrusion

Data-driven extrusion

Data-driven extrusion

Image preview of related sample Visualize data with rotation

Visualize data with rotation

Visualize data with rotation

Image preview of related sample Data-driven continuous size

Data-driven continuous size

Data-driven continuous size

Image preview of related sample Data-driven opacity

Data-driven opacity

Data-driven opacity

Image preview of related sample Generate data-driven continuous size visualization

Generate data-driven continuous size visualization

Generate data-driven continuous size visualization

Image preview of related sample Thematic visualization with realistic 3D symbols

Thematic visualization with realistic 3D symbols

Thematic visualization with realistic 3D symbols

API support

2D3DArcadePointsLinesPolygonsMesh
Unique types
Class breaks
Visual variables1
Time
Multivariate
Predominance
Dot density
Charts
Relationship
Smart Mapping2333
Full supportPartial supportNo support
  • 1. Color only
  • 2. Size variable creators only supported for points
  • 3. Size variable creators not supported in 3D

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.