Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! ✅Check out the new docs.

Draw a scatter graph on top of an image

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,

Hi @kbu9299,

Here’s an example of drawing traces over an image ( 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= ""). 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 and assign this image object as the source property. This will embed the image directly in the plot.

Hope that helps!

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

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:

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