Welcoming Dash 1.0.0

plotly
plotly
Jun 27, 2019 · 8 min read

It’s hard to believe that just two years ago, we released Dash. The last two years have been a whirlwind—we’ve made over 100 releases containing bug fixes and new features, we’ve introduced 10 brand new chart types, we’ve published 5 new first class component libraries, and I’ve personally spent over 130 hours helping folks out on the Dash community forum.

Image for post
Image for post
Dash’s active community forum with 19 active discussions over the last 24 hours. To everyone in the community, thank you. Thanks for keeping the community productive, friendly, and accessible. Thank your feedback and candor and patience. We couldn’t have gotten to 1.0.0 with you ❤️

Why 1.0.0?

With 1.0.0, we’re taking the opportunity to make this commitment official and to streamline the interface with a few breaking changes for the days ahead.

Image for post
Image for post

While 1.0.0 is significant symbolically, we haven’t changed anything at the core of Dash. We’re proud of this — Dash’s architectural foundations are solid. As we continually refined Dash over the past 2 years, talking and working with Dash users, we developed new features that outdated old ones, discovered which settings were awkward or confusing to new users, and overall accumulated a lot of ideas for how to improve the experience of building Dash apps. With 1.0.0, we’re resolving some of the friction that users experienced with Dash by streamlining Dash Core Components and changing some parameter names and configuration settings to be friendlier and more semantic. Essentially we’re taking all that we’ve learned from our community and making Dash more intuitive and powerful for years to come. For a full list of what’s changed, and what breaking changes you’ll need to reconcile in order to upgrade, see the Dash 1.0.0 Migration Guide.

Image for post
Image for post
An excerpt from Dash’s 1.0.0 migration guide.

Reflections

  1. UIs are assembled with declarative components, whose richness and state are completely described by their properties.
  2. UIs are updated with reactive, functional callbacks that provide a simple & unified interface for observing and updating any property of any component. Since callbacks are written in Python or R, they can do anything: query any database, make any API call, or run any model.

With 1.0.0, we’d like to take this opportunity to highlight the evolution of Dash from the perspective of these principles.

Two Years of Declarative Components

Over the last two years, we’ve created 6 new component libraries using the same open source plugin toolchain that is available to the community.

Dash DataTable is an editable spreadsheet component that we wrote from scratch in Typescript. It’s first-class Dash interface enables client side and server side filtering, sorting, paging, conditional formatting, editing and more. It has built-in types and cell renderers like dropdowns. Like all dash components, every property of the table is observable — write callbacks that respond to row selections, filtering operations, or cell edits.

Image for post
Image for post
A DataTable component populated by a Pandas DataFrame and connected to a Graph component.

Dash Bio is a suite of bioinformatics components. dash_bio provides a Dash interface to many JavaScript libraries like that were previously difficult to connect to from Python. Read more about Dash Bio in our announcement post or the documentation.

https://cdn-images-1.medium.com/max/1400/1*OkW6Yw4Fhfl7kiivP0ughQ.png
Displaying relationships between chromosomes with a dash_bio.Circos component.

Dash DAQ is a set of beautifully-styled technical components for data acquisition, monitoring, and engineering applications.

Image for post
Image for post
Dials, guages, indicators and more. Screenshot pulled from a statistical process control (SPC) Dash app that monitors real-time process quality along a manufacturing production line.

Dash Canvas is an interactive image editing & annotating component. It can be used as the UI for scikit-image models or combined with the dcc.Upload component for annotating user uploaded images.

Image for post
Annotating images and measuring distances with the dash_canvas component.

Dash Cytoscape is a network graph visualization component. It extends and renders Cytoscape.js.

Image for post
Image for post

Dash Design Kit is a no-CSS-required design and layout framework that’s available as part of Dash Enterprise. Like all other components, it was written as a separate module via the open source plugin toolchain, enabling independent development and release cycles. It includes a set of layout elements like Cards and Menus as well as a no-code-required theme editor that skins all of the elements on the page.

