Vega 图

Quiver允许用户使用Vega或Vega-Lite库创建完全可自定义和交互式的可视化。查看Vega ↗和Vega-Lite ↗文档以获取灵感和示例。

什么是Vega？

Vega和Vega-Lite允许您创建、保存和分享互动可视化设计，这些设计以简洁的JSON规格描述了可视化的外观和行为。Vega支持多种可视化设计，例如：

• 数据加载 ↗和变换 ↗
• 比例 ↗
• 地图投影 ↗
• 轴 ↗
• 图例 ↗
• 图形标记 ↗，如矩形、线条、绘图符号等。

Vega-Lite是建立在Vega之上的高级语言，提供了一种更简洁和方便的方式来创建常见的可视化。我们建议从Vega-Lite开始，因为Vega-Lite的语法比Vega更易读、易写和易调试。如果Vega-Lite的选项不够用，可以考虑使用Vega。

使用Vega和Vega-Lite创建的几个示例可以在下图中看到：

配置Vega图

要配置Vega图，将鼠标悬停在所需卡片上，选择可视化并在下拉菜单中导航到（或搜索）Vega图。选择Vega图以打开配置菜单。

在编辑器菜单中，选择配置Vega图或Vega-Lite图。常见可视化的模板，包括气泡图、箱线图、旭日图等，都在选择模板下拉菜单中提供，如下图所示。

一旦您选择了Vega图模板，系统将提示您通过将其映射到变换表数据源的列来填写与所选图相关的参数。

填写模板参数后，选择应用以生成您的Vega图。请注意：

• 在未填写字段的地方，参数名称将作为默认。
• 填写的模板将覆盖编辑器中的任何当前值。

配置数据输入

Vega图接受以下数据输入：

• 变换表： 任何变换表都可以用作Vega图的输入。从对象集中添加Vega图时，支持的变换表也会自动添加到分析内容面板中（但不在画布上）。
• 数组： 数组被解析为具有单列名为ARRAY_VALUES的变换表。

在数据部分，您可以通过其全局ID（例如$A）以以下格式引用变换表或数组形式的表格数据：

Copied!
1
2
3
4
{
    "data": { "values": $A }
    ...
}

这个代码片段是一个JSON对象的格式，其中：

• "data" 是一个键，它的值是另一个对象。
• "values" 是该对象的一个键，其值是 $A。

注意：$A 通常是一个占位符，表示在实际使用时将被替换为具体的数据结构或值。 例如，如果表 $A 是一个具有两列的表，name 和 id，数据将解析为如下所示的规范：

Copied!
1
2
3
4
5
6
7
8
9
10
{
    "data": {
        "values": {
            // 定义了一个名为 'values' 的对象数组，每个对象包含 'name' 和 'id' 属性。
            { "name": "a", "id": 1},  // 第一个对象，名称为 'a'，ID 为 1
            { "name": "b", "id": 2},  // 第二个对象，名称为 'b'，ID 为 2
            { "name": "c", "id": 3}   // 第三个对象，名称为 'c'，ID 为 3
        }
    }
}

注意：此代码中 values 应该是一个数组格式，而不是对象。正确的 JSON 格式为：

Copied!
1
2
3
4
5
6
7
8
9
{
    "data": {
        "values": [
            { "name": "a", "id": 1},
            { "name": "b", "id": 2},
            { "name": "c", "id": 3}
        ]
    }
}

在 JSON 中，数组用方括号 [] 表示。 要引用变换表中的特定列，请使用语法 $A.column_name。此表达式会被解析为列的ID字符串。

Copied!
1
2
3
4
5
6
7
8
9
{
    "encoding": {
        "x": {
            "field": $A.column_x,
            "type": "quantitative",  // 数据类型是“定量”，用于表示数值型数据
        }
    }
    ...
}

使用分析中的变量

您还可以在 Vega 图中引用值类型（例如数值指标卡片）。例如，要在某个值处设置阈值线，可以使用数值指标卡片的全局ID引用该值。

Copied!
1
2
3
4
"encoding": {
    "y": { "datum": $C }
}
...

该代码片段属于一个数据可视化工具（如Vega-Lite）的配置部分，其中"encoding"定义了数据字段如何映射到可视化属性。

• "y": 指定Y轴的编码。
• "datum": $C: 使用变量$C的值作为Y轴数据的源。

