Multivariate data visualization | ArcGIS Maps SDK for JavaScript

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


42 collapsed lines
1
<!doctype html>
2
<html>
3
  <head>
4
    <meta charset="utf-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
6
    <title>Esri Developer Guide: Visual variables (size and color)</title>
7
    <style>
8
      html,
9
      body,
10
      #viewDiv {
11
        height: 100%;
12
        margin: 0;
13
      }
14
    </style>
15

16
    <link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/light/main.css" />
17
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
18
    <script type="module" src="https://js.arcgis.com/5.0/"></script>
19

20
    <script type="module">
21
      const [Map, MapView, FeatureLayer, Legend, Expand] = await $arcgis.import([
22
        "@arcgis/core/Map.js",
23
        "@arcgis/core/views/MapView.js",
24
        "@arcgis/core/layers/FeatureLayer.js",
25
        "@arcgis/core/widgets/Legend.js",
26
        "@arcgis/core/widgets/Expand.js",
27
      ]);
28

29

30
      const renderer = {
31
        type: "simple",
32
        symbol: {
33
          type: "simple-marker",
34
          style: "circle",
35
          color: [50, 50, 50],
36
          outline: {
37
            color: [255, 255, 255, 0.5],
38
            width: 0.5,
39
          },
40
          size: "8px",
41
        },
42

43
        visualVariables: [
44
          {
45
            type: "size",
46
            valueExpression: "$feature.HEAT_INDEX - $feature.TEMP",
47
            valueExpressionTitle: "Difference in 'feels like' temperature from air temperature",
48
            minDataValue: 0,
49
            maxDataValue: 30,
50
            minSize: 4,
51
            maxSize: 24,
52
          },
53
          {
54
            type: "color",
55
            field: "R_HUMIDITY",
56
            stops: [
57
              { value: 20, color: "#ffefdc" },
58
              { value: 35, color: "#edac90" },
59
              { value: 50, color: "#da6843" },
60
              { value: 65, color: "#a03523" },
61
              { value: 80, color: "#660202" },
62
            ],
63
          },
64
        ],
48 collapsed lines
65

66
      };
67

68

69
      // Set the renderer on the feature layer
70
      const layer = new FeatureLayer({
71
        portalItem: {
72
          id: "cb1886ff0a9d4156ba4d2fadd7e8a139",
73
        },
74
        title: "Current weather conditions",
75
        renderer: renderer,
76
      });
77

78
      const map = new Map({
79
        basemap: {
80
          portalItem: {
81
            id: "ba223f982a3c4a0ea8c9953346e2a201",
82
          },
83
        },
84
        layers: [layer],
85
      });
86

87
      const view = new MapView({
88
        container: "viewDiv",
89
        map: map,
90
        scale: 36978595,
91
        center: [-80.48, 28.3],
92
        constraints: {
93
          snapToZoom: false,
94
        },
95
      });
96

97
      view.ui.add(
98
        new Expand({
99
          content: new Legend({
100
            view: view,
101
          }),
102
          view: view,
103
          expanded: false,
104
        }),
105
        "top-right",
106
      );
107
    </script>
108
  </head>
109
  <body>
110
    <div id="viewDiv"></div>
111
  </body>
112
</html>

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


46 collapsed lines
1
<!doctype html>
2
<html>
3
  <head>
4
    <meta charset="utf-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
6
    <title>Esri Developer Guide: Visual variables (size and rotation)</title>
7
    <style>
8
      html,
9
      body,
10
      #viewDiv {
11
        height: 100%;
12
        margin: 0;
13
      }
14
    </style>
15

16
    <link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/light/main.css" />
17
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
18
    <script type="module" src="https://js.arcgis.com/5.0/"></script>
19

20
    <script type="module">
21
      const [Map, MapView, FeatureLayer, Legend, Expand] = await $arcgis.import([
22
        "@arcgis/core/Map.js",
23
        "@arcgis/core/views/MapView.js",
24
        "@arcgis/core/layers/FeatureLayer.js",
25
        "@arcgis/core/widgets/Legend.js",
26
        "@arcgis/core/widgets/Expand.js",
27
      ]);
28

29
      const referenceScale = 9244650 * 2;
30

31

32
      const renderer = {
33
        type: "simple",
34
        symbol: {
35
          type: "simple-marker",
36
          // Arrow marker defined as SVG path
37
          path: "M14.5,29 23.5,0 14.5,9 5.5,0z",
38
          color: [50, 50, 50],
39
          outline: {
40
            color: [255, 255, 255, 0.5],
41
            width: 0.5,
42
          },
43
          angle: 180,
44
          size: "20px",
45
        },
46

47
        visualVariables: [
48
          {
49
            type: "size",
50
            field: "WIND_SPEED",
51
            minDataValue: 5,
52
            maxDataValue: 60,
53
            minSize: 4,
54
            maxSize: 24,
55
          },
56
          {
57
            type: "rotation",
58
            field: "WIND_DIRECT",
59
            rotationType: "geographic",
60
          },
61
        ],
48 collapsed lines
62

63
      };
64

65

66
      // Set the renderer on the feature layer
67
      const layer = new FeatureLayer({
68
        portalItem: {
69
          id: "cb1886ff0a9d4156ba4d2fadd7e8a139",
70
        },
71
        title: "Current weather conditions",
72
        renderer: renderer,
73
      });
