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

About frames(or animation)on dropdown menu?

I wanna creat a unique animation for each of my dropdown menu options .
the animation is mobing a point on a scattermapbox line like below(each of my dropdown menu is a unique line)
how should i do?
my code:
import plotly.plotly as py
import plotly.graph_objs as go
import pandas as pd
import numpy as np
import plotly

set the number of shown columns and rows

#pd.set_option(‘display.max_columns’, None)
#pd.set_option(‘display.max_rows’, None)

store the ‘mapbox’ acess token to get the map resourse

mapbox_access_token = ‘your_mapbox_acess_token’

load the Feb.2011 US flight path data

df_airports = pd.read_csv(‘https://raw.githubusercontent.com/plotly/datasets/master/2011_february_us_airport_traffic.csv’)
df_flight_paths = pd.read_csv(‘https://raw.githubusercontent.com/plotly/datasets/master/2011_february_aa_flight_paths.csv’)

creat airport_data object

airport_data=[]
for i in range(len(df_flight_paths)-1):
airport_data.append(go.Scattermapbox(
lon = [df_flight_paths[‘start_lon’][i], df_flight_paths[‘end_lon’][i] ],
lat = [df_flight_paths[‘start_lat’][i], df_flight_paths[‘end_lat’][i] ],
mode=‘markers’,
hoverinfo=‘text’,
marker=dict(
size=4,
color=‘red’
),
text=[df_flight_paths[‘airport1’][i],df_flight_paths[‘airport2’][i]]
))
airport_data.append(go.Scattermapbox(
lon = df_airports[‘long’],
lat = df_airports[‘lat’],
mode=‘markers’,
hoverinfo=‘text’,
marker=dict(
size=4,
color=‘red’
),
text=df_airports[‘airport’]
) )

creat flight_paths_data object

flight_paths_data=[]
for i in range(len(df_flight_paths)):
flight_paths_data.append(go.Scattermapbox(
lon = [df_flight_paths[‘start_lon’][i], df_flight_paths[‘end_lon’][i] ],
lat = [df_flight_paths[‘start_lat’][i], df_flight_paths[‘end_lat’][i] ],
mode = ‘lines’,
hoverinfo=‘none’,
line = dict(
width = 3,
color = ‘red’,
),
opacity = float(df_flight_paths[‘cnt’][i])/float(df_flight_paths[‘cnt’].max()),
))

creat layout object

layout = dict(
height = 800,
margin = dict( t=0, b=0, l=0, r=0 ),
showlegend=False,
font = dict( color=’#FFFFFF’, size=11 ),
paper_bgcolor = ‘#000000’,
mapbox=dict(
accesstoken=mapbox_access_token,
bearing=0,
center=dict(
lat=38,
lon=-94
),
pitch=0,
zoom=3,
style=‘dark’
))

create subplot-buttons

Airline=[]
for i in range(len(df_flight_paths)):
if i==0:
vis_TF=np.linspace(0,0,len(df_flight_paths),dtype=int)
vis_TF=list(vis_TF==i)
Airline.append(dict(
label=‘Total’,
method=‘update’,
args=[{‘visible’:vis_TF}]
))
else:
airline_info=[df_flight_paths[‘airport1’][i-1],’-’,df_flight_paths[‘airport2’][i-1]]
airline_info=’’.join(airline_info)
vis_TF=np.linspace(0,len(df_flight_paths),len(df_flight_paths),dtype=int)
vis_TF=list(vis_TF==i-1)
Airline.append(dict(
label=airline_info,
method=‘update’,
args=[{‘visible’:vis_TF},
{‘annotations[0].text’:‘Nof:’+str(df_flight_paths[‘cnt’][i])}]
))

creat dropdown menus

updatemenus=list([
# choose airline buttons
dict(
buttons = Airline,
pad = {‘r’: 0, ‘t’: 10},
x = 0.1,
xanchor = ‘left’,
y = 1.0,
yanchor = ‘top’,
bgcolor = ‘#AAAAAA’,
active = 99,
bordercolor = ‘#FFFFFF’,
font = dict(size=11, color=’#000000’)
),
# background buttons
dict(
buttons=list([
dict(
args=[‘mapbox.style’, ‘dark’],
label=‘Dark’,
method=‘relayout’
),
dict(
args=[‘mapbox.style’, ‘light’],
label=‘Light’,
method=‘relayout’
),
dict(
args=[‘mapbox.style’, ‘satellite’],
label=‘Satellite’,
method=‘relayout’
),
dict(
args=[‘mapbox.style’, ‘satellite-streets’],
label=‘Satellite with Streets’,
method=‘relayout’
)
]),
direction = ‘up’,
x = 0.90,
xanchor = ‘left’,
y = 0.05,
yanchor = ‘bottom’,
bgcolor = ‘#000000’,
bordercolor = ‘#FFFFFF’,
font = dict(size=11)
),
])

set annotations

annotations = list([
dict(text=‘Airline Visulizaiton’, font=dict(color=‘magenta’,size=14), borderpad=10,
x=0.03, y=0.05, xref=‘paper’, yref=‘paper’, align=‘left’, showarrow=False, bgcolor=‘black’),
dict(text=‘Choose the Airline:’, x=0.01, y=0.98, yref=‘paper’, align=‘left’, showarrow=False,font=dict(size=14))
])

layout[‘updatemenus’] = updatemenus
layout[‘annotations’] = annotations

creat frames data

#N=30
#frames=[]
#for i in range(len(df_flight_paths)):
#ani_lon = np.linspace(df_flight_paths[‘start_lon’][i],df_flight_paths[‘end_lon’][i],N)
#ani_lat = np.linspace(df_flight_paths[‘start_lat’][i],df_flight_paths[‘end_lat’][i],N)
#frames.append(dict(data=[go.Scattermapbox(
#lat=[ani_lat[k]],
#lon=[ani_lon[k]],
#mode=‘markers’,
#marker=dict(color=‘red’, size=4),
#hoverinfo=‘none’,
#)
#]) for k in range(N))

creat final result html

fig = dict(data=flight_paths_data+airport_data, layout=layout)

plotly.offline.plot(fig, filename=‘2d_airline_visulization’,show_link=False)