Introducing Dash

Create Reactive Web Apps in pure Python

is a Open Source Python library for creating reactive, Web-based applications. Dash started as a public proof-of-concept on GitHub 2 years ago. We kept this prototype online, but subsequent work on Dash occurred behind closed doors. We used feedback from private trials at banks, labs, and data science teams to guide the product forward. Today, we’re excited to announce the first public release of Dash that is both enterprise-ready and a first-class member of Plotly’s open-source tools. Dash can be downloaded today from Python’s package manager with pip install dash — it’s entirely open-source and MIT licensed. You’ll find a and the .

Dash is a user interface library for creating analytical web applications. Those who use Python for data analysis, data exploration, visualization, modelling, instrument control, and reporting will find immediate use for Dash.

Dash makes it dead-simple to build a GUI around your data analysis code. Here’s a 43-line example of a Dash App that ties a Dropdown to a D3.js Plotly Graph. As the user selects a value in the Dropdown, the application code dynamically exports data from Google Finance into a Pandas DataFrame. This app was written in just 43 lines of code (). Simple.Hello World Dash app. For more examples, check out the .

While Dash apps are viewed in the web browser, you don’t have to write any Javascript or HTML. Dash provides a Python interface to a rich set of interactive web-based components.

import dash_core_components as dccdcc.Slider(value=4, min=-10, max=20, step=0.5,
           labels={-5: '-5 Degrees', 0: '0', 10: '10 Degrees'})

An example of a simple Dash Slider component

Dash provides a simple reactive decorator for binding your custom data analysis code to your Dash user interface.

@dash_app.callback(Output('graph-id', 'figure'),
                   [Input('slider-id', 'value')])
def your_data_analysis_function(new_slider_value):
    new_figure = your_compute_figure_function(new_slider_value)
    return new_figure

When an input element changes (e.g. when you select an item in the dropdown or drag a slider), Dash’s decorator provides your Python code with the new value of the input.

This Dash application displays meta information about drugs as you hover over points in the Graph component. The application code also appends rows to the Table component when elements are added to the multi Dropdown component. A Dash App for drug discovery. Hovering over points displays a description of the drug. Selecting drugs in the dropdown highlights their position in the chart and appends their symbol in the table below. Built in a few hundred lines of Python code.

Through these two abstractions — Python components and reactive functional decorators — Dash abstracts away all of the technologies and protocols that are required to build an interactive web-based application. Dash is simple enough that you can bind a user interface around your Python code in an afternoon.

Architecture

Flask and React

Dash leverages the power of Flask and React, putting them to work for Python data scientists who may not be expert Web programmers.

From React.js to Python Dash Components

Here’s an example of the dynamically generated argument validation:

>>> import dash_core_components as dcc
>>> dcc.Dropdown(valu=3)
Exception: Unexpected keyword argument `valu`
Allowed arguments: id, className, disabled, multi, options, placeholder, value

and an example of the dynamically generated component docstrings:

>>> help(dcc.Dropdown)
class Dropdown(dash.development.base_component.Component)
 |  A Dropdown component.
 |  Dropdown is an interactive dropdown element for selecting one or more
 |  items.
 |  The values and labels of the dropdown items are specified in the `options`
 |  property and the selected item(s) are specified with the `value` property.
 |
 |  Use a dropdown when you have many options (more than 5) or when you are
 |  constrained for space. Otherwise, you can use RadioItems or a Checklist,
 |  which have the benefit of showing the users all of the items at once.
 |
 |  Keyword arguments:
 |  - id (string; optional)
 |  - className (string; optional)
 |  - disabled (boolean; optional): If true, the option is disabled
 |  - multi (boolean; optional): If true, the user can select multiple values
 |  - options (list; optional)
 |  - placeholder (string; optional): The grey, default text shown when no option is selected
 |  - value (string | list; optional): The value of the input. If `multi` is false (the default)
 |  then value is just a string that corresponds to the values
 |  provided in the `options` property. If `multi` is true, then
 |  multiple values can be selected at once, and `value` is an
 |  array of items with values corresponding to those in the
 |  `options` prop.
 |
 |  Available events: 'change

The full set of HTML tags, like <div/>, <img/>, <table/> are also rendered dynamically with React and their Python classes are available through the dash_html_component library. A core set of interactive components like Dropdown, Graph, Slider will be maintained by the Dash core team through the dash_core_components library. Both of these libraries use the standard open-source React-to-Dash toolchain that you could use if you were to write your own component library.

Concurrency — Multi-User Applications

