PLOTCON 2016: Chris Parmer, Dash: Shiny for Python

🎥 Dec 01, 2016 📺 Plotly ⏱ 28m

Update! Plotly has formally released Dash. Read the announcement letter: / introducing-dash or view the docs: https://plot.ly/dash. If you are a data scientist today, it's actually pretty tough to build a data visualization web-application. If you're not a full-stack developer, you're practically out of luck. But GUIs like sliders, dropdowns and text inputs are extremely helpful to the data scientist or engineer. If you're an R programmer, you're in luck with Shiny. If you're a MATLAB programmer, you can use GUIDE (but good luck sharing it!). The dash project introduces a framework for...

Watch on YouTube

About Chris Parmer

Chris Parmer, cofounder of Plotly, presented the open-source framework Dash at SciPy 2017 and PLOTCON 2016. He described Dash as a framework for building web-based user interfaces for technical computing using only Python, without requiring JavaScript, HTML, or CSS. Parmer stated that Dash is built on top of plotly.js and react.js, and that it allows data scientists to create interactive web applications with components such as sliders, dropdowns, and graphs, with the application state stored in the web browser rather than on the server. He noted that Dash is licensed under MIT and that Plotly funds its open-source work through enterprise add-ons and deployment servers. Parmer emphasized that Dash is designed to address the difficulty data scientists face in building data visualization web applications without full-stack development skills. He compared Dash to Shiny for R, stating that it enables users to write applications entirely in Python. Parmer also discussed how Plotly's engineers work on open-source software, including Dash and the JavaScript graphing library, and that the company offers enterprise platforms for deploying Dash apps with features like LDAP and Active Directory authentication.

Source: AI-verified profile updated from Chris Parmer's recent appearances. Browse all interviews →

Transcript (37 segments)

Chris Parmer0:15

Thank you everybody for coming out. I'm really excited to be here and talk about a project that I've been thinking about and working on for the last year, and going to be focusing more on in the next year. It's a way to build user interfaces in the web browser using just Python, so no JavaScript, no HTML, and no CSS. If you're familiar with Plotly or Bokeh or other libraries, Jupyter Widgets, we've already been doing a lot of work in this, but Dash is a way to make more fully featured applications in the web browser with just Python.

We've been working on controls and more interaction between those different controls. We're still not quite there yet. We saw a lot of really great talks about custom data visualization interfaces yesterday, and a lot of those inside those companies required a full team of front end and backend and data scientists engineers to execute. The type of applications that I'm talking about are things that look like this. This is National Instruments' LabVIEW controller. There's all these different controls in here. These types of interfaces run like physics experiments: we've got sliders and dropdowns and multiple graphs.

These allow you to make really nice widgets and applications, and these look something like this. Lots of different sliders, controls, checkboxes, but they exist just in the Mathematica notebook. They're not really portable unless you have a Mathematica license, and aesthetically they're really challenging to customize. An application like this wouldn't be something that you would publish on the New York Times website. If you've worked in MATLAB in the past, you can make these really cool interactive applications using this program called GUIDE. These applications look like this with different controls.

Aesthetically it's probably pretty hard to change that light gray background. This is another example of a MATLAB interface that I really want to be able to make in something like Python and not have to use anything else, and be able to share it really easily. And these can get pretty complicated: lots of different controls, lots of different graphs. Now if you're working in R, you're in luck, you have Shiny. This is an example of a Shiny application that is written with Plotly's R library, and we've got sliders and graphs.

Working with is R and the actual data and simulations that you're working with. Here's another example of a Plotly R Shiny application: different graphs can update the other graphs, you can do custom filtering, custom interactions between all the different elements in the app. And then if you're a JavaScript programmer, you're also in luck. There's a lot of really nice application frameworks out there like React.js that make building these types of applications really easy. And with Plotly.js, we've abstracted away a lot of the complexity.

Inside that language, aren't quite there yet. They're not at the place that Python or R are. Here's another example that I like a lot from The New York Times. This is also written in JavaScript: really cool interactive applications that you can build if you're a JavaScript expert. And these are really cool because they're in the web browser, so they're really portable, anybody can view them, anybody can interact with them. But you have to be an expert in the JavaScript ecosystem, and usually that's not a prerequisite to being a data scientist, let alone a biologist or a mechanical engineer.

So I think to give you a good taste of what I'm talking about, let me show you an example app that I put together. This is something that queries Yahoo Finance. I said, 'Finance, oh man, the internet.' I'm like the fifth person to say that. I really was hesitant that I wouldn't be up here saying that. What this app would do is as I would type in tickers here—nice, it's working now—as I type in tickers here, we're going to query Yahoo Finance to get data back and then we're going to graph the result.

