Good evening,
I need help with geographical representation using Dash Choropleth.
I have a geopandas dataframe “balanco_geral” with 5 columns: “Concelho” (Cities of Portugal), “Ano” (Year), “balance_scenario” (can be 1 or 2), “Balanço (kWh)” (Energy Balance for that specific city/year) and “geometry” which is a polygon reference of the city.
I want to make an application that can open a dashboard (HTML for example) in which the user selects the year in question (2021, 2022 or 2023) and the balance scenario (1 or 2). then the dataframe is filtered and a choropleth of the “Balance (kWh)” for each city is represented. I’m using Jupyter Notebook for this code.
This was my test code:
app = Dash(name)
------------------------------------------------------------------------------
App layout
app.layout = html.Div([
html.H1(“Energy Balance Dashboard”, style={‘text-align’: ‘center’}),
dcc.Dropdown(id=“slct_year”,
options=[
{“label”: “2021”, “value”: 2021},
{“label”: “2022”, “value”: 2022},
{“label”: “2023”, “value”: 2023}],
multi=False,
value=2023,
style={‘width’: “40%”}
),
dcc.Dropdown(id=“balance_scenario”,
options=[
{“label”: “Average”, “value”: 1},
{“label”: “Minimum”, “value”: 2}],
multi=False,
value=1,
style={‘width’: “40%”}
),
html.Div(id=‘output_container’, children=),
html.Br(),
dcc.Graph(id=‘balance_graph’, figure={})
])
------------------------------------------------------------------------------
Connect the Plotly graphs with Dash Components
@app.callback(
[Output(component_id=‘output_container’, component_property=‘children’),
Output(component_id=‘balance_graph’, component_property=‘figure’)],
[Input(component_id=‘slct_year’, component_property=‘value’),
Input(component_id=‘balance_scenario’, component_property=‘value’)]
)
def update_graph(option_slctd, balance_scen):
print(option_slctd, balance_scen)
print(type(option_slctd), type(balance_scen))
container = “The year chosen by user was: {}”.format(option_slctd)
balanco_geral_copy = balanco_geral.copy()
balanco_geral_copy = balanco_geral_copy[(balanco_geral_copy[“Ano”] == option_slctd) &
(balanco_geral_copy[“balance_scenario”] == balance_scen)]
fig = px.choropleth_mapbox(
balanco_geral_copy,
geojson=balanco_geral_copy.geometry,
locations=“Concelho”, # Using the index as the location key
color=“Balanço (kWh)”, # Color by energy balance column
mapbox_style=“carto-positron”, # Or use your Mapbox token and a different style
zoom=6, # Adjust zoom level
center={“lat”: 39.5, “lon”: -8.0}, # Centered around Portugal
opacity=0.6,
labels={‘Balanço (kWh)’: ‘Energy Balance (kWh)’},
hover_name=“Concelho” # Show the municipality name on hover
)
fig.update_layout(margin={“r”:0,“t”:0,“l”:0,“b”:0})
return container, fig
------------------------------------------------------------------------------
if name == ‘main’:
app.run_server(debug=True)
The problem is that although there are dropdowns and a map appears, it doesn’t come with the colors of a choropleth, nor with the polygon divisions of each city.
I appreciate your help in solving this problem, as I’ve been trying to solve it for a few months now.
Best regards,
Diogo Vilela