预览已解析的 Vega 规范

您可以通过查看已解析的 Vega 规范来调试 Vega 图配置的问题。选择预览以查看已解析的 Vega。

在其他应用中嵌入 Vega 图

Vega 编辑器包含两个有用的设置，可用于在 Workshop 中使用 Quiver 仪表盘嵌入 Vega 图：

• 自动缩放图表： 启用自动缩放图表时，您的 Vega 图将根据提供的数据自动调整到卡片尺寸。
• 默认样式： 向 Vega 规范注入一些自动调整大小和样式配置，以使图表外观与 Quiver 卡片风格匹配。禁用时，Vega 可视化将与公共 Vega 网站上的相匹配。

使用 AIP 配置 Vega 图

AIP 可以仅使用自然语言中您所需图表或图表修改的描述，帮助生成 Vega 图配置。用户只需描述他们希望创建或修改的图表，AIP 将根据提示提供建议，帮助简化可能容易出错的 JSON 格式的 Vega 图配置。

描述所需的 Vega 图

要使用 AIP，请在 Vega 图卡片的右上角选择 AIP 配置。然后，提供提示，选择配置，并查看 AIP 生成的建议。要接受建议，请选择应用。如果您希望 AIP 提供其他建议，请编辑您的提示，然后选择重新配置。

在下面的例子中，用户提示 AIP：“在散点图上显示 pH 与咖啡因，并在 x 轴上绘制一条红线于 13，在 y 轴上绘制一条红线于 6。” AIP 使用该提示建议包含两个感兴趣数值属性（咖啡因和 pH 值）的图表配置。

要接受 AIP 提出的更新，请选择应用。Vega 图将根据更新的 Vega 规范渲染可视化。

在现有图表上构建

AIP 可以识别和区分提示中包含的抽象概念，并利用这些信息帮助生成或修改 Vega 图。例如，AIP 可以使用对先前生成图表特征的引用，允许您“在现有图表上构建”。

在下图中，用户提供提示：“图表上的两条线将点分为 4 个象限。将每个象限着上不同颜色。” AIP 识别出由垂直和水平线定义的区域是象限，即使当前图表配置不包含任何象限的定义或配置。

AIP 准确生成与用户提示对齐的所需图表，基于初始图表进行构建。

使用 AIP 生成创建 Vega 图

使用 AIP 生成的 Quiver 分析图可以包含 Vega 图。要指示 AIP 生成 Vega 图而非原生 Quiver 可视化（如折线图或散点图），请在您的提示中明确指出 AIP 应返回“Vega 图”。例如，一个准确的提示可能是：“在散点图上显示咖啡因与 pH，使用 vega 图。”

注意：AIP 功能的可用性可能会发生变化，并可能因客户而异。

Vega-Lite 选择

配置 Vega-Lite 图表的选择

Vega-Lite 选择是一种强大且高度可定制的功能，用于构建交互式可视化。Vega-Lite 库内置支持选择 ↗，Quiver 中的 Vega-Lite 图表可以配置为输出选择作为变换表。用户可以利用选择数据参数化下游卡片，构建下钻工作流，并继续分析。Vega-Lite 选择的行为与对象集图表选择不同，设置需要额外步骤。

Vega-Lite 允许用户通过两种类型的选择 ↗与图表进行交互：

• 点选择：选择单个点，或按住 shift 选择画布上的多个点。
• 区间选择：拖动以选择画布上的一个有限矩形区域。

要将图表选择数据输出为变换表，请执行以下步骤：

1. 打开 Vega 图卡片的配置面板，滚动到选择选项。然后，启用将输出点选择作为变换表和/或将输出区间选择作为变换表。

2. 在 Vega 图的 JSON 编辑器中，向 params 字段添加选择参数。有关选择参数的更多信息，请查看Vega 图文档。

   1. 参数必须命名为 quiverDefaultClick 用于点选择，或 quiverDefaultBrush 用于区间选择。

   2. 将 type 属性设置为 point 用于 quiverDefaultClick，或 interval 用于 quiverDefaultBrush。

   3. 在 encodings 属性中指定一个或多个编码 ↗。这些是您希望选择的字段，例如 x、y 或 color。编码决定了如何选择值以及输出什么信息。

      

