Draw a scatter graph on top of an image

📊 Plotly Python
1

Dear all,

Now I am working on some visualization tasks. More specifically, I have a trajectory data as a set of (x, y) coordinates in the image space and I want to render it as a scatter graph on top of an (map) image.

  • My data is a collection of (x, y) coordinates in the image space such as [(100, 198), (300, 1080), (500, 800), …]
  • The (map or background) image has a 4096 x 4096 resolution and it’s a PNG file.

I really appreciate your help in advance.

Thanks and regards,

2

Hi @kbu9299,

Here’s an example of drawing traces over an image (https://plot.ly/python/images/#interactive-facial-recognition-overlays). Set mode='markers' instead of mode='lines' on the go.Scatter object and you’ll have a scatter plot.

In this case the image souce is set to a URL (source= "https://raw.githubusercontent.com/.../beethoven.jpg"). You can do the same by hosting your image somewhere. Or you can open the image using the pillow library as a PIL.Image.Image object (See https://pillow.readthedocs.io/en/3.1.x/reference/Image.html) and assign this image object as the source property. This will embed the image directly in the plot.

Hope that helps!
-Jon

3

Hi @jmmease

Thanks for your reply. Now I am able to draw trajectories on top of a given image.
However, I think the current solution seems to not work with ZOOM IN/OUT and PAN features which means the background image is fixed and doesn’t change accordingly.

Is there any way to convert the raster image into a map which seemingly work with geomap features?

Best regards,

  • Brian
4

Hi @kbu9299,

Oh sorry, I hadn’t tried zooming in on that one. You’re right that it’s not configured properly to support zooming.

The example above is though: https://plot.ly/python/images/#zoom-on-static-images.

The difference is that the image’s xref and yref should be anchored to the x-axis and y-axis respectively, whereas in the first example I linked to these references are set to be relative to the plot canvas (in paper coordinates).

-Jon

1 Like
5

I know this a few years out, but it would be great if you could post your solution. I am trying to do the same thing.

6

@seabear
If your question is the initial one, i.e. how to draw a scatter on top of an image, then this is an example:

import plotly.graph_objects as go
import numpy as np

source="https://raw.githubusercontent.com/empet/Datasets/master/Images/sun-flower.jpg"

fig=go.Figure()
fig.add_scatter(x=np.arange(0, 7), y=np.random.randint(2, 13, 7), 
                mode="lines", line_color="red", line_width=2)
fig.update_layout(template="plotly_white", width=400, height=400,
                 xaxis_showgrid=False, yaxis_showgrid=False)
fig.add_layout_image(
        source=source,
        xref="paper",
        yref="paper",
        x=0,
        y=1,
        xanchor="left",
        yanchor="top",
        layer="below",
        sizing="stretch",
        sizex=1.0,
        sizey=1.0
    )

scatter-on-image