Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developers.arcgis.com/javascript/latest/visualization/data-driven-styles/multivariate/ below:

Multivariate data visualization | Overview | ArcGIS Maps SDK for JavaScript 4.33

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

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

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

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

1. Color and size
2. Size and rotation
3. Size, rotation, and color

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

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

43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 65 65 65 65 65 65 65 65 65 65 65 65 65 65 65 65 65 65 65 65 65 65 65 65 65 65 65 65 65 65 65 65 65 65 65 65 65 65 65 65 65 65 65 65 65 65 65 65

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
        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" },
            ],
          },
        ],

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

47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 48 49 50 51 52 53 54 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 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
110
        visualVariables: [
          {
            type: "size",
            field: "WIND_SPEED",
            minDataValue: 5,
            maxDataValue: 60,
            minSize: 4,
            maxSize: 24,
          },
          {
            type: "rotation",
            field: "WIND_DIRECT",
            rotationType: "geographic",
          },
        ],

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

The size variable in this example varies icon sizes based on the view scale. See Scale-aware visualizations for more information about this technique.

ArcGIS JS API

Expand

47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 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 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93 93

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
136
137
138
139
140
141
        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" },
            ],
          },
        ],

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.

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4