Mastering Plotly and Dash Data Visualization with Python/

...

/

Exercise: Callback Functions

Exercise: Callback Functions

Practice with some lab exercises.

We'll cover the following...

Exercise 1

Create a simple Dash app that allows a user to select from a Dash Core Components radio button. The options should be "Cricket", "Swimming", "Running" and whichever option the user selects, output some text inside a paragraph HTML component returning the text You chose {sport_chosen}. Here sport_chosen is the parameter specified for the dash callback function. Set "Cricket" to the default if nothing has been actively selected by the user just yet.

Solution

  • A list of sports is created on line 2 and the first sport in the list (Cricket) is set as the initially selected option.

  • The app layout is set using the dbc.Container method on line 9, which includes:

    • Line 11: An H1 header element displaying “Exercise 1.”

    • Line 14: A RadioItems element on allowing users to select a sport from the list with Cricket preselected.

    • Line 20: A paragraph element (P) with an ID of output_text to display the selected sport later.

  • Line 25: A callback function is defined to update the output_text paragraph element’s content when the user selects a different sport from the radio buttons.

  • The callback function takes the selected sport and returns a formatted string displaying the chosen sport in lowercase.

Press + to interact
# Create the app
app = JupyterDash(__name__, external_stylesheets=[dbc.themes.LUMEN])
# Create options and initially selected
sports = ['Cricket', 'Running', 'Swimming']
initially_selected = sports[0]  # 'Cricket'
# Set up the layout
app.layout = dbc.Container([
    # App header - don't change 
    html.H1('Exercise 1'),
    
    # Place radio button input here, initially selecting "Cricket"
    dcc.RadioItems(id='radio_input', 
                   labelStyle=dict(display='block'),  # vertical display
                   options=sports, 
                   value=initially_selected),
    
    # Output text here
    html.P(id='output_text')
    
], fluid=True)
# Create callback and callback function
@app.callback(
    Output(component_id='output_text', component_property='children'),
    Input(component_id='radio_input', component_property='value')
)
def text_update(sport_chosen):
    return f"You chose {sport_chosen.lower()}"
# Run the app
if __name__ == "__main__":
    app.run_server(host='0.0.0.0', port='3000',debug=True)
    # Print the url the app will be served on
    url = os.environ['EDUCATIVE_LIVE_VM_URL'] + ':3000/' 
    print("The app is served on: ", url)

Exercise 2

Create a simple Dash app that allows users to input a number using Dash Bootstrap Components and output the value when a sigmoid function has been applied to the given number. Display the content as a Dash markdown Component ...