多元数据可视化

气象站采用单一渲染器和视觉变量进行样式化,以显示风速、方向和气温

什么是多元数据可视化?

多元数据可视化涉及在单一渲染器中可视化多个数据值。这样做有很多原因,包括:

  1. 查看两个或多个变量之间的关系
  2. 比较或对比两个变量之间的差异
  3. 一次查看多个变量之间可能不相关的空间模式。

多元数据可视化的工作方法

多元可视化可以通过向单一渲染器添加多个视觉变量来完成。常见的组合包括:

  1. 颜色和大小
  2. 大小和旋转
  3. 大小、旋转和颜色

您还可以使用许多其他视觉变量组合(包括不透明度)来创建多元可视化。

示例

颜色和大小

颜色和大小通常用于显示两个变量之间的关系,或使用颜色变量显示比率,以及使用大小变量显示变量的大小。

以下示例用于可视化湿度如何影响炎热指数,或使用颜色和大小来“感知”温度。

  • 颜色用于可视化相对湿度
  • 大小用于可视化热指数(感知温度)与气象站测量的空气温度之间的差异。
GeoScene JS API
Expand
代码块使用深色复制
52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73 73
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
          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

大小和旋转

大小变量适合用于可视化总计数或大小。旋转和大小通常一起使用以绘制天气数据,例如风。旋转表示流动的方向,而大小表示风速。

GeoScene JS API
Expand
代码块使用深色复制
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
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
          visualVariables: [
            {
              type: "size",
              field: "WIND_SPEED",
              minDataValue: 5,
              maxDataValue: 60,
              minSize: 4,
              maxSize: 24
            }, {
              type: "rotation",
              field: "WIND_DIRECT",
              rotationType: "geographic"
            }
          ]
 
Expand

大小、旋转和颜色

在极少数情况下,您可以有效地同时使用三个视觉变量。在以下示例中,我们向风可视化添加了一个颜色变量以表示气温。此可视化允许最终用户在一个视觉中同时查看风和温度的模式。

  • 大小 - 风速
  • 旋转 - 风向
  • 颜色 - 气温
GeoScene JS API
Expand
代码块使用深色复制
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
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
142
143
144
145
146
147
148
149
          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

最佳实践

需要注意的是,使用多个视觉变量会增加可视化的复杂性。这会使得最终用户更难理解所表达的信息。您应始终仔细考虑在一个视图中使用多个变量是否比显示数据的单独视图更可取。

其他多元样式

您不需要视觉变量来创建多元可视化。以下指南页面演示了如何使用其他渲染器类型创建多元可视化。

众数渲染

众数渲染可视化基于一组竞争或相似的数字属性中的优势值来对要素进行着色。

点密度

了解如何使用点密度来测量数字属性或一组可比较变量的密度。

图表

了解如何使用图表来可视化层中多个数字变量的分布。

关系

了解如何使用关系渲染器来探索两个数字数据属性之间的关系。

使用 Arcade 创建自定义可视化的相关示例的图像预览

使用 Arcade 创建自定义可视化

使用 Arcade 创建自定义可视化

相关示例的图像预览专题多元可视化(3D)

主题多元可视化 (3D)

主题多元可视化 (3D)

相关示例的图像预览具有逼真 3D 符号的主题可视化

使用现实 3D 符号的主题可视化

使用现实 3D 符号的主题可视化

相关示例的图像预览基于真实世界尺寸缩放要素尺寸(2D)

根据真实世界大小 (2D) 缩放要素尺寸

根据真实世界大小 (2D) 缩放要素尺寸

具有视觉变量的点聚类相关示例的图像预览

具有视觉变量的点聚类

具有视觉变量的点聚类

API 支持

完全支持部分支持不支持
  • 1.仅颜色
  • 2.仅点支持大小变量创建器
  • 3.3D 中不支持大小变量创建器

您的浏览器不再受支持。请升级您的浏览器以获得最佳体验。