74

75
      const map = new Map({
76
        basemap: {
77
          portalItem: {
78
            id: "ba223f982a3c4a0ea8c9953346e2a201",
79
          },
80
        },
81
        layers: [layer],
82
      });
83

84
      const view = new MapView({
85
        container: "viewDiv",
86
        map: map,
87
        scale: referenceScale,
88
        center: [-95, 38.5],
89
        constraints: {
90
          snapToZoom: false,
91
        },
92
      });
93

94
      view.ui.add(
95
        new Expand({
96
          content: new Legend({
97
            view: view,
98
          }),
99
          view: view,
100
          expanded: false,
101
        }),
102
        "top-right",
103
      );
104
    </script>
105
  </head>
106
  <body>
107
    <div id="viewDiv"></div>
108
  </body>
109
</html>

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


46 collapsed lines
1
<!doctype html>
2
<html>
3
  <head>
4
    <meta charset="utf-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
6
    <title>Esri Developer Guide: Multiple visual variables</title>
7
    <style>
8
      html,
9
      body,
10
      #viewDiv {
11
        height: 100%;
12
        margin: 0;
13
      }
14
    </style>
15

16
    <link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/light/main.css" />
17
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
18
    <script type="module" src="https://js.arcgis.com/5.0/"></script>
19

20
    <script type="module">
21
      const [Map, MapView, FeatureLayer, Legend, Expand] = await $arcgis.import([
22
        "@arcgis/core/Map.js",
23
        "@arcgis/core/views/MapView.js",
24
        "@arcgis/core/layers/FeatureLayer.js",
25
        "@arcgis/core/widgets/Legend.js",
26
        "@arcgis/core/widgets/Expand.js",
27
      ]);
28

29
      const referenceScale = 9244650 * 2;
30

31

32
      const renderer = {
33
        type: "simple",
34
        symbol: {
35
          type: "simple-marker",
36
          // Arrow marker defined as SVG path
37
          path: "M14.5,29 23.5,0 14.5,9 5.5,0z",
38
          color: [250, 250, 250],
39
          outline: {
40
            color: [255, 255, 255, 0.5],
41
            width: 0.5,
42
          },
43
          angle: 180,
44
          size: 15,
45
        },
46

47
        visualVariables: [
48
          {
49
            type: "rotation",
50
            field: "WIND_DIRECT",
51
            rotationType: "geographic",
52
          },
53
          {
54
            type: "size",
55
            field: "WIND_SPEED",
56
            minDataValue: 5,
57
            maxDataValue: 60,
58
            minSize: {
59
              type: "size",
60
              valueExpression: "$view.scale",
61
              // adjust the min size by scale
62
              stops: [
63
                { value: referenceScale, size: 8 },
64
                { value: referenceScale * 2, size: 6 },
65
                { value: referenceScale * 4, size: 4 },
66
                { value: referenceScale * 8, size: 2 },
67
              ],
68
            },
69
            maxSize: {
70
              type: "size",
71
              valueExpression: "$view.scale",
72
              // adjust the max size by scale
73
              stops: [
74
                { value: referenceScale, size: 40 },
75
                { value: referenceScale * 2, size: 30 },
76
                { value: referenceScale * 4, size: 20 },
77
                { value: referenceScale * 8, size: 10 },
78
              ],
79
            },
80
          },
81
          {
82
            type: "color",
83
            field: "TEMP",
84
            stops: [
85
              { value: 20, color: "#2b83ba" },
86
              { value: 35, color: "#abdda4" },
87
              { value: 50, color: "#ffffbf" },
88
              { value: 65, color: "#fdae61" },
89
              { value: 80, color: "#d7191c" },
90
            ],
91
          },
92
        ],
48 collapsed lines
93

94
      };
95

96

97
      // Set the renderer on the feature layer
98
      const layer = new FeatureLayer({
99
        portalItem: {
100
          id: "cb1886ff0a9d4156ba4d2fadd7e8a139",
101
        },
102
        title: "Current weather conditions",
103
        renderer: renderer,
104
      });
105

106
      const map = new Map({
107
        basemap: {
108
          portalItem: {
109
            id: "ba223f982a3c4a0ea8c9953346e2a201",
110
          },
111
        },
112
        layers: [layer],
113
      });
114

115
      const view = new MapView({
116
        container: "viewDiv",
117
        map: map,
118
        scale: referenceScale,
119
        center: [-95, 38.5],
120
        constraints: {
121
          snapToZoom: false,
122
        },
123
      });
124

125
      view.ui.add(
126
        new Expand({
127
          content: new Legend({
128
            view: view,
129
          }),
130
          view: view,
131
          expanded: false,
132
        }),
133
        "top-right",
134
      );
135
    </script>
136
  </head>
137
  <body>
138
    <div id="viewDiv"></div>
139
  </body>
140
</html>

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.

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

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

Data-driven stylesTime Data-driven stylesPredominance

What is multivariate data visualization?

How multivariate data visualizations work

Examples

Color and size

Size and rotation

Size, rotation, and color

Best practices

Other multivariate styles

Predominance

Dot density

Charts

Relationship

Related samples and resources

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