We're making an API call to Yahoo Finance, getting the data back, and then we're updating this Plotly graph with that new data. And this is all inside the web browser. So there's a lot going on here, and I want to try to recreate this and hopefully we can all grok how Dash works. So Dash is a Python package, you just import it. You don't have to write any HTML, JavaScript, or CSS. You're working just in Python. We'll import Dash, initialize an application, and then we describe the layout of our app entirely in Python.

Dash comes with different components: images, but also higher level components, things like Plotly graphs, text inputs, sliders. So let's do a quick hello world example. We've got an app, and then we declaratively describe what we want our app to look like. So I'll just say my app.layout is equal to H1 'Hello Plotly.' Save this, and here's our basic app. So we've got about five lines here.

All of those components: we've got the header, there's a text input here, it looks like it's got a label called 'Stock Tickers,' so 'label' is equal to 'Stock Tickers.' It's got a value here which is set to 'Tesla.' And below this we've got a Plotly graph. If you're familiar with Plotly in our Python library, you also describe graphs completely declaratively: you set all the attributes up front. So Plotly graphs are described by a figure object.

So this is the layout of our application: we've got this header up here, we've got this text input, and then we've got this Plotly graph down here. So let's refresh. Okay, cool, so now we've created this basic layout: we've got this header, we've got this text input, and now we've got this graph. That's just half of the app. Half of the app is the layout of it, what it looks like, the series of components that make up this app. But then the other half of the app is how these components relate to each other.

I can type into this text input, but nothing happens to another component. So let's think about what we want to happen to make a graph that pulls some data from Yahoo Finance and then draws it as a line chart. It'd be some function like 'update_graph,' and as an input we want to take the stock ticker. Then we want to query Yahoo Finance to get some data back. Luckily pandas makes this really easy. I think it's this: pandas has this data reader which takes the stock ticker as input.

Above, we want our X data to be the date, so that's df.index. We want the Y data to be, say, the open price of that stock. And then we would return that figure. So intuitively, this is what we want to happen. We want to write a simple function that takes some inputs and then describes what we want the outputs to be. And to add this function to Dash, you use a decorator. This is basically what you're going to be doing. Now this is just a function out in the wild, it's not really tied to anything. To register this function as part of Dash, Dash comes with these decorators.

The first argument is the component that we want to update. In this case we want to update the Plotly graph, so I'll say the ID of the component that I want to update is 'my_graph'. So I want to update my graph, and I want my graph to update whenever a value of this input changes. So this function is going to get called whenever this input value changes. That could be just one control, or in more complicated examples there could be several inputs that update a single output component. So the ID of my text input is here, my_input.

Dash provides the value of the text input as a simple string. So to grab the actual text that's in that text input, I set 'stock_ticker' equal to this component's value. And that value is set up here. So now let's go over this again. We have this function that describes the data that we want to update and how we want to update our output component. And this decorator registers this callback function to my app, and it describes the relationship between these components.

This function will take the input value of the text, grab data from Yahoo Finance, and just return the new figure. That's all there is to it. And it's about 30 lines of Python. So now as I change this, I type in 'Coke' here, every time I input a letter inside this component, this function is getting called. So I type 'Coke' here, and this function is now getting called with that value 'Coke', which creates a new dataframe, puts the result into this figure that we've described, and now updates this component.

So hopefully we can all kind of grok this. But the main point is that we created this kind of cool dynamic app. It's pretty intuitive. We described the output, we described the layout of the app. Without these types of abstractions, you'd have to write some JavaScript, some React, write your own server, some basic CSS to make it look okay. If you weren't using Plotly.js, you'd be hacking away on D3. And the goal of Dash is to abstract all this away, to allow you to declaratively describe user interfaces through a combination of HTML components and higher level components like graphs and inputs and sliders, and then allow you to describe the relationship between these components extremely easily just by writing some simple Python functions.

This is happening every time I enter text into this text input, and it's pretty fast. So I think this wasn't really possible a few years ago because we didn't really have the web graphics to make it possible, and we didn't really have the abstractions in the front end to make writing these types of components like these text inputs and these graphs and other types of controls that we'd want. Those weren't really available to us a few years ago.

So we can expand this example to be a little bit more complicated and include things like dropdowns and tables. With Plotly and Plotly.js, we've got really rich maps that are available to us that we can immediately access in our application. As I select different values inside this dropdown, my graph can update with that new data. Again, this app itself is only like 40 lines of code.

