`mark_image()` creates an Altair image-mark layer. Each row supplies an image URL or file path; encode `url` to select it and `x` and `y` to place it. Set `width` and `height` to control its display size. Image layers can add visual context, highlight selected categories, or support a call to action alongside a quantitative chart. section 4.5.2 section 5.2.2 section 9.2.2
Build an image layer progressively:
- Add an image-location column to the DataFrame. For a sports comparison, assign cycling and rowing URLs only to those rows and leave other rows empty. section 4.5.2
- Create `alt.Chart(df).mark_image(width=35, height=35)` and encode the category and value fields as `x` and `y`, with the URL column as `url`. Layer it over the existing chart with `+`. section 4.5.2
- For fixed dashboard images, use `alt.value(...)` for pixel positions and combine image charts with `+` or `|` around the main chart. section 5.2.2
- Ensure image files are accessible where the chart runs: remote URLs can be used directly, while local image paths require serving the generated HTML from a web server. section 4.5.2 section 5.2.2
Add icons to a next-step panel
Store icon paths in an `img` column and horizontal positions in an `x` column. Build a base chart encoded on `x`, then add `mark_image(width=50, height=50, y=10).encode(url='img')`. Pair this layer with a `mark_text()` layer to present an icon and its recommended action together. section 9.2.2
Listing 5.5 Adding the context as images
image1 = alt.Chart(pd.DataFrame({'image_url': ['source/homeless1.png']})).mark_image(
width=200,
height=200,
).encode(
url='image_url',
x=alt.value(0), # pixels from left
y=alt.value(50) # pixels from the top
) #1
image2 = alt.Chart(pd.DataFrame({'image_url': ['source/homeless2.png']})).mark_image(
width=200,
height=200,
).encode(
url='image_url',
x=alt.value(0), # pixels from left
y=alt.value(300)
) #2
image1 + image2 | chart
This listing shows two independently positioned image charts combined beside a main chart, using image paths, fixed pixel coordinates, and Altair composition operators. section 5.2.2
