Vega 图表

Vega 图表微件用于在 Workshop 中使用 Vega-Lite 语法创建完全可定制和交互的可视化。查看 Vega-Lite ↗ 文档以获取灵感和示例。

什么是 Vega？

Vega 允许您创建、保存和分享交互式可视化设计，这些设计以简洁的 JSON 规范形式描述了可视化的外观和行为。Vega 是建立在 D3 之上的高级可视化规范语言 ↗，Vega-Lite 是建立在 Vega 之上的更高级语言，提供了一种更简洁和方便的方式来编写常见的可视化。Workshop Vega 图表微件原生支持 Vega-Lite，但也可以渲染 Vega。

Vega 图表微件比标准的 XY 图表微件提供更多的自定义功能，支持如下所示的可视化，这些示例来自官方 Vega-Lite 示例图库 ↗。

数据输入

Vega 数据 ↗ 是一个简单的结构体数组，在 Vega-Lite 中您可以指定多个数据集：

Copied!
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
"datasets": {
  "nba-player-data": [
    {
      "name": "Michael Jordan", // 球员姓名
      "height-in-inches": 78,   // 身高（英寸）
      "weight-in-lbs": 216,     // 体重（磅）
      ...
    },
    {
      "name": "Stephen Curry",  // 球员姓名
      "height-in-inches": 74,   // 身高（英寸）
      "weight-in-lbs": 185,     // 体重（磅）
      ...
    },
    ...
  ],
  "nba-team-data": [
    {
      "name": "Toronto Raptors",          // 球队名称
      "has-won-championship": true,       // 是否赢得过总冠军
      ...
    },
    {
      "name": "Memphis Grizzlies",        // 球队名称
      "has-won-championship": false,      // 是否赢得过总冠军
      ...
    },
    ...
  ],
}

数据配置选项

Vega 图表微件有三种不同的配置选项，允许您灵活地将Ontology中的对象数据转换为预期的Vega格式：

• 对象集: 指定应包含在数据中的对象集及该对象的属性。

  

• 聚合: 指定对象集、使用分桶策略的分组属性和聚合。每个数据点将包含每个分组属性的值，以及由指定聚合名称标识的聚合值。

  

• 函数: 指定一个返回结构体列表的函数，这些结构体将直接用作数据。

  

您可以有多个数据输入，可以在Vega规范中通过其配置名称引用。请注意，您还可以在Vega规范中行内数据。

Vega规范

Vega规范 ↗ 是定义可视化的JSON；Vega规范可以通过行内或使用字符串变量指定。

Vega规范主题配置

为了便于重用，您可以配置一个主题，该主题将被注入到Vega规范中。默认主题与XY图表微件的Blueprint样式匹配，但您也可以从字符串变量中指定自己的自定义主题，或者完全关闭主题。

请参阅vega-themes 仓库 ↗以获取构建自定义主题的示例。

行内编辑器

您可以使用AIP创建Vega图表的初始版本。提供给定的数据输入后，您可以向AIP提供提示，例如： Make me a bar chart of average points per game, bucketed by the number of seasons played.

这将创建一个图表，您可以通过额外的AIP提示对其进行迭代：

Remove the gridlines from this chart, and only show number of seasons greater than 4.

Copied!
1
# 这个命令要求移除图表中的网格线，并仅显示赛季数大于4的情况。

这段代码将引导AIP（人工智能辅助绘图工具）生成一个直方图，显示不同赛季数下每场比赛的平均得分，随后会应用特定的提示进行图表的调整和优化。 如果您的AIP提示未提供所需结果，您可以直接修改规范。参考现有的Vega示例 ↗和其他Vega资源，了解如何修改规范：例如，您可以从一个示例开始，并用对输入数据的引用替换示例数据。

行内编辑器：预览

预览标签显示完整的Vega规范，其中包含您的数据输入和主题数据。您可以截短数据以提高可读性，并将此完整规范复制到剪贴板。这使您能够验证数据是否为预期格式。

选择参数

Workshop原生支持Vega-Lite的主要原因是Vega-Lite支持选择参数 ↗。在Vega图表微件中，您可以配置多个选择参数，每个参数都有一个名称和一个输出变量。输出变量可以是对象集筛选或字符串。

因为选择可以在规范中的几个不同位置指定，所以此配置不会自动注入规范中。作为搭建者，您有责任在规范中包含每个配置参数名称的选择参数。

以下是一个选择参数示例，它将在X轴上输出范围选择：

Copied!
1
2
3
4
5
6
7
8
9
...
"params": [{
  "name": "intervalSelection",  // 定义一个区间选择参数
  "select": {
    "type": "interval",  // 选择的类型为区间选择
    "encodings": [ "x" ]  // 应用于x轴编码
  }
}]
...