Dash: A Beginner’s Guide
A short introduction to the features and benefits of the library’s framework for building web applications in pure Python.
As a data scientist, one of the most integral aspects of our job is to relay and display data to “non-data scientists”, in formats that provide visually actionable data. In my opinion, one of the coolest parts of our job is interacting with data, especially when there is visual interaction. At times where we might want to build an interactive application, one of the options available to us is a framework called Dash. Dash is an open source Python framework for building web applications, created and maintained by the people at Plotly. Dash’s web graphics are completely interactive because the framework is built on top of Ploty.js, a JavaScript library written and maintained by Ploty. This means that after importing the Dash framework into a Python file you can build a web application writing strictly in Python with no other languages necessary.
If you’re new to coding, you might be saying to yourself, “A framework sounds like a library…what’s the difference?” I’m glad you asked!
“Inversion of Control is a key part of what makes a framework different to a library. A library is essentially a set of functions that you can call, these days usually organized into classes. Each call does some work and returns control to the client. A framework embodies some abstract design, with more behavior built in. In order to use it you need to insert your behavior into various places in the framework either by subclassing or by plugging in your own classes. The framework’s code then calls your code at these points.”
- Martin Fowler -
The key difference between a library and a framework is that “control” is inverted. When you call a method from a library, you are in control. However, with a framework the control is inverted; the framework calls you. One easy way to think of this concept is the Hollywood Principle - “Don’t call us, we’ll call you.”
“Dash app code is declarative and reactive, which makes it easy to build complex apps that contain many interactive elements.”
Let’s break that down into simpler terms. Declarative programming is a technique of building computer programs in which the programmer merely declares properties of the desired result although not how to compute it. This style basically tells you what the program should accomplish but not the specific sequence of steps to follow. The “how” is left up to the program’s interpreter. I’ll make an analogy based on the assumption that you have friends whom possess baking skills. Declarative Programming is like asking your friend to make you a cake. You don’t care how they make it; the process is up to them. One example of a declarative language is SQL, a database query language.
Let’s see some Dash in action:
You can find installation instructions here: https://dash.plot.ly/installation. Since you’ll be working in Python, you will just have to learn some syntax with regards to writing Dash apps. A loosely defined format would go something like this: 1) Import your necessary frameworks and libraries. 2) Provide the layout, including inputs and outputs. 3) Provide how your application is going to interact with the user.
The first two examples are fairly simple applications, written in 43 and 59 lines of code, respectively.
Every stylish component of the application can be tailor-made with complete control over the interactivity.
As we see in the prototype Goldman Sachs report, Dash report applications have the ability to be extremely customized, stylish, and intuitive. Applications can be explorations of human and mice brains in 3-D or an object-detector that provides useful visualizations about what’s happening inside a complex video in real time (example below). The myriad of possibilities is quite amazing.
What does the code look like?
Here is a cool example of a Dash application that only took 56 lines:
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Outputexternal_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']app = dash.Dash(__name__, external_stylesheets=external_stylesheets)all_options = {
'America': ['New York City', 'San Francisco', 'Cincinnati'],
'Canada': [u'Montréal', 'Toronto', 'Ottawa']
}
app.layout = html.Div([
dcc.RadioItems(
id='countries-dropdown',
options=[{'label': k, 'value': k} for k in all_options.keys()],
value='America'
),html.Hr(),dcc.RadioItems(id='cities-dropdown'),html.Hr(),html.Div(id='display-selected-values')
])@app.callback(
dash.dependencies.Output('cities-dropdown', 'options'),
[dash.dependencies.Input('countries-dropdown', 'value')])
def set_cities_options(selected_country):
return [{'label': i, 'value': i} for i in all_options[selected_country]]@app.callback(
dash.dependencies.Output('cities-dropdown', 'value'),
[dash.dependencies.Input('cities-dropdown', 'options')])
def set_cities_value(available_options):
return available_options[0]['value']@app.callback(
dash.dependencies.Output('display-selected-values', 'children'),
[dash.dependencies.Input('countries-dropdown', 'value'),
dash.dependencies.Input('cities-dropdown', 'value')])
def set_display_children(selected_country, selected_city):
return u'{} is a city in {}'.format(
selected_city, selected_country,
)if __name__ == '__main__':
app.run_server(debug=True)
I thought this was a cool example because the code snippet included several decorators (which I recently learned about in class) and chained outputs and inputs together such that the output of one callback function was the input of another callback function.
So, to summarize…
Dash is a great tool for data scientists to use because it allows you to build the frontend to your analytical Python backend without having to use a separate team of engineers/developers. Because Dash application code is both declarative and reactive, the process of creating rich, easily-sharable, web-based applications that contain many interactive elements is now much easier. I am genuinely exited to start using Dash in my future projects.
-Application example images from https://dash.plot.ly/-
