Black Lives Matter. Please consider donating to Black Girls Code today.
https://www.blackgirlscode.com

By selecting something from dropdown box doesn't return anything

So I made this code with a dropdown box in it. When I run it you can see the dropdown box with the values (names) in it. But as soon I select a hotel name it does nothing. I want if that you select name that it gives you only data from that name. Does somebody knows what I need extra to fix this?

Conclusion: The layout is perfect only the filter doesn’t work.

The main reason is that you’re not actually filtering the dataframe.

Before your return statement, you should have some code that looks like this:

df = df[ df.Hotel_Name == value ]

Your callback function would then look like this:

@app.callback(
    Output('map', 'figure'),
    [Input('dropdown', 'value')])
def update_map_callback(value):  

    df = df[ df.Hotel_Name == value ]

    return {
        'data': [
            go.Scattermapbox(
                lat=df['lat'],
                lon=df['lng'],
                mode='markers',
                marker=dict(
                    size=df['Total_Number_of_Reviews']/5000,
                    sizeref=0.1,
                    sizemin=3,
                    color=df['Average_Score'],
                    colorscale='PuRd',
                    showscale=True
                ),
                text=df['label']
            )
        ],
        'layout': go.Layout(
            autosize=True,
            hovermode='closest',
            mapbox_style="dark",
            width=900,
            height=700,
            mapbox=dict(
                accesstoken=access_token,
                zoom=4,
                center=dict(
                    lat=48,
                    lon=8
                )
            ),
            margin = {'l': 0, 'r': 0, 't': 0, 'b': 0},

        )}

If you’re going to change the variable to dff, then you should also change the variables used in creating the graph. Like this:

dff = df[ df.Hotel_Name == value ]

return {
    'data': [
        go.Scattermapbox(
           # LOOK HERE! Change `df` to `dff` on all places
            lat=dff['lat'],
            lon=dff['lng'],
            mode='markers',
            marker=dict(
                size=dff['Total_Number_of_Reviews']/5000,
                sizeref=0.1,
                sizemin=3,
                color=dff['Average_Score'],
                colorscale='PuRd',
                showscale=True
            ),
            text=dff['label']
        )
    ],
    'layout': go.Layout(
        autosize=True,
        hovermode='closest',
        mapbox_style="dark",
        width=900,
        height=700,
        mapbox=dict(
            accesstoken=access_token,
            zoom=4,
            center=dict(
                lat=48,
                lon=8
            )
        ),
        margin = {'l': 0, 'r': 0, 't': 0, 'b': 0},

    )}

I tried it with df = df[ df.Hotel_Name == value ]. I get an empty x and y back. Also no map anymore only the filter.

df = df[ df.Hotel_Name == value]

It should be value, not 'value'

yes i tried that also, but still not working

Try running in debug mode … app.run_server(debug=True) … any errors?

it gives this:

An exception has occurred, use %tb to see the full traceback.

SystemExit: 1

ok…i’m not able to run your code right now due to lack of a dev environment…however,

Do you have a small sample of what data looks like? Also, where is access_token defined?

is it the spelling of the longitude column? Should it be the following:

lon=df['lon'] OR lon=df['log']

And make sure you use a copy of df as dff, inside the function. Do not use the df insdie the function. It should look like this:

def update_map_callback(value):  

    dff = df[ df.Hotel_Name == value ]
    
    return {
        'data': [
            go.Scattermapbox(
                lat=dff['lat'],
                lon=dff['lng'],
                mode='markers',
                marker=dict(
                    size=dff['Total_Number_of_Reviews']/5000,
                    sizeref=0.1,
                    sizemin=3,
                    color=dff['Average_Score'],
                    colorscale='PuRd',
                    showscale=True
                ),
                text=dff['label']
            )
        ],.......................

my lon is in the data set lng and lat is lat

dunno…you just gave screeshot…

In your go.Scattermapbox … aren’t you expecting size to be an int and color to be a string (i.e. rgb(3,3,3))? Your code has both of these as dataframes

Do you mind posting the full code from start to finish?

Also, are you using jupyter notebook for this?

except for your access_code…as I assume you may not want that publicly available…

i changed size to numbers but it changed nothing

@Layla

It should work now:

  1. don’t forget to import dash at the very top.
  2. you have to add this line of code in your dropdown before multi=True
    value=['Hotel Arena']
    because you don’t want to start off with a None value unless you raise an exception.
  3. above the return, inside the function, you want to add:
    dff = df[df.Hotel_Name.isin(value)]
    because the value chosen in this case comes within a list of strings of hotel names and not a stand-alone string. So that’s how you filter your dataframe in this case.
  4. and eveything within the return data should be dff, not df.