how to find pixel coordinates of an image for plotly scatter plot?

Question

how to find pixel coordinates of an image for plotly scatter plot?

What I am trying to achieve? :: Scatter plot on top of the metro map with the origin and destination passenger count in animated (hourly basis)

Issue:: To find the location of each station i have used the "mpld3" to know the pixel location "plt.scatter([365], [824])" you have to manually find the exact location by adjusting these two values. But when I use the same values on the ploty scatter plot it's showing a different place.

def animate_stations(df, x_col, y_col, animation_frame, size, hover_name, title):

    init_notebook_mode()
    fig = px.scatter(df, 
                 x=x_col,
                 y=y_col, 
                 animation_frame= animation_frame, 
                 size= size, 
                 hover_name = hover_name,
                 range_x=(0,2050), 
                 range_y=(2050,0), 
                 width=700, 
                 height=700,
                 labels = {'origin_x':'', 'origin_y':''})
    image_filename = 'metro.jpg'
    plotly_logo = base64.b64encode(open(image_filename, 'rb').read())
    
    fig.update_layout(xaxis_showgrid=False, 
                    yaxis_showgrid=False,
                    xaxis_showticklabels=False,
                    yaxis_showticklabels=False,
                    title= title,
                    images= [dict(
                    source='data:image/jog;base64,{}'.format(plotly_logo.decode()),
                    xref="paper", yref="paper",
                    x=0, y=1,
                    sizex=1, sizey=1,
                    xanchor="left",
                    yanchor="top",
                    sizing="stretch",
                    layer="below")])
    iplot(fig)
    
station_coords = {
    'Mall of the Emirates Metro Station':[934, 935]
}    

def get_x_coord(station):
    return station_coords[station][0]

def get_y_coord(station):
    return station_coords[station][1]

To find the pixel in image using the below script (output is not working in the ploty)

import matplotlib.pyplot as plt 
import mpld3  
from mpld3 import plugins
img = plt.imread("metro.jpg") 
fig, ax = plt.subplots(figsize=(14,14))
ax.imshow(img) 
plt.grid('on')
plt.axis('off') 
plt.scatter([365], [824]) 
plugins.connect(fig, plugins.MousePosition(fontsize=14))

Kindly let me if any have better solution.

Answer 1

In case I understand it correctly here is solution: 1st option: set the size of original image and plot to be the same, or 2nd option: in case you don't want to change the size adjust the coordinates to fit the plot area

new_x_coord = int((old_x_coord/old_x_len)*new_x_len)
new_y_coord = int((old_y_coord/old_y_len)*old_y_len)

this will move the point to the correct place. Hopefully this will help.