3. 一旦选择完成，带有选择数据的卡片页脚将出现。选择输出选择以将选择数据输出为变换表。或者，使用 Vega 图的下一个操作菜单，选择转换 > 新变换表。

   • 点选择以编码字段和值的表格形式输出，其中每列对应一个字段，每行表示一个选择的点。

   

   2. 如果字段是连续的，区间选择将作为区间边界的范围（最小值，最大值）输出；如果字段是离散的，则作为值数组输出。

   

自定义选择参数示例

请参阅提供的 Vega 图模板，了解在常见可视化（如气泡图和热网格）中选择设置的其他示例。这些模板可以在配置编辑器中的选择模板下拉菜单中找到。

点选择参数示例

// 定义点选择参数
"params": [
  {
    "name": "quiverDefaultClick", // 定义点选择参数
    "select": {
      "type": "point", // 选择类型为点
      "encodings": ["x"] // 选择所有具有相同 "x" 值的点
    }
  }
],
"encodings": [
  "x": ... // x 轴编码
  "y": ... // y 轴编码
  "color": {
    "condition": [
      {
        "param": "quiverDefaultClick", // 使用参数 "quiverDefaultClick"
        "empty": false, // 非空条件
        "value": "orange" // 有条件地将选中的点着色为橙色
      }
    ]
  },
]

...
"params": [
  {
    "name": "quiverDefaultClick",
    "select": {
      "type": "point",
      "encodings": ["color"] // 选择所有具有相同“color”编码的数据
    }
  }
]

区间选择参数示例

Copied!
1
2
3
4
5
6
7
8
9
10
...
"params": [
  {
    "name": "quiverDefaultBrush",
    "select": {
      "type": "interval",
      "encodings": ["y"] // 将区间选择限制为 y 轴
    }
  }
]

构建下钻工作流

Vega-Lite 图表的选择数据可以被用于构建下钻工作流，其中图表选择充当筛选，用户可以基于上游选择在数据子集中继续分析。以下步骤描述了如何构建下钻工作流。

1. 按照上述步骤设置选择参数，并将当前选择输出为变换表。

2. 选择 弹出列作为数组 将属性转换为数组。

3. 使用选择的值作为筛选参数，对原始变换表（或从中派生的根对象集的副本）进行筛选。

4. 筛选后的表格现在将基于上游图表选择动态更新。

常见问题和限制

任何类型的 Vega-Lite 图表都可以配置选择吗？

并非所有 Vega-Lite 图表类型都支持选择。虽然 Vega 文档没有提供支持图表类型的详尽列表，但以下是一个非全面性列表：

• 支持的类型: 条形图、散点图、热网格图、折线图、饼图（仅点选择）、瀑布图（仅点选择）、地理坐标投影、GeoJSON 地图（仅点选择）
• 不支持的类型: 箱线图、置信区间图

我可以在单个图表规范中定义多个选择参数吗？

每个图表仅限于一个点选择参数和一个区间选择参数，它们将数据输出到 Quiver。这是 Quiver 设置的限制；尽管 Vega 允许定义多个参数，只要它们有唯一的名称，只有那些名为 quiverDefaultClick 和 quiverDefaultBrush 的参数将作为 Quiver 变换表输出。

我无法选择轴的子集，尽管已将其添加到选择参数的编码列表中。是什么原因导致的？

请检查该轴上的值是否在 Vega 规范中被聚合。Vega 不支持对 Vega 聚合的字段进行选择。例如，如果 y 编码字段包含如下代码片段中的行内聚合，用户将无法选择 y 轴的子集。

Copied!
1
2
3
4
5
6
7
"encodings": {
  "y": {
    "field": $C.field_y,  // 这里的 "field" 指定了要在 y 轴上显示的数据字段
    "aggregate": "avg"    // "aggregate" 设置为 "avg"，表示对该字段应用平均值聚合
  },
  ...
}

要在y轴上启用选择，请首先在Quiver中对数据进行聚合（例如使用数据透视表），然后再将其传递到Vega中。

为什么即使规范已编译，我在尝试进行选择时仍收到无效数据选择出错？

请检查以下内容：

• 确保所有选择参数都有一个非空的encodings字段。每个参数必须指定一个或多个编码来输出选择信息。
• 如果是区间选择，请检查选择参数中定义的编码是否为非轴字段。Vega不支持对非轴编码字段（如color、shape等）进行区间选择。从编码数组中移除这些字段应能解决出错。