I am using plotly to plot scatter plot of an ndarray and instead of points I am using respective images. Here is the code:
from pathlib import Path
from PIL import Image
import numpy as np
import pandas as pd
import plotly.express as px
import math, json
import dash
from dash.dependencies import Input, Output, State
from jupyter_dash import JupyterDash
c= -1
for x,y, png in zip(fig.data[0].x, fig.data[0].y, Path.cwd().joinpath("/content/cc").glob("*.png")):
c+=1
fig.add_layout_image(
x=x,
y=y,
source=Image.open(png),
xref="x",
yref="y",
sizex=1.5,
sizey=1.5,
xanchor="center",
yanchor="middle",
)
fig.show()
# Build App
app = JupyterDash(__name__)
app.layout = dash.html.Div(
[dash.dcc.Graph(id="graph", figure=fig), dash.html.Div(id="where")]
)
@app.callback(
Output("where", "children"),
Input("graph", "clickData"),
)
def click(clickData):
if not clickData:
raise dash.exceptions.PreventUpdate
return json.dumps({k: clickData["points"][0][k] for k in ["y"]})
# Run app and display result inline in the notebook
app.run_server(mode="external")
The output I am getting is
There are two things I need to do.
- I need to label the graphs’ images with the y-axis value. In short, I need to add an image label for each image seen in the graph.
- I need to make a simple UI where if I click on two images, they can be shown on the side (anywhere in the blank areas) with a small gif which I have already made and saved. For this, I need to make sure that I get the 2 images’ (which the user clicks) y-axis, so I can display the desired GIF corresponding to the two images. The output will look something like this:
I would really appreciate all the help I can get on this as I am new to plotly and using GANs and visualising them using plotly.