How to create a Occupancy Grid Map (Grid Cells) with Plotly?

Hi everyone,

I am working on some graph-based planning algorithms but I first need to set up a plotting script that takes a 2D matrix and plots it as grid cells, something similar to the below figures:

In short, I will have a starting point in the grid frame (like the red ball), some obstacles (in black), and an endpoint (in blue) which is where I want to go. The possible locomotion points would be the center of each frame. I know that there are some matplotlib functions that allows me to do that (Like This), but I want to use Plotly because it’s animation library.

Unfortunately, I didn’t find anything on the internet or in the Plotly forums explaining how I can draw the grid with some obstacles, and how to specify each grid matrix value. Could someone help me with that?

Some resources that shows an similar work with matplotlib