Ctrl+K

Dash

Dash#

"Dash is a productive Python framework for building web analytic applications. Written on top of Flask, Plotly.js, and React.js, Dash is ideal for building data visualization apps with highly custom user interfaces in pure Python."
- plotly, "Introduction to Dash"

For those familiar with RStudio’s Shiny package (designed to build interactive web applications from within the R/RStudio programming environment), dash was originally pitched as the equivalent package for Python

For more background on dash:

Setup & Environment#

To install dash:

  • using pip: pip install dash

  • in Jupyter notebook using pip: pip install jupyter-dash

  • in Jupyter notebook using conda: conda install -c conda-forge -c plotly jupyter-dash

The remainder of this tutorial focuses on dash outside the Jupyter notebook environment.

!pip install dash # install dash

Collecting dash
  Downloading dash-2.14.2-py3-none-any.whl (10.2 MB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 10.2/10.2 MB 14.4 MB/s eta 0:00:00
?25hRequirement already satisfied: Flask<3.1,>=1.0.4 in /usr/local/lib/python3.10/dist-packages (from dash) (2.2.5)
Requirement already satisfied: Werkzeug<3.1 in /usr/local/lib/python3.10/dist-packages (from dash) (3.0.1)
Requirement already satisfied: plotly>=5.0.0 in /usr/local/lib/python3.10/dist-packages (from dash) (5.15.0)
Collecting dash-html-components==2.0.0 (from dash)
  Downloading dash_html_components-2.0.0-py3-none-any.whl (4.1 kB)
Collecting dash-core-components==2.0.0 (from dash)
  Downloading dash_core_components-2.0.0-py3-none-any.whl (3.8 kB)
Collecting dash-table==5.0.0 (from dash)
  Downloading dash_table-5.0.0-py3-none-any.whl (3.9 kB)
Requirement already satisfied: typing-extensions>=4.1.1 in /usr/local/lib/python3.10/dist-packages (from dash) (4.5.0)
Requirement already satisfied: requests in /usr/local/lib/python3.10/dist-packages (from dash) (2.31.0)
Collecting retrying (from dash)
  Downloading retrying-1.3.4-py3-none-any.whl (11 kB)
Collecting ansi2html (from dash)
  Downloading ansi2html-1.9.1-py3-none-any.whl (17 kB)
Requirement already satisfied: nest-asyncio in /usr/local/lib/python3.10/dist-packages (from dash) (1.6.0)
Requirement already satisfied: setuptools in /usr/local/lib/python3.10/dist-packages (from dash) (67.7.2)
Requirement already satisfied: importlib-metadata in /usr/local/lib/python3.10/dist-packages (from dash) (7.0.1)
Requirement already satisfied: Jinja2>=3.0 in /usr/local/lib/python3.10/dist-packages (from Flask<3.1,>=1.0.4->dash) (3.1.3)
Requirement already satisfied: itsdangerous>=2.0 in /usr/local/lib/python3.10/dist-packages (from Flask<3.1,>=1.0.4->dash) (2.1.2)
Requirement already satisfied: click>=8.0 in /usr/local/lib/python3.10/dist-packages (from Flask<3.1,>=1.0.4->dash) (8.1.7)
Requirement already satisfied: tenacity>=6.2.0 in /usr/local/lib/python3.10/dist-packages (from plotly>=5.0.0->dash) (8.2.3)
Requirement already satisfied: packaging in /usr/local/lib/python3.10/dist-packages (from plotly>=5.0.0->dash) (23.2)
Requirement already satisfied: MarkupSafe>=2.1.1 in /usr/local/lib/python3.10/dist-packages (from Werkzeug<3.1->dash) (2.1.4)
Requirement already satisfied: zipp>=0.5 in /usr/local/lib/python3.10/dist-packages (from importlib-metadata->dash) (3.17.0)
Requirement already satisfied: charset-normalizer<4,>=2 in /usr/local/lib/python3.10/dist-packages (from requests->dash) (3.3.2)
Requirement already satisfied: idna<4,>=2.5 in /usr/local/lib/python3.10/dist-packages (from requests->dash) (3.6)
Requirement already satisfied: urllib3<3,>=1.21.1 in /usr/local/lib/python3.10/dist-packages (from requests->dash) (2.0.7)
Requirement already satisfied: certifi>=2017.4.17 in /usr/local/lib/python3.10/dist-packages (from requests->dash) (2023.11.17)
Requirement already satisfied: six>=1.7.0 in /usr/local/lib/python3.10/dist-packages (from retrying->dash) (1.16.0)
Installing collected packages: dash-table, dash-html-components, dash-core-components, retrying, ansi2html, dash
Successfully installed ansi2html-1.9.1 dash-2.14.2 dash-core-components-2.0.0 dash-html-components-2.0.0 dash-table-5.0.0 retrying-1.3.4

Basic dash Syntax#

dash apps include two main components.

  • The app layout describes what the application looks like.

  • The app interactivity describes the application’s interactivity.

The basic syntax for creating an application using dash:

# code for our figure; area chart with dropdown
df = px.data.gapminder() # load data
fig = px.area(df, x='year', y='pop') # create figure
df = px.data.gapminder() # load data

# gets unique values from country column, creates a dictionary with Plotly parameters to generate dropdown options
country_options = [{'label': country, 'method': 'update', 'args':
 [{'y': [df[df['country'] == country]['pop']], 'x': [df[df['country'] == country]['year']]}]}
                   for country in df['country'].unique()]

fig.update_layout(updatemenus=[dict(type="dropdown", buttons=country_options)]) # update menu with dropdown

import plotly.express as px, dash # import statements
from dash import dcc, html

app = dash.Dash() # create app

# set app layout
app.layout = html.Div([
    dcc.Graph(figure=fig)
])

app.run_server(debug=True, use_reloader=False) # run app

Customizing Your App#

We can start to customize a dash app by using an external style sheet. Similar to how we use CSS in combination with HTML, external style sheets can also be loaded and applied in dash

import plotly.express as px, dash # import statements
from dash import dcc, html

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css'] # load style sheet; this example uses a URL; could also use local .css file

app = dash.Dash(external_stylesheets=external_stylesheets) # create app

# set app layout
app.layout = html.Div([
    dcc.Graph(figure=fig)
])

app.run_server(debug=True, use_reloader=False) # run app

We can also start to modify components of the application by declaring HTML tags. Remember in HTML, tags like <h1>, <p>, etc. are used for styling and formatting.

The dash_html_components library has a component for every HTML tag. Let’s modify our app layout to include a H1 title, a div subtitle, and a Graph object.

import plotly.express as px, dash # import statements
from dash import dcc, html

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css'] # load style sheet; this example uses a URL; could also use local .css file

app = dash.Dash(external_stylesheets=external_stylesheets) # create app

# set app layout
app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for Python.
    '''),

    dcc.Graph(
        id='example-graph',
        figure=fig
    )
])

app.run_server(debug=True, use_reloader=False) # run app

Additional Resources#

For more on the dash_html_components library: plotly, Dash HTML Components

Interactivity#

As we saw with plotly, dash supports different kinds of user interaction.

A quick example of a dropdown menu added to a dash app.

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

# we are using the restaurant tips dataset from Plotly Express
df = px.data.tips()

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css'] # load style sheet; this example uses a URL; could also use local .css file

app = dash.Dash(external_stylesheets=external_stylesheets) # create app

# specify the choices in the dropdown list, with default value
dropdown = dcc.Dropdown(["Fri", "Sat", "Sun"], "Fri", clearable=False)

# create the chart component
graph = dcc.Graph()

# layout of the app -- Heading 4 text followed by the dropdown list, followed by the chart
app.layout = html.Div([html.H4("Restaurant tips by day of week"), dropdown, graph])

# what output to get when you select an input
@callback(Output(graph, "figure"), Input(dropdown, "value"))
def update_bar_chart(day):
    mask = df["day"] == day
    fig = px.bar(df[mask], x="sex", y="total_bill", color="smoker", barmode="group")
    return fig


if __name__ == "__main__":
    app.run_server(mode='external')  # "inline" will output the dashboard in colab, "external" will output it in your browser via localhost

Additional Resources#

There’s a lot more folks could explore in the Dash core components library.

For more examples and documentation:

Dash Resources#

We’re just scratching the surface of what you can do using dash.

To learn more, consult the Dash User Guide. The Dash Enterprise App Gallery includes sample apps with the back-end dash code.

Contents