Images only show on first facet

[tlyon3]

When using facet_col, images added to the layout only are put in the first facet:

using PlotlyJS, CSV, DataFrames

df = dataset(DataFrame, "iris")
sources = [
    "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Iris_setosa_var._setosa_%282595031014%29.jpg/360px-Iris_setosa_var._setosa_%282595031014%29.jpg",
    "https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Iris_versicolor_quebec_1.jpg/320px-Iris_versicolor_quebec_1.jpg",
    "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f8/Iris_virginica_2.jpg/480px-Iris_virginica_2.jpg",
]
layout = Layout(
    images = [
        attr(
            row=1,
            col=col + 1,
            source=src,
            xref="x domain",
            yref="y domain",
            x=1,
            y=1,
            xanchor="right",
            yanchor="top",
            sizex=0.2,
            sizey=0.2,
        )
    for (col, src) in enumerate(sources)]
)
plot(
    df,
    kind="scatter",
    mode="markers",
    x=:sepal_length,
    y=:sepal_width,
    facet_col=:species,
    layout
)

[nicolaskruchten]

@sglyon this one is for you right? Should this be in the PlotlyJS.jl repo?

[empet]

@tlyon3 To get the coordinates of the upper left corner of each image, referenced to "paper", and xanchor="left", yanchor="top", run these lines of code after you defined the plot:

for k in 2:3
    print(pl.plot.layout["xaxis$k"], "\n")
end    

The left value of each domain is the x-coordinate of the upper-left corner. For the first facet/image it is 0. Hence add to your code, before the layout definition, the array of x-positions, and define the layout as below:

xpos = [0, 0.35555555555555557, 0.7111111111111111]
layout = Layout( xaxis_showgrid=false, yaxis_showgrid=false,
    images = [
        attr(
            source=src,
            row=1,
            col=col,
            xref= "paper", 
            yref="paper",
            x=xpos[col],
            y=1,
            xanchor="left",
            yanchor="top",
            sizex=0.30,
            sizey=1,
            layer="below",
            sizing="stretch",
        )
    for (col, src) in enumerate(sources)]
)
pl = plot(df,
    kind="scatter",
    mode="markers",
    x=:sepal_length,
    y=:sepal_width,
    facet_col=:species,
    
    layout
)

[sglyon]

Thanks @empet cool example!

@nicolaskruchten yep this is for me. Should be over on sglyon/PlotlyBase.jl

[empet]

@sglyon Thanks, but it's @tlyon3' s example. I just added more image attributes to get them displayed

[sglyon]

There is a new add_layout_image! function that is subplot aware!

Using that function we can implement something like this example (images go in top right corner of each subplot) as follows

using PlotlyJS, CSV, DataFrames

df = dataset(DataFrame, "iris")
sources = [
    "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Iris_setosa_var._setosa_%282595031014%29.jpg/360px-Iris_setosa_var._setosa_%282595031014%29.jpg",
    "https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Iris_versicolor_quebec_1.jpg/320px-Iris_versicolor_quebec_1.jpg",
    "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f8/Iris_virginica_2.jpg/480px-Iris_virginica_2.jpg",
]

function make_iris_image(src)
    attr(
        source=src,
        xref="x domain",
        yref="y domain",
        x=1,
        y=1,
        xanchor="right",
        yanchor="top",
        sizex=0.2,
        sizey=0.2,
    )
end

p = plot(
    df,
    kind="scatter",
    mode="markers",
    x=:sepal_length,
    y=:sepal_width,
    facet_col=:species,
)

for (col, src) in enumerate(sources)
    add_layout_image!(p, make_iris_image(src), row=1, col=col)
end
p

[sglyon]

@nicolaskruchten somehow with permissions changes I seem to have lost control over this repo. I can't close the issue. Could you re-grant me permissions? Thanks!