多元数据可视化

字数统计: 1.7k 字
阅读时长: 约 5 分钟
当前版本: 4.29

使用简单渲染器和视觉变量样式化气象站，以显示风速、方向和气温

什么是多元数据可视化？ ​

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

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

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

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

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

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

示例 ​

颜色和大小 ​

颜色和大小通常用于显示两个变量之间的关系，或者使用颜色变量显示比率，使用符号大小显示变量的大小。

以下示例展示了湿度如何影响炎热指数，使用颜色和大小来表示“感知”温度。

  • 颜色用于可视化相对湿度
  • 大小用于可视化炎热指数（感知温度）与气象站测量的空气温度之间的差异。
示例代码
js
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>GeoScene Developer Guide: Visual variables (size and color)</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <link rel="stylesheet" href="https://js.geoscene.cn/4.29/geoscene/themes/light/main.css" />
    <script src="https://js.geoscene.cn/4.29/"></script>

    <script>
      require([
        "geoscene/Map",
        "geoscene/views/MapView",
        "geoscene/layers/FeatureLayer",
        "geoscene/widgets/Legend",
        "geoscene/widgets/Expand"
      ], function(
        Map,
        MapView,
        FeatureLayer,
        Legend,
        Expand
      ) {
        const renderer = {
          type: "simple",
          symbol: {
            type: "simple-marker",
            style: "circle",
            color: [50, 50, 50],
            outline: {
              color: [255, 255, 255, 0.5],
              width: 0.5
            },
            size: "8px"
          },
          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" }
              ]
            }
          ]
        };

        // Set the renderer on the feature layer
        const layer = new FeatureLayer({
          url: "https://services9.arcgis.com/RHVPKKiFTONKtxq3/arcgis/rest/services/NOAA_METAR_current_wind_speed_direction_v1/FeatureServer",
          title: "Current weather conditions",
          renderer: renderer
        });

        const map = new Map({
          basemap: "tianditu-vector",
          layers: [layer]
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
          scale: 36978595,
          center: [ -80.48, 28.30 ],
          constraints: {
            snapToZoom:false
          }
        });

        view.ui.add(new Expand({
          content: new Legend({
            view: view
          }),
          view: view,
          expanded: false
        }), "top-right");
      });
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

大小和旋转 ​

大小变量适用于可视化总计数或属性值大小。天气数据通常将旋转和大小结合使用，例如风。旋转表示流动的方向，大小表示风速。

示例代码
js
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>GeoScene Developer Guide: Visual variables (size and rotation)</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <link rel="stylesheet" href="https://js.geoscene.cn/4.29/geoscene/themes/light/main.css" />
    <script src="https://js.geoscene.cn/4.29/"></script>

    <script>
      require([
        "geoscene/Map",
        "geoscene/views/MapView",
        "geoscene/layers/FeatureLayer",
        "geoscene/widgets/Legend",
        "geoscene/widgets/Expand"
      ], function(
        Map,
        MapView,
        FeatureLayer,
        Legend,
        Expand
      ) {
        const referenceScale = 9244650*2;

        const renderer = {
          type: "simple",
          symbol: {
            type: "simple-marker",
            // Arrow marker defined as SVG path
            path: "M14.5,29 23.5,0 14.5,9 5.5,0z",
            color: [50, 50, 50],
            outline: {
              color: [255, 255, 255, 0.5],
              width: 0.5
            },
            angle: 180,
            size: "20px"
          },
          visualVariables: [
            {
              type: "size",
              field: "WIND_SPEED",
              minDataValue: 5,
              maxDataValue: 60,
              minSize: 4,
              maxSize: 24
            }, {
              type: "rotation",
              field: "WIND_DIRECT",
              rotationType: "geographic"
            }
          ]
        };

        // Set the renderer on the feature layer
        const layer = new FeatureLayer({
          url: "https://services9.arcgis.com/RHVPKKiFTONKtxq3/arcgis/rest/services/NOAA_METAR_current_wind_speed_direction_v1/FeatureServer",
          title: "Current weather conditions",
          renderer: renderer
        });

        const map = new Map({
          basemap: "tianditu-vector",
          layers: [layer]
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
          scale: referenceScale,
          center: [ -95, 38.5 ],
          constraints: {
            snapToZoom:false
          }
        });

        view.ui.add(new Expand({
          content: new Legend({
            view: view
          }),
          view: view,
          expanded: false
        }), "top-right");

      });
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

大小、旋转和颜色 ​

在极少数情况下，我们可以有效的同时使用三个视觉变量。以下示例中，我们表示风的同时添加了一个颜色变量来表示气温。最终用户在一个视觉中可以同时查看风和温度。

  • 大小 - 风速
  • 旋转 - 风向
  • 颜色 - 气温

注：此示例中的大小变量根据视图比例会改变图标大小。有关此技术的详细信息，请参阅比例感知型可视化。

示例代码
js
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>GeoScene Developer Guide: Multiple visual variables</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <link rel="stylesheet" href="https://js.geoscene.cn/4.29/geoscene/themes/light/main.css" />
    <script src="https://js.geoscene.cn/4.29/"></script>

    <script>
      require([
        "geoscene/Map",
        "geoscene/views/MapView",
        "geoscene/layers/FeatureLayer",
        "geoscene/widgets/Legend",
        "geoscene/widgets/Expand"
      ], function(
        Map,
        MapView,
        FeatureLayer,
        Legend,
        Expand
      ) {
        const referenceScale = 9244650*2;
        const renderer = {
          type: "simple",
          symbol: {
            type: "simple-marker",
            // Arrow marker defined as SVG path
            path: "M14.5,29 23.5,0 14.5,9 5.5,0z",
            color: [250, 250, 250],
            outline: {
              color: [255, 255, 255, 0.5],
              width: 0.5
            },
            angle: 180,
            size: 15
          },
          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" }
              ]
            }
          ]
        };

        // Set the renderer on the feature layer
        const layer = new FeatureLayer({
          url: "https://services9.arcgis.com/RHVPKKiFTONKtxq3/arcgis/rest/services/NOAA_METAR_current_wind_speed_direction_v1/FeatureServer",
          title: "Current weather conditions",
          renderer: renderer
        });

        const map = new Map({
          basemap:"tianditu-vector",
          layers: [layer]
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
          scale: referenceScale,
          center: [108.9, 34.5],
          constraints: {
            snapToZoom: false
          }
        });

        view.ui.add(new Expand({
          content: new Legend({
            view: view
          }),
          view: view,
          expanded: false
        }), "top-right");
      });
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

最佳实践 ​

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

其他多元样式 ​

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

点密度 ​

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

图表 ​

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

关系 ​

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