Scattermapbox performance for large number of traces in Dash app

Dash Python
1

Hi everyone,

I have a dash app that shows GPS points from around 200 vehicles at 1 minute intervals over 10/20/30 minutes. When I use a single Scattermapbox instance to include all gps points all runs smoothly (by which I mean zooming and panning around the map). However, as soon as I generate a trace per vehicle, effectively creating around 200 traces but not increasing the total number of points displayed, I get significant degradation in performance of general map navigation.

Is that just a limitation of plotting a large number (over 50) traces using scattermapbox or is there some way of improving the performance?

Example code:

import plotly.plotly as py
import plotly.graph_objs as go
import dash
import dash_core_components as dcc
import dash_html_components as html
import numpy as np

# mapbox_access_token = 'TOKEN HERE'

lat = np.random.randint(4500, 4700, size=2000) / 100
lon = np.random.randint(-7400, -7200, size=2000) / 100
lat_lon = np.vstack([lat, lon])

# data = [
#     go.Scattermapbox(
#         lat=lat,
#         lon=lon,
#         mode='markers',
#         marker=dict(
#             size=14
#         ),
#         text=['Montreal'],
#     )
# ]

data = [
    go.Scattermapbox(
        lat=la_lo[0],
        lon=la_lo[1],
        mode='markers',
        marker=dict(
            size=14
        ),
        text=['Montreal'],
    ) for la_lo in np.split(lat_lon, 200, axis=1)]

layout = go.Layout(
    width=1200,
    height=700,
    autosize=True,
    hovermode='closest',
    mapbox=dict(
        accesstoken=mapbox_access_token,
        bearing=0,
        center=dict(
            lat=45,
            lon=-73
        ),
        pitch=0,
        zoom=5
    ),
)

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for Python.
    '''),

    dcc.Graph(
        id='example-graph',
        figure={
            'data': data,
            'layout': layout
        }
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)
2

You might find this related thread helpful. There is a workaround someone suggested in there but it involves modifying the source of dash-core-components and compiling it yourself.

3

Thanks @tcbegley for the hint, I tried the different suggestions in that thread. It does not seem to solve my problem. It seems that the creator of the thread had an issue with the graph loading at all which for me there is no difference between the online version and the locally compiled version of dash-core-components.

Independent on which version (pip or local build) I still have significant performance changes between all points in one trace and spreading the points out over a large number of traces.

4

Ah ok, then I’m afraid I’m not sure what the problem is. Hopefully someone else might have some insights!

5

Hmm seems that this might be a general plotly.js issue?
https://github.com/plotly/plotly.js/issues/3227

I’ll leave this open for a bit in case anyone has another idea :slight_smile: