Charming

>>>>
Data
What is Dash? Dash Overview How Does a Dash App Look Like?
Dash is one of the easiest Python frameworks to create • Layout describes how your app looks. It consists of a
beautiful dashboard applications. It is used in machine number of Dash components such as graphs, sliders,
learning, data science, data modeling, and other data charts, and other inputs and outputs to visualize data.
visualization applications. Setting up your first interactive • Callbacks define how the layout is connected and,
dashboard app takes only a few minutes. thus, made interactive. For example, if a user changes
an input such as a slider, your dashboard may be
What Are the Best Dash resources? supposed to update a Dash component such as a
• Plotly Dash official site: https://dash.plotly.com graph. Callbacks make dashboards interactive.
• Dash Gallery with many example dashboard apps: • To develop a dashboard app with Python Dash, you
https://plot.ly/dash/gallery simply define the layout—how does it look?—and the
• Dash YouTube Channel CharmingData: callbacks—how does it behave?
https://www.youtube.com/c/CharmingData • Users can then view your dashboard app in their
• Dash Python Book: https://blog.finxter.com/dash-book browsers by typing in the URL on which you made it
available.

Get Started with Your First App

1 Install Dash import dash
File: app.py
Type the following command in your terminal/shell: import dash_core_components as dcc
pip install dash → Windows, macOS import dash_html_components as html
sudo pip install dash → Linux, Ubuntu 2 import plotly.graph_objects as go

Create minimal project es = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

2
Copy&paste the code into a new file called “app.py” in a folder - app = dash.Dash(__name__, external_stylesheets=es)
with path /path/to/dash_app/app.py
xs = list(range(30))
3 Run Dash app ys = [10000 * 1.07**i for i in xs]
Open a terminal in the /path/to/dash_app/ and run python app.py
fig = go.Figure(data=go.Scatter(x=xs, y=ys))
3 fig.update_layout(xaxis_title='Years', yaxis_title='$')

app.layout = html.Div(children=[
html.H1(children='Assets'),
dcc.Graph(figure=fig)])

if __name__ == '__main__':
app.run_server(debug=True)
4 Open Dash app in browser
Copy or click on the IP address 127.0.0.1:8050 and open it in your
browser.
4

Dash Components Dash Callback

The Dash Components build the user interface in your dashboard Dash Callback generates user-interactivity of your dashboard app.
app. Describes the layout as a series of layout elements Connects the Dash Components to the Graphs. Defines functionality
(components). Everything you can see and interact with in your and how the → Dash Components interplay.
app—except the concrete functionality that is implemented in
the → Dash Callback.

There are two types of components: • A callback is a function that is called automatically if a defined event happens.
import dash_core_components as dcc • A Dash Callback is a Python function that’s automatically called whenever an input
import dash_html_components as html component's property changes.
• You can chain callbacks. For example, if one update in the user interface triggers a
The Python Dash app defines one root component that contains all other components as a callback, this triggers another callback and so on. The purpose of doing this is to
hierarchical tree of components. This is called the app.layout. You can put all types of trigger several updates in the app.
components into it: • Examples callback trigger: click, select points on chart, zoom into chart, input text,
choose radio button, slider input, hover.
• The dash_html_components library provides the HTML tags. You instantiate them
like normal Python classes using the constructor. You can pass all HTML attributes as import dash File: app.py
keyword arguments such as style, className, and id. ...
html.Div() from dash.dependencies import Input, Output
html.A() ...
html.Button()
html.H3(), html.H2(), html.H1() app.layout = html.Div([
html.Img() html.H1('Assets', id='my-title'),
dcc.Input(id='my-name',
→ More: https://dash.plotly.com/dash-html-components value='Guido', type='text'),
dcc.Graph(figure=fig)
• The dash_core_components library provides ])
more advanced components such as graphs that are
not generally part of the standard HTML elements. Callback updates title @app.callback(
dcc.Graph() with textarea contents Output(component_id='my-title‘,
dcc.Input() component_property='children'),
dcc.Dropdown() [Input(component_id='my-name‘,
dcc.Slider() component_property='value')]
dcc.Textarea() )
dcc.Checklist() def update_output_div(input_value):
dcc.RadioItems() return 'Assets from {}'.format(input_value)
dcc.DatePickerSingle() ...

→ More: https://dash.plotly.com/dash-core-components
Subscribe to the 11x FREE Python Cheat Sheet Course:
https://blog.finxter.com/python-cheat-sheets/