 Can everybody hear me if I talk like this? Louder? OK, good. It's easier without the mic. OK, so thanks for having me. My name is Nicholas Christian. I'm VP of product at Plotly. And I'm here to talk to you about it's a bit of an ambitious talk. I only have 20 minutes, but I'm going to try and talk about two great open source libraries, Plotly Express and Dash. So Plotly Express is a library we've just launched. We launched it 10 days ago. I'm very excited about it. I'm the lead author for it. And it's a library for data visualization with a special focus on data exploration through rapid iteration. So you've got the website right there. Turns out Plotly.express is a valid domain, so we got it. And if you just want to play with it, it's a pip install Plotly Express. And the other open source library I'm going to talk to you about is called Dash. And Dash is a framework for creating analytical web applications in pure Python. So the tagline for Dash, and I'll show you why that is, is no JavaScript required. And again, you've got the website for Dash right there. And just a quick note, both of these libraries are MIT licensed. They're totally free for any purpose. Plotly has a couple of commercial products, but I won't talk about them tonight. So everything I'm showing you today, you can do yourself at home or on your laptop right now, if you like. So quick show of hands, though, before I get started. Who here uses Python mostly for data science, mostly for web development? And if you had to make a chart right now in Python, you would use Matplotlib, raw Matplotlib, Seaborn, Bokeh, Plotly. OK, a couple of Plotly's. And the web developers among you, you guys are using Django or Flask. OK, so it's not my intention necessarily to replace either of those libraries as part of your daily toolkit, but certainly I'm hoping to entice you a little bit in both of these. So most of my talk will just basically be some live demos, hopefully. So Plotly Express is most useful from a Jupyter notebook. And it's intended to be as easy and simple to use as possible. So I'm going to create a bit of a role-playing scenario here. Let's pretend that I'm a data scientist. It's 9 AM. I've gotten a new data set that I don't know much about. I'm going to fire up Plotly Express and see if I can make any sense of it. So Plotly Express is pretty easy. You just import it. And the data set I'm going to use is the TIPS data set. It's actually built into Plotly Express for demo purposes. And it's pretty simple. It's pretty small. It's 244 rows. Each row represents a restaurant bill. You've got some columns there. You've got some categorical columns, some numerical columns. So basically, the total bill, the tip, sex is the sex of the payer. Smoker is whether there were any smokers in the party. Day and time are obvious. And then the size is the size of the party. So here's the data set. It's kind of interesting. And I'm a sort of working data scientist. I'm going to explore, see what's going on with Plotly Express. So let's make a basic scatter plot, px.scatter. I'll give it my data. And let's take a look at total bill versus tips. So one line is pretty much what you expect. You know, it does what it says on the box. Scatter, x equals total bill, y equals tip. A couple of things to note. This is a fully interactive plot. So you have hovers. You can pan. You can zoom. And it's set up the axes for you, which is kind of nice. But let's see if we can dig into this data set a little bit. It's kind of hard to see what the distribution is here. Let's do some marginals here. So marginal x equals box. Marginal y equals violin. OK, so now I've got sort of a marginal plot here, a violin plot, a box plot with a notch, some outliers. Kind of interesting. Some of the other columns I've got here, sex. Let's take a look at that. So color equals x. All right, starting to split the data for me. So the basic principles of plotly express are just that you give it a data frame, and then whatever visual variable you care about, like the x position, the y position, or the color, you just tell it the name of the data frame, sorry, the name of the column. And it sort of handles the rest for you. It signs colors. It creates the legend. And everything's nice and interactive. Everything's cross-linked here, so I can pan. It pans. I double-click to reset. I click to hide a series. I click to show a series. Everything sort of works out as you'd expect. And I can keep going. Let's say I'm interested in seeing if there's any kind of trend in these here. So yeah, OK, women and men, when they pay, they tip at approximately the same rate. These trend lines are roughly the same slope. You can mouse over here. It shows you the trend line. It shows you the equation. It computes the r squared for you. The kind of basic stuff you'd expect from a data visualization library. But there's some other columns in this data set. So let's take a look. So instead of these marginals here, let's look at some other variables like whether or not there were any smokers. So now I've faceted my data. So whether your data is on one or more subplots from the point of view of plotly express, it's just like whether your data is blue or red. It's just another visual variable. And you shouldn't do a big song and dance declaring subplots and knowing how many you have and creating all the titles and stuff. Plotly express just kind of does that for you. And so here you can see non-smokers on the right, left on the left, smokers on the right. Slightly different slope on the trend lines there. R squared isn't very good. Probably not a very strong relationship. But maybe worth digging into. All right. But I see that there's some other columns here in the data set, like day. Let's take a look. Maybe I can facet again by day. A little bit messy. Maybe instead of coloring by, maybe I can not color or not add some trend lines here. Okay. Facet by, let's do day this way. Time this way. Interesting. So first of all, a couple things to note here. I've got my days kind of out of order. This is pretty common with data visualization libraries. It's kind of a pain. So plotly express has some built-in functionality for avoiding this problem. You can basically tell it day, look, this is the order I want. This is the order I wanted in. And then lunch and dinner. And you can see that actually interestingly enough, only one person in the data set had dinner on Thursday. Maybe we should close the restaurant on Thursday afternoons, it would save us all some money. So you can see that it's fairly easy to kind of very rapidly slice and dice your data just by one function call in plotly express. Now, we do more than just scatter plots. Let's take a look at, now that I'm looking at my data by day, I'm interested in how much money am I actually making? Well, let's take a look here. I can do a bar chart, x equals day, y equals total bill. All right, the order's out of whack again, so I should just probably just copy the same thing here. So you notice that the arguments to bar and scatter are basically the same, kind of nice. And every row in my data set here is a little rectangle, just like every row in my data set in the previous plot was a color. So, plotly express comes with a whole bunch of different plotting functions out of the box. You know, it's not a computation about who has the most chart types, but you've got bars, you've got scatters, it can do maps. I'll have a couple of examples of that sort of thing for you a little bit later. Line charts, some interesting multi-dimensional types like scatter matrix is actually really cool. You can basically see every variable plotted against every other variable. And when you do a selection, it kind of like does a cross-linked selection across them. And you can sort of pan and zoom. One function call, ladies and gentlemen, scatter matrix. So this is plotly express. I don't really have time to go into a full detail tutorial, but I just want to kind of give you a taste of the kind of data exploration you can do just with one library, a couple of simple function calls in a Jupyter notebook. So that's my morning as a data scientist. But in the afternoon, I need to communicate my results with other people in my company, this very thriving restaurant business with my 244 meals per week. I need to communicate these findings with the other waiters on staff. The problem is, they don't use Jupyter notebooks and they don't want to type Python code. I'm the only Python nerd in the group. So I would be stuck, except that there is plotly's dash library. So dash is a framework that allows you to very easily build web applications in pure Python. I don't know JavaScript, I'm just enough to know Python, that's about it. But I do want to share my cool charts with my colleagues. So how am I going to do it? Well, I'm going to build a dash app. And actually I'm going to live code a dash app for you. So this is a basic dash app. You just import the dash package and some HTML components. You create an app and then you give it what's called a layout. So here, if anybody here knows HTML, I said no JavaScript required, right? You got to know a little bit of HTML to get a dash app going. I basically got two headers, demo plotly express in dash and then H2 is just I'm a subheader. And then I run my server. So take a second to think about it. Open it up, break out the tab. Hopefully that's clear enough. So fairly simple, this is not really an app so far but I can lay out the frame of a web page and I can serve it. So it wouldn't be an app unless there was some interactivity. So I'll show you how you can set up some interactivity in pure Python. This is a zero dot pi, here's my first example. So here, things have gotten a little bit more complicated. I'm importing dash core components as DCC. There's some sort of interactive drop downs and that sort of thing. And some inputs and some outputs. My layout has changed a little bit. I've now got an input with IDX and my level two header here now is called xout. And I'm declaring a simple function which I'm decorating with app.callback. And I'm saying the children property of x.out depends on the value property of x. And the relationship is just x. So let's see what happens when I run this app. I save it, the app should reboot and it will reload. Okay, so now I've got my input field here and I can type. Okay, so what's happening under the hoodie here? Well, if I look at my network tab, every time I type, ooh, anytime now. Sorry. Anytime I type up here, you see some, this is a little tricky to see. Okay, so you see some poster requests happening. So basically the web browser is making a bunch of calls to my Python app which is essentially just returning x over and over and over. So I'm essentially able to build a reactive application that includes some dynamic components on the front end but without writing any JavaScript, which is kind of neat. Okay, so let's move a little bit beyond inputs and text here and get to some charts. So in the second example, I'm going to load up plotly express the tips data set again and I'll grab all the names of the columns. And instead of an input, whoops, I'm gonna use a dropdown and the options will basically be all of the different columns of my data frame. And then instead of an H2, I'm gonna have a graph and the figure is basically gonna be a scatter plot. So I'm gonna initialize it to an empty scatter plot just so it looks nice. And my callback is now basically saying that the figure property of my graph is going to just be the output of a plotly express call. Let's see what happens. All right, so here's my scatter plot. Here's my dropdown. I can now put tip total bill. As I move the dropdown, HTTP calls are happening to my app in the background and I can see the new chart being populated. Okay, this is not that interesting to see just the x-axis because actually the y-axis here is just kind of the order of the data. So let's get on to sort of the next level here where I wanna actually be able to control x, y color, facet call and facet row. Instead of one dropdown, here I'm gonna have a list of them. So a whole bunch of different dropdowns and then my callback is gonna have a bunch of different inputs. But it's still just basically gonna be the same. I'm just gonna map these things straight into plotly express. Help it along a little bit. So here I've got x total bill, y is gonna be tip, color is gonna be sex, facet call is gonna be smoker and facet row is gonna be day. All right, so now I've basically built a little web application that I can just host on my laptop, I can upload to Heroku, I can host like any other web application. This is all built on Flask by the way, so it's just a Flask application that I can host anywhere. And instead of giving my findings to my colleagues as a Jupyter notebook and having them code Python, I just send them a link to this application and they can kind of poke around with these dropdowns. This isn't all you can do with Dash, but it's kind of a neat example of how easy it is to hook up some front end input elements to some charts in 30 lines of Python plus a couple new lines. So that's kind of exciting. It's a little bit ugly though, so let's just style it a little bit. I just added a couple little style elements to show that it's not all times new Roman. So there you go, a slightly nicer version of this thing. Colored by Smoker, split by time, end day. And there you go. Fairly easy to share my findings, insightful as they might be with my colleagues using Dash. So that's kind of a lightning tour through Dash and Plotly Express. So drilling in a little bit in terms of what we can do, Plotly Express is basically a wrapper around Plotly.py, which is Plotly's sort of fairly mature, battle-tested data visualization library, but it kind of hides all the details for you. So some of the charts I made in just one line here, one function call, they take 10, 20, 30 lines of Python in our documentation to make. So Plotly Express allows you to be significantly more efficient about sort of thinking about the graph that you want and not sort of thinking about the data structures that you need to build in order to feed to Plotly to get the graph that you want. So you can stay kind of at the data analytic level of your thinking. Plotly Express supports all sorts of different chart types beyond the ones I was able to kind of live code for you here today. So 2D, 3D, polar charts, ternary charts, we've got maps of a few different kinds, built-in animations, faceting you've seen, trend lines and marginals, which is kind of exciting. And it inherits a whole bunch of cool features from its big brother Plotly.py. So you can export to any format, PNG, SVG, PDF, offline HTML. You can export it to the underlying JSON representation. You have a free and open source GUI editor, which you can use to edit all the different aspects of your figures. And we have built-in and user-defined themes. And so close your eyes if you're epileptic. All of these charts are just one line with Plotly.py. So some 3D polar lines, polar bars with a dark theme, slippy maps, lines on a map, animated core plus scatterplot, matrix, parallel coordinates, parallel sets, contours. All this and more is built into Plotly Express, and therefore it's accessible from dash basically just directly. And just like Plotly Express is more than just what I've shown you, dash is a bit more than what I've shown you. So I basically showed you one chart, five dropdowns. Here are a few more complicated examples. This is one that we've made, which I've actually already got loaded. So this is basically exploring support vector machines with a bunch of different parameters. And it shows you've got kind of a funky chart here that shows the output of a machine learning model on some random data. You can change the data set. You can change the sample size. You can play with the threshold of your machine learning model. Here you can see inputs that depend on each other. So radial basis function has no degree, but a polynomial does. So you can see that the inputs can kind of depend on each other. Everything refreshes fairly fast. This thing's up in the cloud. So even though it's making sort of big HTTP calls, every time you change one of the inputs to get the graph back, still very, very quick and very, very easy to build an app like this. So the source for this is up on GitHub. You have to scroll a little bit. I don't know why, but if you scroll here, you've got the link for this app. So this is one that we've made, but what we're most excited about it plotly is that people are actually using dash sort of out in the wild as any sort of successful open source project. And so what we've seen is that there's a couple of papers that have come out in nature recently, where sort of actual hardcore scientists are using dash to present their results to each other, which is hugely exciting for us. So this is an example of the website to support a paper entirely built in dash. So this isn't just a little app, right? This is the entire site is in dash. You've got sort of a tab navigation up here, a user guide. We were super impressed when this app came out. This person really just grabbed dash and sort of used it for all it was worth to present their results. I don't really know a whole lot about gene editing, but I know a sexy data app when I see one. So this person has gone sort of all in on dash and is using this to present their results, which is really exciting for us. And there's another paper that came out recently in nature talking about the cost of electricity in sub-Saharan Africa. And here they're using, again, a lot of features of both plotly.py. This is pre-plotly express and dash to build some fairly sophisticated models. These ones are a little less reactive because I think they actually need to execute some complicated code in the background so they have like an update button so it's a little bit less reactive, but just goes to show some of the sort of flexibility and power of dash as a sort of an application framework and of plotly.py as a visualization framework to back it. And so we're very excited to sort of give these two libraries away to the community to see what kind of apps people can build out of dash, to see what kind of charts people can build out of plotly express. And we worked very hard to make sure that they sort of clicked together very nicely so that one lets you use the other as smoothly as possible. I have time for a couple of questions. If people have any questions. To be honest, it really depends on the details of what you're doing. Certainly at some point you will run into latency issues. There are a couple of different ways to, sorry the question was for those who can't hear, at what point do you run into latency issues when you have large data sets? It depends a little bit on whether this is an app that's sort of hosted on the public internet or whether it's hosted inside your network. But it's definitely one of the engineering considerations you need to take into account when building a dash app. Overall though, I have personally been surprised at how not much of a problem it is. It sort of turns out to work out pretty well most of the time. And there are a couple of different ways that are coming out I think this week to move some of the processing to the client side by writing a little bit of JavaScript if you need to. So there's sort of the client side escape hatch for faster processing. But the general recommendation that we have is sort of build it the naive way. You might be surprised if it turns out to be a real problem. There are ways of optimizing things. How about adding your own, for example, if you show a couple of selectors that comes directly from Dash. But let's say I have my own selector and JavaScript and my CSS. Can I plug in into Dash directly? So that little piece of JavaScript, CSS on my side? Absolutely. The way that each of these is a component. So Dash Core Components is a component library. And we have a sort of fairly mechanical way of wrapping react components, connecting them into the Dash framework and making them available. So there are a number of third-party components that have been built. We have a couple of libraries. We have Dash Bio and Dash DAC, which are a couple of different widget toolkits that you can use for different applications. So if you have a particular chart type that you like or a particular calendar picker or a very complex control in JavaScript, in order to make it accessible to Dash, you have to first wrap it in React and then Dash. And that's, if you go to dash.plot.ly, there's a component builder's guide that kind of walks you through the details of that. The great thing is once you've done that, if you open source it, it's available to all Dash users in the community. And so we're always very excited when people contribute sort of new components to the Dash community and make them available to each other. Okay, well I'll be around during the break. If anybody has any questions that they don't feel comfortable shouting out, thank you for listening.