How to map scatter plot to image? Game spatial analysis

Hi, is there a way to correctly map scatter plot with Image Mark as background in Observable Plot?
In my case, I have a 1024*1024.png image (a game map), and x and y values as coordinate.

Is there a way to precisely map the data with the image?

Here’s my notebook and the dataset: Convert the in-game coordinates to overhead map coordinates. / Fidocia Wima Adityawarman / Observable
Here’s the kaggle notebook reference (matplotlib): Lightweight CS:GO EDA | Kaggle

Thank you!

I don’t think you should convert the coordinates in the database, since you can adjust the domains of x and y to reflect the coordinate system of the game.

I’ve sent you various possibilities as a suggestion. The most difficult part is when you want to have facets with some inner padding. In that case the solution I found is to make an empty plot with the target geometry, then read the bandwidth of the facet scale fx, and use that to specify the size of the image.

Hi @Fil, thank you for your help! Really appreciate it. I feel like I’m learning a lot from your suggestions. I have questions about the margin and axis. Can this only be plotted correctly if the margin is 0 and the axis is null?

If you follow the pattern I suggested for faceting, I think you should be able to use margins and axes.

Again, thank you, Fil. I hope I’m doing this correctly.

1 Like

look good to me!