Images only show on first facet #58

Activity

1. nicolaskruchten commented on Aug 17, 2021

   

   nicolaskruchten

   on Aug 17, 2021

   More actions

   @sglyon this one is for you right? Should this be in the PlotlyJS.jl repo?
2. empet commented on Aug 17, 2021

   

   empet

   on Aug 17, 2021

   More actions

   @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
   )
   

   
3. sglyon commented on Aug 17, 2021

   

   sglyon

   on Aug 17, 2021

   Contributor

   More actions

   Thanks @empet cool example!

   @nicolaskruchten yep this is for me. Should be over on sglyon/PlotlyBase.jl
4. empet commented on Aug 18, 2021

   

   empet

   on Aug 18, 2021

   More actions

   @sglyon
   Thanks, but it's @tlyon3' s example. I just added more image attributes to get them displayed
5. sglyon commented on Aug 26, 2021

   

   sglyon

   on Aug 26, 2021

   Contributor

   More actions

   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
   
6. sglyon commented on Aug 26, 2021

   

   sglyon

   on Aug 26, 2021

   Contributor

   More actions

   @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!