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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
.. currentmodule:: altair
.. _user-guide-image-marks:
Image
~~~~~~
Image marks allow external images, such as icons or photographs, to be included in Altair visualizations. Image files such as PNG or JPG images are loaded from provided URLs.
Image Mark Properties
^^^^^^^^^^^^^^^^^^^^^
An ``image`` mark can contain any :ref:`standard mark properties <mark-properties>`
and the following special properties:
.. altair-object-table:: altair.MarkDef
:properties: url aspect align baseline
Scatter Plot with Image Marks
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
.. altair-plot::
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")
|
