Implementation of the Web Application

Introduction to Dash

Dash is a Python framework for creating interactive web applications. It operates with layouts and callbacks. In our implementation, we also use the Plotly library for data visualization and graphs.

Source: Plotly

Functionality

The framework operates with layouts and callbacks, these components define the appearance and functionality of the application.

Layouts

Layouts define the appearance of the application. They consist of standard HTML elements or interactive components from specific modules. A layout is structured as a hierarchical tree of components, allowing for the nesting of elements.

Dash is declarative, meaning that all components have arguments that describe them. The arguments can vary depending on the type of component. The main types are HTML components (dash.html) and Dash components (dash.dcc).

The available HTML components include all standard HTML elements, with attributes such as style, class, id, etc. Dash components generate high-level elements such as graphs and selectors.

Callbacks

Callbacks are functions automatically called when an input component (input) changes. They display the result of the functions to an output component (output).

Callbacks use the @callback decorator to specify the inputs and outputs, corresponding to the id of the components and the properties to be updated. Each attribute of a component can be modified as an output of a callback, in response to an interaction with an input component. Some components, like sliders or dropdowns, are already interactive and can be used directly as inputs.

Example Code

Here is an example of code illustrating the use of Dash and Plotly: Documentation

from dash import Dash, html, dcc, callback, Output, Input
import plotly.express as px
import pandas as pd

# Loading data
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder_unfiltered.csv')

# Initializing the Dash application
app = Dash()

# Defining the application layout
app.layout = html.Div([
    html.H1(children='Title of Dash App', style={'textAlign':'center'}),
    dcc.Dropdown(df.country.unique(), 'Canada', id='dropdown-selection'),
    dcc.Graph(id='graph-content')
])

# Defining the callback to update the graph
@callback(
    Output('graph-content', 'figure'),
    Input('dropdown-selection', 'value')
)
def update_graph(value):
    # Filtering data based on the country selection
    dff = df[df.country == value]
    # Creating a line graph with Plotly Express
    return px.line(dff, x='year', y='pop')

# Running the application
if __name__ == '__main__':
    app.run(debug=True)