Altair show overlapping images

Question

I want to show overlapping images using altair.
Here's a demo code.

import altair as alt
import pandas as pd
source = pd.DataFrame([{"x": [0,0,0], "y": [0,0,0], 
                        "img": ["https://vega.github.io/vega-datasets/data/gimp.png",
                               "https://vega.github.io/vega-datasets/data/7zip.png",
                               "https://vega.github.io/vega-datasets/data/ffox.png"]},])
chart=alt.Chart(source).mark_image(width=100,height=100,).encode(x='x',y='y',url='img')
chart

What I see as an output is not what I expected:

I wonder what's the issue here(?).

Answer 1

You probably meant to construct your dataframe this way:

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

i.e. it should have three rows rather than one row. If you do this, the chart works, and the last image appears on top of the others, as expected.