Trying to create dropdown filters for geo data

📊 Plotly Python
1

Hi everyone, I am very new to python and plotly, both. I was working on a small project and needed some help.

I am trying to create dropdown filters for some geodata (i.e. lat, long mapped onto a scatter map). I have managed to create the buttons but they still do not filter the data. The data is voyages completed by some fishing ships and I want to be able to filter the data by Voyage Number, to see the data by voyage if I want to.

I’ve got this so far;

import pandas as pd
import numpy as np
import os

import plotly.io as pio
import plotly.offline as py
import plotly.graph_objs as go
import plotly.express as px
import geopandas as gpd

from dash import Dash, dcc, html, dash_table, Input, Output
from base64 import b64encode
import io

import dash_core_components as dcc
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State
from dash.exceptions import PreventUpdate
import json

from IPython.display import display

st = pd.read_csv('st_22_23.csv', parse_dates=True, index_col='date')
st = st[pd.notnull(st['hsd_cons'])]
st.fillna(value=0, axis=0, inplace=True)

fig = px.scatter_mapbox(st, 
                        lon=st['long'], 
                        lat=st['lat'], 
                        color=st['voyage_no'],
                        hover_name=st['voyage_no'],
                        size=st['catch_kg'],
                        center=dict(lat=21, lon=90),
                        template='simple_white')

fig.update_geos(lataxis_showgrid=True,
                lonaxis_showgrid=True,
                showrivers=True, rivercolor="Blue",
                showcountries=True)

fig.update_layout(mapbox_style="open-street-map")

#add buttons to filter data
labels = st['voyage_no'].unique()
buttonsLabels = [dict(label = "All",
                            method = "restyle",
                            visible=True,
                            args = [
                                {'x' : [st.voyage_no]},
                                {'y' : [st.voyage_no]},
                                {'color': [st.voyage_no]},
                            ]
                            )]

for label in labels:
    buttonsLabels.append(dict(label = int(label),
                              method = "restyle",
                              visible = True,
                              args = [
                                  {'x' : [st.loc[st['voyage_no'] == label, "voyage_no"]]},
                                  {'y' : [st.loc[st['voyage_no'] == label, "voyage_no"]]},
                                  ]
                              ))

fig.update_layout(updatemenus = [
   dict(buttons = buttonsLabels, showactive = True),
   ])

fig.show()

Any help regarding this would be greatly appreciated. This is also my first post so I apologize in advance if I haven’t followed any conventions of posting :frowning:

2

Hi @fishmonger welcome to the forums.

I edited your post (code formatting)- it’s easier to read like this.

Are you searching for a solution in pure plotly or a solution in Dash (since you import teh dash components)?

3

Hey @AIMPED, thank you for your quick reply and for editing it to look so much cleaner! I haven’t really gotten the hang of all of this yet as I am super new. I am using plotly offline to make the visualizations so I think pure plotly is best for me. I also am not sure how to use Dash, but I was trying it out, hence importing the components.