Multivariate data visualization

Weather stations styled with a simple renderer and visual variables to display wind speed, direction, and air temperature

What is multivariate data visualization?

Multivariate data visualization involves visualizing more than one data value in a single renderer. This is done for many reasons, including to:

View the relationship between two or more variables
Compare or contrast the difference between two variables
View spatial patterns that may not be related among several variables at one time.

How multivariate data visualizations work

Multivariate visualizations can be done by adding more than one visual variable to a simple renderer. Common combinations include the following:

Color and size
Size and rotation
Size, rotation, and color

You can create multivariate visualizations using many other combinations of visual variables as well, including opacity.

Examples

Color and size

Color and size are typically used to show the relationship between two variables or to show a rate with a color variable, and the magnitude of a variable using a size variable.

The following example visualizes how humidity influences the heat index, or the "feels like" temperature using color and size.

color is used to visualize relative humidity
size is used to visualize the difference between the heat index (feels like temperature) and the measured air temperature at a weather station.

ArcGIS JS API
Expand
Use dark colors for code blocksCopy
51
51
51
51
51
51
51
51
51
51
51
51
51
51
51
51
51
51
51
51
51
51
51
51
51
51
51
51
51
51
51
51
51
51
51
51
51
51
51
51
51
51
51
51
51
51
51
51
51
51
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
72
72
72
72
72
72
72
72
72
72
72
72
72
72
72
72
72
72
72
72
72
72
72
72
72
72
72
72
72
72
72
72
72
72
72
72
72
72
72
72
72
72
72
72
72
72
          visualVariables: [
            {
              type: "size",
              valueExpression: "$feature.HEAT_INDEX - $feature.TEMP",
              valueExpressionTitle: "Difference in 'feels like' temperature from air temperature",
              minDataValue: 0,
              maxDataValue: 30,
              minSize: 4,
              maxSize: 24
            }, {
              type: "color",
              field: "R_HUMIDITY",
              stops: [
                { value: 20, color: "#ffefdc" },
                { value: 35, color: "#edac90" },
                { value: 50, color: "#da6843" },
                { value: 65, color: "#a03523" },
                { value: 80, color: "#660202" }
              ]
            }
          ]
Expand

Size and rotation

Size variables are good for visualization total counts or magnitudes. Rotation and size are commonly paired together to map weather data, such as wind. Rotation indicates the direction of flow, while size indicates the wind speed.

ArcGIS JS API
Expand
Use dark colors for code blocksCopy
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
          visualVariables: [
            {
              type: "size",
              field: "WIND_SPEED",
              minDataValue: 5,
              maxDataValue: 60,
              minSize: 4,
              maxSize: 24
            }, {
              type: "rotation",
              field: "WIND_DIRECT",
              rotationType: "geographic"
            }
          ]
Expand

Size, rotation, and color

In rare cases, you can effectively use three visual variables together. In the example below, we add a color variable to the wind visualization to represent air temperature. This visualization allows the end user to view patterns of wind and temperature together in one visual.

Size - wind speed
Rotation - wind direction
Color - air temperature

ArcGIS JS API
Expand
Use dark colors for code blocksCopy
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
57
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
103
103
103
103
103
103
103
103
103
103
103
103
103
103
103
103
103
103
103
103
103
103
103
103
103
103
103
103
103
103
103
103
103
103
103
103
103
103
103
103
103
103
103
103
103
103
          visualVariables: [
            {
              type: "rotation",
              field: "WIND_DIRECT",
              rotationType: "geographic"
            },
            {
              type: "size",
              field: "WIND_SPEED",
              minDataValue: 5,
              maxDataValue: 60,
              minSize: {
                type: "size",
                valueExpression: "$view.scale",
                // adjust the min size by scale
                stops: [
                  { value: referenceScale, size: 8 },
                  { value: referenceScale*2, size: 6 },
                  { value: referenceScale*4, size: 4 },
                  { value: referenceScale*8, size: 2 }
                ]
              },
              maxSize: {
                type: "size",
                valueExpression: "$view.scale",
                // adjust the max size by scale
                stops: [
                  { value: referenceScale, size: 40 },
                  { value: referenceScale*2, size: 30 },
                  { value: referenceScale*4, size: 20 },
                  { value: referenceScale*8, size: 10 }
                ]
              }
            },
            {
              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

Best practices

Using more than one visual variable adds complexity to the visualization. This makes it more difficult for the end user to understand the message. You should always carefully consider whether using multiple variables in one view is preferable to displaying separate views of the data.

Other multivariate styles

You don't need visual variables to create multivariate visualizations. The following guide pages demonstrate how to create multivariate visualizations with other renderer types.

Create a custom visualization using Arcade

Thematic multivariate visualization (3D)

Thematic visualization with realistic 3D symbols

Scale feature sizes based on real world sizes (2D)

Clustering with visual variables

API support

	3D	Lines	Polygons	Mesh
Unique types
Class breaks
Visual variables				¹
Time
Multivariate
Predominance
Dot density
Charts
Relationship
Smart Mapping	²	³	³	³

Full supportPartial supportNo support

1. Color only
2. Size variable creators only supported for points
3. Size variable creators not supported in 3D