Is there a way to filter data for color parameter for choropleth map for dash?

Dash Python
1

Hi. I made a simple Dash app with a map with it. Map shows the color according to the value from the dropdown menu (which is the column from the dataset). In the column there are 3 different school subject with different school grades. But this dataset is just a small copy of original (with more then 1000 columns). and hence it’ll be quite hard for a user to choose right option.

And what I want is to add two more objects for filtering (even dropdown may fit to it) - first is for filtering grades with values (8, 9, 10, 11) and second for filtering subject with values (Algebra, History and Language). So if I’ll choose 10 from the first one and History from the second one, I’ll be able to choose only History 10 from the main one, and if I’ll choose only Algebra in the second one, then I’ll be able to choose all columns with Algebra. I hope you understood me.

Anyway, I have no idea how to create it - we could make filter using something like if "Algebra" in column, and add them to callback section, but I don’t know how to connect them so they can work. That’s why I hope that someone will help me…

Code below (it may take a while to download geojson and build a map, at least it’s true for me).

from urllib.request import urlopen
import pandas as pd
import json
import plotly
import plotly.express as px

import dash
from dash import dcc
from dash import html
from dash.dependencies import Input, Output

url = 'https://raw.githubusercontent.com/Kreozot/russian-geo-data/master/geo.json'
with urlopen(url) as response:
    regions = json.load(response)
    
dff = pd.read_csv('https://raw.githubusercontent.com/Lotaristo/Datasets/main/Homework_eng.csv')


app = dash.Dash(__name__)


app.layout = html.Div([
                    dcc.Dropdown(id='select',
                                 multi=False,
                                 options=[{'label': i, 'value': i} for i in dff.columns.unique()],
                                 searchable=True),
            
            
                    dcc.Graph(id='graph_a', figure={})])



@app.callback(Output('graph_a', 'figure'),
              Input('select', 'value'))

def update_graph_a(val):

    fig = px.choropleth(dff,
                           geojson=regions,
                           locations='id',
                           featureidkey='properties.ID_1',
                           color = val,
                           hover_name = dff.index,
                           hover_data = {'id':False},
                           labels={'color':'Value, %'},)
    fig.update_geos(fitbounds="locations")
    return fig

if __name__ == '__main__':
    app.run_server(debug=False)
2

Hi,

Just for clarification: when the combo “History” + “10” is selected, is there a single column that matches this selection in dff or potentially multiple ones? I am asking because searchable=True would allow the user to search the combination without implementing two extra dropdowns with partial matches…

Otherwise, you could use the two extra dropdown values as inputs in a callback that changes the options in “select”:

@app.callback(
    Output("select", "options"),
    Input("subject-select", "value"),
    Input("grade-select", "value")
)
def update_select(subject, grade):
     # some filtering logic, for example
    cols = dff.columns.unique()
    if subject is not None:
         cols = [ c for c in cols if subject in c]
    if grade is not None:  
         cols = [ c for c in cols if grade in c] # won't work if 1 and 11 are both acceptable grades...
    return [{'label': i, 'value': i} for i in cols]

But again, this filtering is just overkill if searchable=True, as this is basically handled in a single component without any extra callback.

1 Like
3

Well, I didn’t even thought about search, although you maybe right, maybe it’ll be enough. I’ll think about it. Thanks for help, anyway will try to use it :slight_smile: