A Minimal Dash App

A minimal Dash app will typically look like this:

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

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

app = Dash()

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

@callback(
    Output('graph-content', 'figure'),
    Input('dropdown-selection', 'value')
)
def update_graph(value):
    dff = df[df.country==value]
    return px.line(dff, x='year', y='pop')

if __name__ == '__main__':
    app.run(debug=True)

Title of Dash App

To run the app, copy the above code into a new file named app.py and type into your terminal the command python app.py.
Then, go to the http link.

Dash is running on <a href="http://127.0.0.1:8050/">http://127.0.0.1:8050/</a>

 * Serving Flask app 'app' (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: on
 * Running on <a href="http://127.0.0.1:8050">http://127.0.0.1:8050</a> (Press CTRL+C to quit)

Alternatively, you can run the app in a Jupyter Notebook cell.

The next section will cover the main elements of a Dash app. Dash in 20 minutes tutorial!

Write, deploy, and scale Dash apps on Dash Enterprise.

Learn More |
Pricing |
Dash Enterprise Demo |
Dash Enterprise Overview