Interactieve componenten

Dashboards bouwen met Dash en Plotly

Alex Scriven

Data Scientist

Interactiviteit uitbreiden

Handige interactieve componenten:
- dcc.Checklist() = Selectievakjes
- dcc.RadioItems() = Radioknoppen
- dcc.Slider() / dcc.RangeSlider() = Schuifregelaars
- dcc.DatePickerSingle() / dcc.DatePickerRange() = Als sliders maar voor data

Sliders

Slider: sleep voor één waarde

Range Slider: sleep voor twee waarden

Tip: Koppel aan een callback
- Update grafieken of componenten

Een slider:

Een gif van een blauwe slider op een zwarte achtergrond met tekst eronder die de gekozen waarde toont. De muis schuift de knop omhoog; de getoonde waarde stijgt.

Een range slider:

Een gif van een blauwe range slider op een zwarte achtergrond met tekst eronder die twee gekozen waarden toont. De muis schuift beide uiteinden, waardoor de waarden wijzigen.

Sliders in Dash

dcc.Slider(

    min=10,
    max=50,

    value=45,

    step=5,

    vertical=False

)

Belangrijke argumenten:

min/max : Grenzen van slider
value : Startwaarde
step : Stapgrootte per inkeping
vertical : Horizontaal of verticaal

Datumkiezers in Dash

DatePickerSingle: Kies één datum

dcc.DatePickerSingle(
  date=date(2025, 7, 1),
  initial_visible_month=datetime.now(),
)

date = startselectie
initial_visible_month = maand in popup
Optioneel beperken met min_date_allowed en max_date_allowed

Een gif van een veelgebruikte datumkiezer. Er is een datumveld met 1 juli 2025. De muis klikt; een kalender verschijnt. Een andere datum (2 juli 2025) wordt gekozen; de kalender sluit en de waarde past zich aan.

Date Range Picker

Lijkt op DatePickerSingle

dcc.DatePickerRange(
initial_visible_month=datetime.now(),
start_date=date(2025, 7, 1),
end_date=date(2025, 7, 16),
)

Stel een begin- (start_date) en einddatum (end_date) in

Een gif van een veelgebruikte datumkiezervoorbeeld. Er zijn twee datumvelden met data in juli 2025 geselecteerd. De muis klikt het tweede veld; een kalender verschijnt met het bereik al groen gemarkeerd. Er wordt een nieuw bereik gekozen, waardoor de data wijzigen.

Plots updaten

# dcc.DatePickerSingle(id='sale_date')
# dcc.Graph(id='sales_cat')

@callback(
    Output(component_id='sales_cat', 
           component_property='figure'),
    Input(component_id='sale_date', 
           component_property='date'))

def update_plot(input_date):
    sales = ecom_sales.copy(deep=True)

    if input_date:
        sales = sales[sales['InvoiceDate'] == input_date]

    # Maak fig
    return fig

Laten we oefenen!

Dashboards bouwen met Dash en Plotly