Image for post
Image for post
A live website traffic Dash app with the Dash Design Kit theme editor popped out.

Two Years of Callback Development

The Dash Dev Tools initiative brought the callback chain front and center to the Dash development experience. The callback DAG (directed acyclic graph) displays the relationships of inputs and outputs in your app. The green circles represent functions, the grey bounded boxes represent components, and their inner blue boxes are component properties. Since callbacks are such an important concept in Dash, we’ve provided this view by default when you are develop your app ❤️

Image for post
Image for post
A graphical representation of the inputs and outputs of a Dash application. This view is provided by default as part of our Dash Dev Tools initiative.

Last year’s multiple outputs effort was a simple addition to the fundamental API, enabling Dash developers to efficiently update many elements on the page within a single HTTP request. It was a powerful feature that fit in cleanly to our overall API.

# Update a single graph when the dropdown changes
@app.callback(Output('graph-1', 'figure'),
[Input('my-dropdown', 'value')])
def update_graph(dropdown_value):
new_figure = some_computation(dropdown_value)
return new figure
# or update several graphs when the dropdown changes
@app.callback([Output('graph-1', 'figure'),
Output('graph-2', 'figure'),
Output('graph-3', 'figure'),
Output('graph-4', 'figure')],
[Input('my-dropdown', 'value')])
def update_graph(dropdown_value):
new_data = some_expensive_computation(dropdown_value)
fig1, fig2, fig3, fig4 = create_graphs(new_data)
return [fig1, fig2, fig3, fig4]

Similarly, supporting clientside callbacks was another feature that fit in nicely to Dash’s reactive, callback oriented architecture. Clientside callbacks enable you to write callbacks in JavaScript in the client rather than Python, enabling a “escape hatch” for high performance applications.

Image for post
Image for post
A Dash application that mixes and matches serverside (Python) callbacks with clientside (JavaScript) callbacks. The dropdown filtering and radio button selections are performed in JavaScript while refreshing the data is performed in Python.

Dash’s loading states provided a generic and declarative way to display a loading UI on “output” components that were awaiting an update from a callback.

Image for post
Image for post
Built-in loading spinners and animations as part of the `dcc.Loading` component.

Looking Ahead

Dash’s underlying code is primarily in JavaScript and since day 1 we’ve taken great lengths to enable alternative Dash backends. Keep an eye out for a formal Dash for R announcement.

On the graphing side, Dash’s dcc.Graph component leverages our open source graphing library plotly.js. Over seven years, we’ve made 141 releases without introducing any breaking changes. We’re committed to maintaining this momentum and to our new grammar-of-graphics-inspired charting interface, plotly.express. This summer, look forward to new chart types like GeoJSON choropleths & treemaps, revamped documentation, and a continued effort to chip away at the long tail of community-requested chart customizations & attributes.

All of this development has been funded by our customers either directly or via our Dash Enterprise offering. Dash Enterprise is our recommended solution for enabling a Dash Practice at your organization. Dash Open Source provides the UI toolkit while Dash Enterprise provides a managed solution for the other layers of analytic application stack: application deployment & orchestration, authentication & authorization middleware, no-CSS-required theming & branding, point and click access controls, Python task scheduling, data caching, PDF generation and more. Many thanks to all of our customers that have supported us so far ❤️

Image for post
Image for post
Screenshot of a collection of Dash apps hosted on an instance of the Dash Enterprise platform.

More Resources & Further Reading

Keep it up everyone ❤️

Plotly

Plotly’s Dash puts AI & ML in the hands of business users

Thanks to Alex Johnson and Jane Price

plotly

Written by

plotly

The leading front-end for ML & data science models in Python, R, and Julia.

Plotly

Plotly

Plotly is a data visualization company that makes it easy to build, test, and deploy beautiful interactive web apps, charts and graphs—in any programming language.

plotly

Written by

plotly

The leading front-end for ML & data science models in Python, R, and Julia.

Plotly

Plotly

Plotly is a data visualization company that makes it easy to build, test, and deploy beautiful interactive web apps, charts and graphs—in any programming language.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store