I’m working on a project where I’m creating an interactive map by using a plotly.graph_objects.Figure object. The map is created by plotting an image and then adding a scatterplot to display different data points that can be clicked on. Everything is working as intended, however after displaying 100 data points, all remaining points turn invisible.
I have created a very simplified version of my code to illustrate the issue:
import numpy as np
import plotly.graph_objects as go
from dash import dcc
from jupyter_dash import JupyterDash
def generateMap():
x = np.arange(0, 200)
y = np.arange(0, 200)
fig = go.Figure()
scatter = go.Scatter(x=x, y=-y, mode = "markers", opacity = 1)
scatter.marker.size = [10] * 100
fig.add_trace(scatter)
fig.layout.hovermode = "closest"
return fig
app = JupyterDash(__name__)
app.layout = html.Div([
html.Div(dcc.Graph(figure = generateMap()))
])
app.run_server(mode = "inline", port = 8051)
This is what that code looks like:
As you can see, the markers are only drawn up to an x-coordinate of 100, similarly with y. This shouldn’t be happening though, since both of them are set up to plot until 200. These points do exist though, as if I hover above one of them, their coordinates are still displayed. I cannot use any plotting mode other than markers because drawing lines on a map only intended for clickable points is impractical.
Does anyone have an idea of how the missing points can be shown?
