Exercise: Chaining Callbacks

Exercise

You are given the following data:

SELECTION_DATA = {
    'Australia': ['Sydney', 'Melbourne'],
    'New Zealand': ['Auckland', 'Wellington']
}

COUNTRIES = list(SELECTION_DATA.keys())

FACTS_DATA = {
    'Sydney':[
        'The Sydney Funnel Web Spider is one of the most dangerous spiders on Earth',
        'The Sydney Harbour Bridge is nicknamed “The Coathanger”',
        'Sydney Has More Than 100 Beaches',
        "12th most expensive city in the world."
    ],
    'Melbourne': [
        'Melbourne was originally named Batmania.',
        'Melbourne’s Chinatown is the oldest Chinatown in the Southern Hemisphere',
        'The Royal Melbourne Hotel is home to the oldest pear tree in Victoria.',
        'Melbourne has more skyscrapers than any other city in Australia.'
    ],
    'Auckland': [
        'From 2006-2008 it was ranked the world’s 5th best city to live in for quality of life',
        'Auckland is also know as the ‘City of Sails’',
        'The Maori name for Auckland is Tamaki Makaurau',
        'There are about 50 volcanoes around Auckland.'
    ],
    'Wellington': [
        'Wellington, is the southernmost capital in the world.',
        'Wellington replaced Auckland as the capital city of New Zealand in 1865.',
        'Approximately 11 percent of Wellingtonians commute to their workplace on foot.',
        'Wellington’s real name is Te Whanganui-a-Tara'
    ]
}

Create a Dash app where the user can select a country from a dropdown, followed by a city within that country; this time from radio options. Upon selecting a city, generate a random fact about that city by sampling a fact from the FACTS_DATA dictionary.

Solution

The below code is a Dash web application using JupyterDash and the Dash Bootstrap Components (DBC) library to create a random fact generator. The application allows users to select a country and a city and then displays a random fact about the selected city.

1. Imports and app setup:

   • An instance of the JupyterDash class is created on line 2 with the name app. An external stylesheet is used for styling, specifically the Cosmo theme from Bootstrap.

2. Data:

   • The SELECTION_DATA dictionary on line 5 contains two keys, Australia and New Zealand, each with a list of associated cities.
   • The COUNTRIES list is created on line 10 by extracting the keys from the SELECTION_DATA dictionary.
   • The FACTS_DATA dictionary on line 12 contains city names as keys, each with a list of associated facts.

3. App layout:

   • The app layout consists of a dbc.Container with the following elements:
     • An html.H1 heading on line 41 with the text ‘Random Fact Generator’.
     • A dcc.Dropdown on line 44 for selecting a country.
     • A html.Br for a line break.
     • A dcc.RadioItems on line 52 for selecting a city.
     • An html.Hr for a horizontal rule.
     • An html.P on line 59 for displaying the output fact.

4. Callbacks:

   • The first callback updates the cities_select on line 65 RadioItems based on the selected country from the country_select dropdown.
   • The second callback sets the default value for the cities_select on line 72 RadioItems to the first available city option.
   • The third callback selects a random fact about the chosen city and displays it in the output_fact on line 80 paragraph.

5. Running the app:

   • The app.run_server(debug=True) line is used to run the app with debug mode enabled.