基本统计可视化#

（本教程改编自 Vega-Lite 的文档）

本教程将指导您完成在Altair中创建可视化的基本过程。首先，您需要确保安装了Altair包及其依赖项（见安装）。本教程假设您在Jupyter notebook用户界面（如JupyterLab、Colab或VS Code）中工作，以便自动渲染图表。如果您使用其他界面，可以在继续之前了解如何显示Altair图表（见显示Altair图表）。

这是这个基础教程的概要：

数据
编码和标记
数据转换：聚合
自定义您的可视化
发布您的可视化

数据#

在 Altair 中，数据是围绕 pandas Dataframe 构建的。统计可视化的一个定义特征是它始于 tidy Dataframes。为了本教程的目的，我们将通过导入 pandas 并创建一个简单的 DataFrame 来进行可视化，其中列 a 是一个分类变量，列 b 是一个数值变量：

import pandas as pd
data = pd.DataFrame({'a': list('CCCDDDEEE'),
                     'b': [2, 7, 4, 1, 2, 6, 8, 4, 7]})

使用Altair时，数据集通常作为Dataframe提供。如我们所见，dataframe的标记列是使用Altair绘图的一个重要组成部分。

图表对象#

在Altair中，基本对象是Chart，它将数据框作为一个参数：

import altair as alt
chart = alt.Chart(data)

到目前为止，我们已经定义了图表对象，但我们还没有告诉图表对数据进行操作。这将在接下来进行。

编码与标记#

有了这个图表对象，我们现在可以指定我们希望如何对数据进行可视化。这是通过图表对象的 mark 属性完成的，该属性可以通过 Chart.mark_* 方法最方便地访问。例如，我们可以使用 mark_point() 将数据显示为一个点：

alt.Chart(data).mark_point()

这里的渲染由数据集中每一行的一点组成，所有点叠加在一起，因为我们还没有为这些点指定位置。

为了直观地区分这些点，我们可以将各种编码通道，或简称为通道，映射到数据集中列的上。例如，我们可以使用x通道对数据的变量a进行编码，该通道表示点的x轴位置。这可以通过Chart.encode()方法简单地完成：

alt.Chart(data).mark_point().encode(
    x='a',
)

encode() 方法构建了编码通道 (如 x, y, color, shape, size, 等) 与数据集中的列之间的键值映射，可以通过列名访问。

对于pandas数据框，Altair会自动确定映射列的适当数据类型，在这种情况下是名义值，或者是无序类别。

尽管我们现在通过一个属性分离了数据，但在每个类别中仍有多个点重叠。让我们通过添加一个 y 编码通道，映射到 "b" 列来进一步分离这些数据：

alt.Chart(data).mark_point().encode(
    x='a',
    y='b'
)

在 "b" 列中数据的类型再次由 Altair 自动推断，并且这次被视为定量类型（即实值）。此外，我们还看到网格线和适当的轴标题也被自动添加。

数据转换：聚合#

为了允许数据可视化的更大灵活性，Altair具有内置的聚合数据的语法。例如，我们可以通过在列标识符中指定此聚合来计算所有值的平均值：

alt.Chart(data).mark_point().encode(
    x='a',
    y='average(b)'
)

现在在每个x轴类别中，我们看到一个单一的点反映该类别内值的平均值。

通常，聚合值不是通过点标记表示的，而是通过条形标记表示的。我们可以通过将 mark_point() 替换为 mark_bar() 来实现这一点：

alt.Chart(data).mark_bar().encode(
    x='a',
    y='average(b)'
)

因为分类特征映射到x轴，结果是一个垂直条形图。要获取水平条形图，我们需要做的就是交换x和y关键字：

alt.Chart(data).mark_bar().encode(
    y='a',
    x='average(b)'
)

附注：检查JSON输出#

请记住，Altair 的主要目的是将绘图规范转换为符合 Vega-Lite 模式的 JSON 字符串。在这里使用 to_json() 方法来检查 Altair 正在导出并作为 JSON 发送给 Vega-Lite 的 JSON 规范是很有启发性的：

chart = alt.Chart(data).mark_bar().encode(
    x='a',
    y='average(b)',
)
print(chart.to_json())

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.20.1.json",
  "config": {
    "view": {
      "continuousHeight": 300,
      "continuousWidth": 300
    }
  },
  "data": {
    "name": "data-9b610f80003d046838adda5e50d859e9"
  },
  "datasets": {
    "data-9b610f80003d046838adda5e50d859e9": [
      {
        "a": "C",
        "b": 2
      },
      {
        "a": "C",
        "b": 7
      },
      {
        "a": "C",
        "b": 4
      },
      {
        "a": "D",
        "b": 1
      },
      {
        "a": "D",
        "b": 2
      },
      {
        "a": "D",
        "b": 6
      },
      {
        "a": "E",
        "b": 8
      },
      {
        "a": "E",
        "b": 4
      },
      {
        "a": "E",
        "b": 7
      }
    ]
  },
  "encoding": {
    "x": {
      "field": "a",
      "type": "nominal"
    },
    "y": {
      "aggregate": "average",
      "field": "b",
      "type": "quantitative"
    }
  },
  "mark": {
    "type": "bar"
  }
}

请注意，encode(x='a') 已被扩展为一个包含 field 名称和数据的 type 的 JSON 结构。 encode(y='b') 也类似地被扩展，包含一个 aggregate 字段。

Altair 的完整简写语法还包括指定列类型的方法：

y = alt.Y('average(b):Q')
print(y.to_json())

{
  "aggregate": "average",
  "field": "b",
  "type": "quantitative"
}

这种简写等同于按名称详细列出参数：

y = alt.Y(field='b', type='quantitative', aggregate='average')
print(y.to_json())

这种更详细的指定通道的方法可以直接用于Altair图表规范，当使用一些更高级的字段配置时，这一点变得很有用：

alt.Chart(data).mark_bar().encode(
    alt.Y('a', type='nominal'),
    alt.X('b', type='quantitative', aggregate='average')
)

自定义您的可视化#

默认情况下，Altair通过Vega-Lite对可视化的默认属性做出了一些选择。 Altair还提供了一个API来定制可视化的外观。例如，我们可以使用title()方法指定轴标题，并且我们可以通过设置Chart.mark_*方法的color关键字为任何有效的HTML颜色字符串来指定标记的颜色：

alt.Chart(data).mark_bar(color='firebrick').encode(
    alt.Y('a').title('category'),
    alt.X('average(b)').title('avg(b) by category')
)

发布您的可视化#

一旦你可视化了你的数据，也许你想在网上发布它。可以使用Vega-Embed Javascript包直接做到这一点。可以为任何图表生成一个简单的独立HTML文档，使用Chart.save()方法：

chart = alt.Chart(data).mark_bar().encode(
    x='a',
    y='average(b)',
)
chart.save('chart.html')

基本的HTML模板生成的输出如下所示，其中由 Chart.to_json() 生成的图表的JSON规范应存储在 spec Javascript变量中：

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vega@3"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@2"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@3"></script>
  </head>
  <body>
    <div id="vis"></div>
    <script type="text/javascript">
      var spec = {};  /* JSON dump of your chart's spec */
      var opt = {"renderer": "canvas", "actions": false};  /* Options for the embedding */
      vegaEmbed("#vis", spec, opt);
    </script>
  </body>
</html>

save() 方法提供了一种方便的方式将这样的 HTML 输出保存到文件中。有关嵌入 Altair/Vega-Lite 的更多信息，请参阅 Vega-Embed 项目的文档。