The use case is when I click a point in a mapbox, a callback will be triggered which will generate a png file and also update the static image with the png file
Problem is it can’t seem to update the static image with the newly generated png file
Here is the code that I have write
checkin = pd.read_csv(’/Users/reinaldogani/Desktop/vegas_checkin.csv’)
checkin.drop(‘Unnamed: 0’, axis=1)
vegas_tip = pd.read_csv(’/Users/reinaldogani/Desktop/vegas_tip.csv’)
vegas_tip.drop(‘Unnamed: 0’, axis=1)
vegas_tip[‘name’]=vegas_tip[‘name’].str.replace(’"’, “”)
business_name=‘subway’
image_filename = ‘/Users/reinaldogani/Desktop/’+business_name+’.png’ # replace with your own image
encoded_image = base64.b64encode(open(image_filename, ‘rb’).read())
img_source = ‘data:image/png;base64,{}’.format(encoded_image.decode())
app.layout = html.Div(
[
html.Div([
html.Div(
[
html.P(id=‘total-rides’, className=“totalRides”),
html.P(id=‘total-rides-selection’, className=“totalRideSelection”),
html.P(id=‘date-value’, className=“dateValue”),
html.Div(
[
dcc.Dropdown(
id=‘my-dropdown’,
options=[
{‘label’: ‘Monday’, ‘value’: ‘1’},
{‘label’: ‘Tuesday’, ‘value’: ‘2’},
{‘label’: ‘Wednesday’, ‘value’: ‘3’},
{‘label’: ‘Thursday’, ‘value’: ‘4’},
{‘label’: ‘Friday’, ‘value’: ‘5’},
{‘label’: ‘Satuday’, ‘value’: ‘6’},
{‘label’: ‘Sunday’, ‘value’: ‘0’}
],
value=“0”,
placeholder=“Please choose a day”,
className=“day-picker”
)
],
style={‘margin-bottom’:‘30px’}),
html.Div(
[
html.H2("Yelp Data App", style={'font-family': 'Dosis'})
]
),
html.Div(
[
html.Div(
[
dcc.Graph(id='map-graph',
clickData={'points': [{'customdata': 'Subway'}]})
],
style={'padding-bottom':'15px',
'padding-left':'7px',
'padding-right':'7px',
'float':'left'}
),
html.Div(
[
html.Img(
id='wordcloud',
style={'height':'200px',
'width':'420px'}
)
],
style={'margin-left':'65%'}
)
]
),
html.Div(
[
dcc.Dropdown(
id='bar-selector',
options=[
{'label':'Airport', 'value':'Airport'},
{'label':'Night Club', 'value':'Night Club'},
{'label':'Restaurant', 'value':'Restaurant'},
{'label':'Hotel & Casino', 'value':'Hotel & Casino'},
{'label':'Shopping', 'value':'Shopping'},
{'label':'Beauty & Spas', 'value':'Beauty & Spas'},
{'label':'Other', 'value':'Other'}
],
value="Restaurant",
multi=True,
placeholder='Select categories using the box',
className='bars'
),
html.P("", id="popupAnnotation", className="popupAnnotation")
],
className="graph twelve coluns")],
style={'margin-top': '30px',
'margin-bottom': '30px'}
),
html.Div(
[
dcc.Slider(
id="my-slider",
min=0,
step=1,
value=12,
max=23,
marks={int(hour): str(hour)+str(':00') for hour in checkin['hour'].unique()}
)
],
style={'margin-top': '20px',
'margin-left': '12px',
'margin-right':'12px'}
),
html.Div(
[
dcc.Checklist(
id="mapControls",
options=[
{'label': 'Lock Camera', 'value': 'lock'}
],
values=[''],
labelClassName="mapControls",
inputStyle={"z-index": "3"}
)
]
),
],
className="graphSlider ten columns offset-by-one"), html.Div(id='selected-data')
],
style={"padding-top": "60px"}
)
def select_data(df, day, hour):
output = df[[‘name’, ‘latitude’, ‘longitude’, ‘checkins’, ‘category’]][(df.day==int(day))&(df.hour==int(hour))]
return output
def checkin_size(df, low_limit, upper_limit):
output = df[(df[‘checkins’]>=low_limit)&(df[‘checkins’]<upper_limit)]
return output
def generate_wordcloud(df, business_name):
texts = df.text.values
wc = WordCloud(background_color=“black”, max_words=2000, stopwords=STOPWORDS, height=200, width=540)
wc.generate(" ".join(texts[:10000]))
wc.to_file('/Users/reinaldogani/Desktop/'+business_name+'.png')
@app.callback(Output(“wordcloud”, “src”),
[Input(“map-graph”, “clickData”)])
def update_wordcloud(clickData):
df = vegas_tip
business_name = clickData[‘points’][0][‘customdata’]
dff = df[df[‘name’] == str(business_name)]
generate_wordcloud(dff, business_name)
return img_source
‘’’
@app.callback(Output(“selected-data”, “children”),
[Input(“map-graph”, “clickData”)])
def update_display(clickData):
input_value = clickData[‘points’][0][‘customdata’]
return ‘you enter “{}”’.format(input_value)
‘’’
@app.callback(Output(“map-graph”, “figure”),
[Input(“my-dropdown”, “value”),
Input(“my-slider”, “value”),
Input(“bar-selector”, “value”)])
def update_graph(day, hour, category):
zoom = 10.5
latInitial = 36.1
lonInitial = -115.2
bearing = 0
df=select_data(checkin, day, hour)
check_ins=[]
for i in range(len(category)):
dataframe=df[df.category==category[i]]
check_in = dict(
type='scattermapbox',
lat=dataframe['latitude'],
lon=dataframe['longitude'],
mode='markers',
hoverinfo="text",
text=dataframe['name'],
customdata=dataframe['name'],
name=category[i],
marker=Marker(
opacity=0.6,
size=dataframe['checkins']/10
)
)
check_ins.append(check_in)
layout=dict(
autosize=True,
height=500,
margin=Margin(l=0, r=0, t=0, b=0),
showlegend=False,
mapbox=dict(
accesstoken=mapbox_access_token,
center=dict(
lat=latInitial,
lon=lonInitial),
style='light',
bearing=bearing,
zoom=zoom
)
)
figure = dict(data=check_ins, layout=layout)
return figure
