Black Lives Matter. Please consider donating to Black Girls Code today.

Wrong point capturing with box selection

Hi everyone!

My code is aimed to generate map where I can select areas via box select and get points of this selection in table. Mainly, I used code posted here: https://plotly.com/python/v3/selection-events/
Unfortunately, I get error “ValueError: Invalid property path ‘mapbox._derived’ for layout” and, what is a main headache, wrong points in the table. (I can select 3 points and get nothing or get a few wrong points.)

I’m a newbee, sorry if something wrong.

Thonks!

import plotly.graph_objs as go
import plotly.offline as py
import pandas as pd
import numpy as np
from ipywidgets import interactive, HBox, VBox
import plotly.express as px

py.init_notebook_mode()
source = pd.read_csv(r"cities.csv", sep=";")

f = go.FigureWidget(px.scatter_mapbox(source, lat="lat", lon="lon", color="admin", hover_data=["population","capital"], zoom=3, height=300))
f.update_layout(mapbox_style="open-street-map")
f.update_layout(margin={"r":0,"t":0,"l":0,"b":0})
scatter = f.data[0]

# Create a table FigureWidget that updates on selection from points in the scatter plot of f
t = go.FigureWidget([go.Table(
    header=dict(values=["population","capital", "city"],
                fill = dict(color='#C2D4FF'),
                align = ['left'] * 5),
    cells=dict(values=[source[col] for col in ["population","capital", "city"]],
               fill = dict(color='#F5F8FF'),
               align = ['left'] * 5))])

def selection_fn(trace,points,selector):
    t.data[0].cells.values = [source.loc[points.point_inds][col] for col in ["population","capital", "city"]]

scatter.on_selection(selection_fn)

# Put everything together
VBox((f,t))

Data: http://www.sharecsv.com/s/5de077f5c062ac5f4177ba9f5d7d21c2/cities.csv