The state of a Dash application is stored in the front-end (i.e. the web browser). This allows Dash apps to be used in a multitenant setting: Multiple users can have independent sessions while interacting with a Dash app at the same time. Dash application code is functional: Your application code can read values from the global Python state but it can’t modify them. This functional approach is easy to reason about and easy to test: It’s just inputs and outputs with no side-effects or state.

CSS and Default Styles

Data Visualization

Open Source Repositories

You can check out the code yourself across a few repositories:

Prior Art

Dash is new in the Python ecosystem but the concepts and motivation behind Dash have existed for decades in a variety of different languages and applications.

If you’re coming from Excel, then your head is in the right place. Both Dash and Excel use a “reactive” programming model. In Excel, output cells update automatically when input cells change. Any cell can be an output, an input, or both. Input cells aren’t aware of which output cells depend on them, making it easy to add new output cells or chain together a series of cells. Here’s an example Excel “application”:

There’s an Excel analogy for Dash. Instead of cells, we have rich web based components like sliders, inputs, dropdowns, and graphs. Instead of writing Excel or VBA script, we’re writing Python code. Here is that same spreadsheet application, rewritten in Dash:

app.layout = html.Div([
    html.Label('Hours per Day'),
    dcc.Slider(id='hours', value=5, min=0, max=24, step=1),html.Label('Rate'),
    dcc.Input(id='rate', value=2, type='number'),html.Label('Amount per Day'),
    html.Div(id='amount'),html.Label('Amount per Week'),
    html.Div(id='amount-per-week')
])@app.callback(Output('amount', 'children'),
              [Input('hours', 'value'), Input('rate', 'value')])
def compute_amount(hours, rate):
    return float(hours) * float(rate)@app.callback(Output('amount-per-week', 'children'),
              [Input('amount', 'children')])
def compute_amount(amount):
    return float(amount) * 7

I like this example a lot because Excel still reigns supreme, even in technical computing and quantitative finance. I don’t think that Excel’s dominance is just a matter of technical ability. After all, there are legions of spreadsheet programmers who have learned the nuances of Excel, VBA, and even SQL.

It’s more that Excel spreadsheets are frequently easier to share than Python programs, and Excel cells are easier to edit than command line arguments.

I hope that Dash makes it easier for developers to use Python for their data projects. By sharing the same functional and reactive principles, it’s almost as easy to write a Dash app as it is to write an analytical spreadsheet. It’s certainly more powerful and presentable.

If you program in MATLAB then you may be familiar with MATLAB’s user interface library “GUIDE”. Mathworks was one of the true original innovators in technical computing — GUIDE was written in 2004, 13 years ago!

If your data is structured in a database, then you may be using Tableau or one of the other BI tools. Tableau is incredible. They’ve set a new expectation in the industry that end-users should have the autonomy and the tools to be able to explore their organization’s data. They’ve also helped popularize the concepts of “drilling down” and cross-filtering.

Dash is complementary to BI tools like these. These tools work great for structured data. But when it comes to data transformation and analytics, it’s hard to beat the breadth and flexibility of programming languages and communities like Python. Dash abstracts away a lot of the complexities in building user interfaces, enabling you to build a beautiful front-end for your your custom data analytics backend.

Finally, I’d like to give a shout out to Jupyter widgets. Jupyter provide a really nice widget framework inside their notebook interface. You can add sliders to your graphs in the Jupyter notebooks that you run locally.

Licensing and the Open Source Business Model

We’re applying a similar model to Dash. Dash is MIT licensed. It’s free to use and to modify. For companies, we’re offering Dash Enterprise, a deployment server for easily publishing and provisioning Dash Apps behind your firewall.

Our goal with Dash Enterprise is to make sharing a Dash app internally as easy and secure as possible. No dev-ops required. Dash Enterprise handles the URL routing, the monitoring, the failure handling, the deployment, the versioning, and the package management. Dash Apps deployed with Dash Enterprise can be provisioned through your company’s Active Directory or LDAP user accounts.

Open source is still a new idea for product companies, yet at the end of the day, we’re able to dedicate more than half of our staff towards open source products. Huge thanks to everyone who has supported us so far ❤️

Thanks for checking out Dash. I’ll be giving a talk about Dash at SciPy this summer in Austin and in next fall at Plotcon NYC. If you’ll be at either of those events, please say hi! Otherwise, I’ll see you on GitHub ✌️🏼

Further Resources and Footnotes

PreviousDash NextFinance

Last updated 4 years ago

Was this helpful?