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

How to get real-time data updating on a scatter-mapbox

Hey. I’ve created a program to generate random points on a plane representing geo-coordinates (I took the boundaries within a field). I’ve called this data.csv, comprising of lat and lon values. This gets updated every 5 seconds with new random points.

I’ve created a simple dash application constructed from some boilerplate code. This essentially just creates a map with the random geopoints.

The idea is every second (arbitrary for now) it’s going to pull in the new CSV file and I want the scatter-mapbox data to update and replace the old points with the new. I don’t know the way to apply the new data? I’ve had a look at the fig.update_mapboxes method and I can’t find anything about updating the data, I’m also not sure that the line:

fig.update(data=dict(lat=np.array(, lon=np.array(udf.lon).tolist()))

is doing what I think it should be doing (if anything at all)…

app = dash.Dash()

df = pd.read_csv('data.csv')

fig = px.scatter_mapbox(df, lat="lat", lon="lon", height=512, width=512, zoom=16)

app.layout = html.Div(children=[
    html.H1(children='Simulated Map'),

        Dash: A web application for visualising geodata.



@app.callback(Output('live-update-graph', 'figure'), Input('interval-component', 'n_intervals'))
def update_graph_live(n):
    udf = pd.read_csv('data.csv')
    fig.update(data=dict(lat=np.array(, lon=np.array(udf.lon).tolist()))
    return fig

if __name__ == '__main__':
    app.run_server(debug=True, use_reloader=False)

I also want to work in the uirevision somehow to save the state of the zoom, pan etc.
I’m not sure if I should just create a new figure (i.e reassign fig) every time it searches for a new csv?

Anyone able to offer some assistance. Been scratching my head for a few days :slight_smile: