Dash - A New Framework for Building User Interfaces for Technical Computing | SciPy 2017 | Chris Par

for building web applications in pure Python so no JavaScript required. Thanks. So I'll start by just showing you what apps look like. Apps are web applications so you view them entirely in your web browser. This is a really simple application; it's written in maybe around a hundred lines of code. It shows in this dropdown all these different stock tickers, and as you select a stock ticker the application updates with a graph of that stock over time. And as I select a value in this scatterplot, some meta information about the molecule that I'm hovering over gets updated on the left. I'm showing an image and a link to more info about that molecule. There's this dropdown above the graph, and as I select different values my graph updates to highlight those points inside the scatterplot. Below, all the molecules selected in the dropdown are displayed. These radio buttons above the graph allow me to view this data in a couple different ways: as a 3D chart I can zoom and pan around, or as a 2D histogram. I wrote this entire application in around 300 lines of code, all Python, just a single file. This is another example of a Dash app formatted to look more like a dashboard. All these graphs are controlled by the set of inputs above: a slider that controls the number of years, dropdowns that select different filters. All these filters and inputs are composed together and used to update the underlying data analysis code that Dash is running. This example is written in around 400 lines of code, all Python. You can build all types of applications in Dash—not just traditional dashboards. This is an example of a Dash app formatted to look like a New York Times article in pure Python, seeing what it would take. This application is around 400 lines of code because there's a lot of text included. With some styling, since Dash apps are viewed in the web browser, you have the full power of CSS available to customize the look and feel. Every aesthetic element is customizable—colors, positioning, fonts. This is an example of a Dash app made for one of our clients, formatted to look like a report. It looks just like a PDF report except that you view it in a browser; tables update, and there's a Print PDF button that uses Chrome's PDF generator to create a high-quality PDF. So this is a pretty technical crowd, so I thought I'd do a little tutorial on how to build a Dash app. For the next 10-15 minutes we'll create this application, a few hundred lines of code with a graph on the left that's interactive, radio buttons to view data in linear or log format. There are two parts to Dash applications. The first part describes what the application looks like, called the layout. This simple app has a header, some markdown, and a graph component. Dash comes with two component libraries: Dash HTML Components for common HTML elements like divs, headers, images, paragraphs, tables, and Dash Core Components which are higher-level interactive controls like dropdowns and graphs. In this case I pull in a dataframe and use columns for X and Y, add text labels, and display a table. Every element is customizable via CSS. Instead of style being a string, it's a dictionary with key-value pairs. The second part of Dash applications describes interactivity—how input components update output components via callbacks. Callbacks are decorators that declaratively tell Dash how an input should update an output. The first argument is the output element, identified by ID. This decorator says: whenever the dropdown's value property changes, call the decorated function with the new selected value, and update the children of the div. You can make apps more data-driven by computing based on the selected value, like filtering a dataframe and computing mean GDP per capita. You can also have one input update a graph: a slider selects the year, the function filters the data and draws a scatterplot. With five inputs, the callback includes all of them; whenever any input changes, Dash collects all current values and passes them as positional arguments, then you filter and return a new figure. Dash is cool because the variables represent the current state of the application. For multiple outputs you just write multiple functions with different decorators. This example can be extended to update three graphs based on the same inputs, using three functions. Dash is made possible through core technologies: the underlying server is Flask, accessible to developers for adding extra routes. Dash is mostly a frontend project using React.js, which enables building web applications. The great thing about React is the huge community making modular components under liberal licenses. We've created a toolchain to convert existing React components into Dash-compatible components. For example, that slider component was converted with just an extra 10-15 lines of JavaScript. In the future, we'll have a rich set of community-maintained components. The toolchain for conversion is also open source. We've written an introduction tutorial on React at academy.plot.ly. This guide is a chapter in the user guide. Dash itself is open source under MIT, so you can use it on your laptop or deploy apps on your own infrastructure. We support that open source work by licensing enterprise add-ons and platforms that make it easier for companies to adopt. For Dash we've developed a deployment server that makes it easy to upload code and spin up servers with LDAP and Active Directory authentication. Our business model supports open source libraries like Plotly.js and its Python and Julia wrappers. Dash is on GitHub, please try it out; the user guide takes about half an hour. I'll be here all day to answer questions.

Yeah sure. I think what makes Dash unique is its reactive framework. React is core, allowing you to plug in not just Plotly graphs but also Bokeh charts or matplotlib graphs.

We don't natively support directed graphs or network graphs in Plotly.js, but there are many components in the JavaScript ecosystem for creating those. Our toolchain can convert existing React components into Dash-compatible ones.

Sure. Let's take a look at that slider component. We import an open-source slider widget and render it. What Dash adds are two functions that require your components to have setProps and props. Dash uses React's prop updates to send new values back to your application code. The other part is adding docstrings for the Python classes. Dash scrapes React's metadata, uses dynamic programming to generate Python classes based on property names, and passes comments into the docstrings.

That's a good question. There isn't anything native inside the application that addresses that. Some of the components themselves are keyboard-friendly, so that's one part. The rest is up to the user land for making the applications accessible.