altair：脚本中热图上的文本答案

【问题标题】：altair: Text over a Heatmap in a scriptaltair：脚本中热图上的文本
【发布时间】：2021-07-06 18:48:35
【问题描述】：

我尝试按照 "Text over a Heatmap" 的 Altair 示例进行操作，但遇到了一些问题。

我的数据集包含两个索引（N、Z）和一个值列color。

我想将原点设置在左下角。
如何在脚本中显示带有文本的热图？
是否可以在每个像素中放置标签（N、Z）？

下面附上部分代码。

def chart_altair(self):
    import altair as alt
    data = self.df.dropna().reset_index(name='color')

    # Configure common options
    base = alt.Chart(data).encode(
        alt.X('N:O'),
        alt.Y('Z:O'),
    )

    # Configure heatmap
    heatmap = base.mark_rect().encode(
        color=alt.Color(
            'color:Q',
            scale=alt.Scale(scheme='viridis'),
            legend=alt.Legend()
        )
    )

    text = base.mark_text(baseline='middle').encode(
        text='color:Q'
    )

我在我的数据集下面粘贴了几行，其中包含两个索引Z、N 和一个值列color（实际上代表一个原子质量表）。 “热图”应该类似于原子核的图表，中子数向右 x 轴增加，质子数在 y 轴向上增加。然而，质子数在相反方向（负 y 轴）增加。

  Z   N  color
  0   1   8.07
  1   0   7.29
  1   1  13.14
  1   2  14.95
  2   1  14.93
  1   3  24.62
  2   2   2.42
  3   3  14.09
  4   2  18.38
  2   5  26.07
  3   4  14.91
  4   3  15.77
  5   2  27.68

【问题讨论】：

您能否从您的数据中粘贴几行来重现该问题？如果不知道 df 的外观，我们就无法进行测试。一般来说，你可以使用 pandas 将两列添加在一起并用于文本标签，我不知道你的意思是在角落里有原点。

标签： python altair

【解决方案1】：

这是我使用transform_calculate 连接两个标签的示例。您也可以改为在 pandas 中创建标签列。

import altair as alt
import numpy as np
import pandas as pd

# Compute x^2 + y^2 across a 2D grid
x, y = np.meshgrid(range(-5, 5), range(-5, 5))
z = x ** 2 + y ** 2

# Convert this grid to columnar data expected by Altair
source = pd.DataFrame({'x': x.ravel(),
                     'y': y.ravel(),
                     'z': z.ravel()})

heatmap = alt.Chart(source).mark_rect().encode(
    x='x:O',
    y='y:O',
    color='z:Q'
)

heatmap + heatmap.mark_text().transform_calculate(label = '"" + datum.x + datum.y').encode(
    text='label:N',
    color=alt.value('black'))

【讨论】：