📣 Reactive Python Bindings for React.js - Plotly Dash


(Chris Parmer) #1

Hi React Community :heart:

I just wanted to share a project that I’ve been working on for the last year or so: Plotly Dash.

Dash is a way to build reactive web apps in Python. It’s geared towards the scientific and technical computing communities that are using Python for data processing, reporting, modeling, running simulations but less well-versed in web technologies or user interface design.

Dash renders web-applications using React.js. The Python interface to React.js components is declarative as Dash components are dynamically generated from the React.js’s component’s propTypes (using react-docgen :bowing_man:):

import dash_html_components as html
import dash_core_components as dcc

layout = html.Div(
    style={'backgroundColor': 'rgb(30, 30, 30')},
    children=[
        dcc.Slider(min=0, max=10, value=5),
        dcc.Graph(figure={
             'data': [{'x': [1, 2, 3], 'y': [4, 3, 1], 'type': 'bar'}],
             'layout': {'title': 'My Bar Graph'}
        })
    ]
)

These python components are serialized as JSON, served to the client, and rendered with React.js. This JSON serialization step supports a wide variety of Python data structures that are used in technical computing and data processing, like Pandas DataFrame and Numpy array. This allows users of Dash to encode their data directly into the user interface code without really thinking about it. (For example, check out the Dash DataTable where a Pandas DataFrame is supplied as the input argument to the DataTable component)

Dash also provides a reactive Python interface to connect “inputs” with “outputs”. Inputs are properties of components that might change through user interaction. For example, the value property of a dcc.Dropdown changes as the user selects different values. Outputs can be any property of any component in the interface: the children property of a html.Div or the figure property of a dcc.Graph. The “store” of the app is just the component tree itself.

Here’s an example of this interface that connects 2 dropdowns with the figure property of a dcc.Graph element:

app = dash.Dash()
app.layout = html.Div([
    dcc.Dropdown(
        id='my-dropdown-1',
        options=[
            {'label': 'NYC', 'value': 'NYC'},
            {'label': 'MTL', 'value': 'MTL'}
        ],
        value='MTL'
    ),
    dcc.Dropdown(
        id='my-dropdown-2',
        options=[
            {'label': 'Summer', 'value': 'Summer'},
            {'label': 'Winter', 'value': 'Winter'}
        ],
        value='Winter'
    ),
    dcc.Graph(id='my-graph', figure={})
])

# Python decorator
@app.callback(Output('my-graph', 'figure'),
              [Input('my-dropdown-1', 'value'), Input('my-dropdown-2', 'value')])
def update_graph(selected_city, selected_season):
    computed_figure = some_computation_based_off_city_and_season(
        selected_city, selected_season)
    return computed_figure

In this example, whenever either dropdown changes value, the user’s function (update_graph) is called with the latest values of each dropdown. The user’s function can compute some calculation with these values and then returns a figure that describes what the dcc.Graph should look like based off of that calculation. Dash updates the user’s UI with this new figure.


With these two patterns – (1) declarative components and (2) reactive callbacks that update these components – Python users are able to pretty complex interactive applications (without writing any Javascript themselves!).

Here are some screenshots of apps (more in the community gallery: https://plot.ly/dash/gallery).

Oil and Gas Interactive App


On behalf of the Dash community, we’re really grateful for the React.js project and greater community. Dash is enabling many scientists and engineers to share and explore their own python models through rich, easily-sharable, web-based applications. Thank you, React.js!

If you’d like to learn more about Dash:

Cheers! :beers: