Altair：如何使散点图与 mark_image 创建的图像背景对齐？

Question

我正在寻找一个工作示例，将 .png 图片作为散点图的背景。目前，我使用mark_image绘制背景图：

source = pd.DataFrame.from_records([
    {"x":  0, "y": 0,
     "img": "http://localhost:8888/files/BARTStreamlit/assets/BARTtracksmap.png?_xsrf=2%7Ce13c35be%7Ce013c83479b892363239e5b6a77d97dc%7C1652400559"}
])

tracksmap = alt.Chart(source).mark_image(
    width=500,
    height=500
).encode(
    x='x',
    y='y', 
    url='img'
)

tracksmap

这是淹没的结果图像：

并绘制散点图，

chart = alt.Chart(maptable).mark_circle(size=60).encode(
    x= 'x',
    y= 'y',
    tooltip=['short_name', 'ENTRY']
).interactive()

chart

我已将散点图的 x、y 通道值缩放到 [0, 500] 范围内。 500是我猜的背景图片的宽高。

这是结果散点图：

然后我将两个图表与图层机制结合起来：

geovizvega = alt.layer(tracksmap, chart)
geovizvega

结果如下：

两个图表不对齐。我想让散点与背景图像上的轨道对齐。我怎样才能做到这一点？

要使它们对齐，我可能需要使背景图像的左上角位于坐标 (0, 0) 处，我该如何实现？（好像mark_image的x,y通道值是图像中心的坐标？准确定义x,y通道值，或许可以计算出合适的x值，并且左上角验尸官的 y 位于 (0, 0))。

我可能需要背景图片的精确尺寸。怎么样？

我上面的方法可能不对。请给我一个工作示例。

Answer 1

是的，如果您将图像图中的 x 和 y 值更改为类似 y=-200 和 x=200 的值，则图像在散点图中应该更居中。

您还可以使用 align 和 baseline 更改图像的锚点:

import altair as alt
import pandas as pd

source = pd.DataFrame.from_records([
      {"x": 2, "y": 2, "img": "https://vega.github.io/vega-datasets/data/7zip.png"}
])

imgs = alt.Chart(source).mark_image(
    width=100,
    height=100
).encode(
    x='x',
    y='y',
    url='img'
)

imgs + imgs.mark_circle(size=200, color='red', opacity=1)

imgs = alt.Chart(source).mark_image(
    width=100,
    height=100,
    align='right',
    baseline='top'
).encode(
    x='x',
    y='y',
    url='img'
)

imgs + imgs.mark_circle(size=200, color='red', opacity=1)

在此之后，您仍然需要更改图表的尺寸，使其与图片大小相同。默认值为宽度=400 和高度=300。您可以在大多数图像编辑软件中或使用 file <imagename> 命令（至少在 linux 上）获得图像的尺寸。但即使在获得这些尺寸之后，由于坐标轴占据了图表中的一部分 space，您还必须进行一些手动调整。

Altair：如何使散点图与 mark_image 创建的图像背景对齐？

Altair: How to make scatter plot aligned with image background created by mark_image?

visualization

altair

vega-lite

vega