Изображения — Image

Примитивы image добавляют в визуализации Altair внешние изображения, например значки и фотографии. Файлы PNG, JPG и других форматов загружаются по указанным URL.

Свойства изображений

Определение image поддерживает любые стандартные свойства и следующие специальные свойства:

Диаграмма рассеяния с изображениями

import altair as alt
import pandas as pd

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

alt.Chart(source).mark_image(width=50, height=50).encode(x="x", y="y", url="img")

Показ изображений по выбору

Этот пример показывает изображения по выделению области перетаскиванием. Создаются две диаграммы: с точками и с изображениями. Фильтр выбора применяется только к изображениям, затем диаграммы объединяются:

import altair as alt
import pandas as pd

source = pd.DataFrame.from_records(
    [{'a': 1, 'b': 1, 'image': 'https://altair-viz.github.io/_static/altair-logo-light.png'},
    {'a': 2, 'b': 2, 'image': 'https://avatars.githubusercontent.com/u/11796929?s=200&v=4'}]
)

brush = alt.selection_interval()
point = alt.Chart(source).mark_circle(size=100).encode(
    x='a',
    y='b',
).add_params(
    brush
)

img = alt.Chart(source).mark_image(width=50, height=75).encode(
    x='a',
    y='b',
    url='image'
).transform_filter(
    brush
)

point + img

В слоях изображения могут перекрывать друг друга. Другой вариант — показать их на отдельных панелях рядом с исходной диаграммой:

img_faceted = alt.Chart(source, width=50, height=75).mark_image().encode(
    url='image'
).facet(
    alt.Facet('image', title='', header=alt.Header(labelFontSize=0))
).transform_filter(
    brush
)

point | img_faceted

Чтобы изначально скрыть изображения, можно добавить empty=False к интервальному выбору. Однако Altair автоматически не изменит размер области после появления панелей, поэтому может казаться, что выбор не действует. Для автоматического изменения размера явно задайте autosize через configure:

brush = alt.selection_interval(empty=False)
point = alt.Chart(source).mark_circle(size=100).encode(
    x='a',
    y='b',
).add_params(
    brush
)
img_faceted = alt.Chart(source, width=50, height=75).mark_image().encode(
    url='image'
).facet(
    alt.Facet('image', title='', header=alt.Header(labelFontSize=0))
).transform_filter(
    brush
)

(point | img_faceted).configure(
    autosize=alt.AutoSizeParams(resize=True)
)

Локальные изображения

Локальные изображения можно показывать, предварительно преобразовав их в строки base64. Ниже загружаются два изображения из репозитория Altair; замените пути расположением нужных файлов на своём компьютере.

Этот подход работает и с изображениями в виде массивов NumPy, как показано в уроке «Изображения NumPy в подсказках».

import base64
import altair as alt
import pandas as pd

from io import BytesIO
from PIL import Image


image_paths = ["doc/_static/gray-square.png","doc/_static/altair-logo-light.png"]
base64_images = []

for image_path in image_paths:
    pil_image = Image.open(image_path)
    output = BytesIO()
    pil_image.save(output, format='PNG')
    base64_images.append(
        "data:image/png;base64," + base64.b64encode(output.getvalue()).decode()
    )

source = pd.DataFrame({"x": [1, 2], "y": [1, 2], "image": base64_images})
alt.Chart(source).mark_image(
    width=50,
    height=50
).encode(
    x='x',
    y='y',
    url='image'
)

Изображение в подсказке

Для изображений в подсказках можно использовать URL или локальные пути. Чтобы изображение отобразилось, поле данных должно называться image, а в кодирование tooltip его нужно передать в составе списка:

import altair as alt
import pandas as pd

source = pd.DataFrame.from_records(
    [{'a': 1, 'b': 1, 'image': 'https://altair-viz.github.io/_static/altair-logo-light.png'},
     {'a': 2, 'b': 2, 'image': 'https://avatars.githubusercontent.com/u/11796929?s=200&v=4'}]
)

alt.Chart(source).mark_circle(size=200).encode(
    x='a',
    y='b',
    tooltip=['image']  # Must be a list containing a field called "image"
)