Hello everyone, I’m wondering how to display slider component only if value ‘unemployment’ is selected from dropdown menu? Thank you for your answer and time.
import json
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd
from urllib.request import urlopen
from dash.dependencies import Input, Output
import plotly.graph_objects as go
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
df = pd.read_csv("https://raw.githubusercontent.com/MichalLeh/CZ-map/master/CZ.csv",
dtype={"district": str})
with urlopen('https://raw.githubusercontent.com/MichalLeh/CZ-map/master/CZ-district.json') as response:
geojson = json.load(response)
app.layout = html.Div([
dcc.Graph(
id='CZmap'
),
html.Label('Dropdown'),
dcc.Dropdown(
id='dropdown',
options=[
{'label': 'Unemployment', 'value': 'unemployment'},
{'label': 'Population', 'value': 'population'}
],
value='population'
),
html.Label('Slider'),
dcc.Slider(
id='slider',
min=1,
max=4,
step=1,
value=1,
marks={str(i): str(i) for i in range(1,5)}
)
])
@app.callback(
Output(component_id='CZmap', component_property='figure'),
[Input(component_id='dropdown', component_property='value'),
Input(component_id='slider', component_property='value')])
def update_map(dropVar, slideVar):
if dropVar == 'population':
selectCol = 'population'
elif dropVar == 'Unemp':
selectCol = "Unemp_" + str(slideVar)
fig = px.choropleth_mapbox(df, geojson=geojson, color=selectCol,
locations="district", featureidkey="properties.district",
center={"lat": 50.5517, "lon": 15.7073},
mapbox_style="carto-positron",width=1200, height=600, zoom=5)
fig.update_layout(margin={"r":60,"t":50,"l":60,"b":50})
return fig
if __name__ == '__main__':
app.run_server(debug=True)