We can use Dash to create just static pages, things like reports in HTML really easily, where we've got really nice text, really nice CSS, but just text and a simple graph published on the web. But you didn't have to worry about the server, the HTML, or the CSS. The graph will update with line plots that show the slice through this contour plot. So it's not just dropdowns and sliders and text inputs that can be controls. Graphs can also be controls, because the graphs that we're drawing in the web with Plotly.js are totally interactive, and we get all the events like clicking and hovering and selecting regions. And with Dash, we can add custom callbacks to those interactions and update other components in any way that we want.

This includes things like sliders, graphs updating other graphs. You can do your own types of brushing, all just with custom Python functions. Dash itself runs on top of Flask. This is really cool because it means that all of the rich plugins and functionality that we know and love from Flask are immediately available to us. We can make multi-page apps, add user authentication, and any other types of functionality that we'd want from a web server. Flask is written with a plugin architecture that makes it really easy to pull in different functionality from different plugins in the community. It's really lightweight.

The other thing that makes Dash possible is React. If you're not familiar with React, React.js is a JavaScript framework for building user interfaces. It makes it really easy to build these components that are completely standalone, that we can then distribute really easily. This includes things like date pickers and sliders. Dash components are built on top of React, and it's really easy to make your React component work inside the Dash ecosystem. The way that Dash components in JavaScript can be exported as Python components is all abstracted away for you. So you just have to write your React component with a few standard properties, and then we provide a way that you can export those properties as a Python package that you can then import. This ends up getting served by the Dash Flask server.

We're developing one that we think is really great, and you guys should come over and check it out if you haven't already. It includes all types of scientific graphs, 2D and 3D charts on top of D3.js as well as WebGL. It's super performant. Because in the end, I really want to make an app that looks like this, but a little bit prettier and on the web. And that's going to require really high performance visualizations that really haven't been available until the last couple of years.

One of my favorite authors on this topic is Bret Victor, where he thinks a lot about different user interfaces that we should be using to communicate our ideas more effectively. And I think the best for sharing our ideas and communicating our results is going to be in the web browser. But all the real work that we're doing is in programming languages like R or Python or Julia or MATLAB, which don't easily make very portable results. One of his examples that he shows in one of his essays is: how cool would it be if we could make these reports where we could slide the variables in our report and see the results update in real time?

To become widespread, Dash has to work in the front end, but it has to be used by people that are doing the underlying research in the backend with languages like Python, R, and MATLAB. And I hope that with Dash in combination with React, we can start making these new types of user interfaces and distributing them to people that are doing the real science and the real data science work. So Dash is in pre-release right now. There's a prototype that you can check out, and we're going to be doing a more formal release in the new year that you'll be able to check out at this repo. If you're interested in this, please come talk to us at the Plotly booth.

[Applause] Thank you very much. Questions?

Audience Member25:25

Yeah, just because it has a Python interface, when you deploy these Dash apps, you're probably going to be putting it behind some application server to scale. How does it scale?

Chris Parmer25:44

One of the cool things about Dash is that all of the state of the application is in the web browser, and so the server itself is completely stateless. That means that you can put multiple instances behind a load balancer and scale horizontally. It works just like any Flask application.

Audience Member26:10

Same thing? Yep, yeah, exactly.

Yeah, just a quick question. Do I have to build the entire app inside Dash, or can I integrate Dash with other Flask applications or Django?

Chris Parmer26:31

Dash itself is built off of a really standard set of APIs. When you load the page, we make an API call that returns a JSON representation of the components that we're trying to build, and the JavaScript itself that renders those components is also standalone. So that means that you can build your own backend interfaces to the Dash front end. It's designed to be composable and modular.

Audience Member27:21

Yeah, yeah, sure. So Plotly itself is a JavaScript library with a Python interface and a platform that allows you to make any of these interactive graphs. We have basic controls that you can also specify as part of the graphs, including dropdowns, sliders, play/pause buttons, and animations. We're going to be adding more controls to those graphs themselves. So to do that, you don't need Dash at all. You can just use Plotly through our web interface or through our Python library. But when you want to create apps that have data that's maybe unstructured, or you need more complex interactions between multiple components, that's where Dash comes in.

Chris Parmer28:10

For structured data, you're pretty well served already with our dropdowns and sliders in interactive graphs. Dash comes in when you need to deal with more complicated interactions.

Audience Member28:27

Yeah, so on the GitHub repo for Dash, there's a message saying that there's an impending rewrite coming. I'm just curious what the current status of that is.

Chris Parmer28:38

Yeah, so that's what I was showing off today, and that's going to be available in the new year.

Audience Member28:45

Well, I think that's it. Cool, thanks so much.

Chris Parmer28:47

[Applause]