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

Update Static Image Problem

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