A Simple Dashboard Video Lecture Transcript
This transcript was automatically generated by Zoom, so there may be discrepancies between the video and the text.

16:18:50 Hi, everybody! Welcome back in this video. We're gonna learn how we can use Plotley and dash to make a simple dashboard
16:19:00 So throughout this, we've seen how we can make interactive graphics with things like hovering as well as static graphics, using just our scatter line plots, etc.
16:19:14 So in per, in this next little notebook that we're gonna see is we're gonna learn how to make more interactive visuals using Potley.
16:19:22 And in particular, we're gonna think of it as a simple dashboard so dashboards are exploratory data analysis tools where you provide different visualizations for a data set that users can then interact with to change the visualization in some way to explore the data and get a better understanding of
16:19:41 It. So we're going to show you how to do that with a very simple dashboard.
16:19:47 One thing that you're gonna have to do first, though, is make sure that you have the dash package installed.
16:19:54 So in order to make a dashboard with Plotley, you're going to need the dash package.
16:19:58 This is probably not installed on your computer yet, but you can find the instructions on how to install this use.
16:20:07 A at this documentation link, and then in particular, once this is done loading, and you have a chance to check it out.
16:20:14 You're going to need to install both a dash and a Jupiter.
16:20:18 So in order to make your dashboards display within a Jupiter notebook environment, you're gonna need Jupiter dash.
16:20:27 So go ahead and follow these instructions. Pause the video install, Dash and Jupiter dash and then come back.
16:20:33 Okay. So once you think you have both of those installed to try running the following code, Chunk and you should see something like the following version, Jupiter Dash version.
16:20:44 So this notebook was written with version 2.8 and Jupiter dash version 0 point 4.2.
16:20:51 So, again, if your versions are slightly different, the code may not work for you.
16:20:56 If you find that the code that I've written that works for my versions doesn't work for your versions, go ahead and do a web.
16:21:03 Search for the era that you're getting, and then, as well as including your version that you're working with
16:21:08 So dash apps consist of 2 parts, the first of which is the layout, so the layout of your application just specifies how you want things to be displayed, and how you want them to look so layouts can can be controlled with HTML code and plot lee code so the
16:21:27 plotley code we've covered in these Jupiter notebooks the HTML.
16:21:29 Code we're going to cover in the next section of our Mini course.
16:21:32 So for now, if you don't know HTML code, or unfamiliar with it, don't worry.
16:21:37 You can always come back and rewatch this video if you're interested after you learn some of the HTML code.
16:21:44 So just for now, if you're unfamiliar with HTML code, just go with it and then come back after we cover the basics of HTML.
16:21:51 Code in the next section of the course. So we're gonna do a very silly dash app as our first example, we're just gonna make a simple plot with Plot Lee, and then put it inside of a dash app so this is just going to be a regular scatter.
16:22:07 Plot. So in order to make our dash app, we have to import a few things.
16:22:12 We first have to import dash, and then also Jupiter dash so these are going to contain the actual application.
16:22:21 So we need dash to make the class the python object that will contain our application, and then we need just Jupiter Dash in order to make it run within a Jupiter notebook.
16:22:34 We're gonna also need HTML, which is going to enable us to add, HTML code to specify our apps layout.
16:22:42 And then we also need to import Dcc, which stands for dash core components.
16:22:47 This is what's going to allow us to add various components from the dash line module into our apps layout.
16:22:55 So let's import those. So from little import. Capital. Dash HTML,
16:23:02 And No and Dcc, and then from Jupiter underscore dash, we're gonna import Jupiter with a capital J dash with a capital d
16:23:15 So here's an example that should look most of the code should be familiar to us.
16:23:20 So first, I'm just making some random data and then placing it in a data frame.
16:23:25 And then I make the plotly express figure plotting the wagons.
16:23:30 The X is a scatterplot. So this is the new part down at the bottom, the dash part.
16:23:35 So the first thing you need to do is specify your apps, create your app object.
16:23:41 So for us, we're gonna call Jupiter Dash, and then within Jupiter, dash you place underscore underscore.
16:23:49 Nam e underscore underscore. So this creates the the dash application for Jupiter.
16:23:58 Notebook. The next thing you do is specify the layout of your app.
16:24:01 So the first thing we're gonna call is HTML, dot div.
16:24:06 So this creates a div object from each. HTML again.
16:24:10 Don't worry about that. If you're unfamiliar, then we add a title to the apple application with HTML.
16:24:16 Dot capital h 2, and then then this is the part that we should pay attention to.
16:24:21 So here we're adding the graph to our dash application.
16:24:25 So you call Dcc dot graph. And then the part that adds the actual graph is figure equal to fig.
16:24:34 And then this part here is known as an id attribute for an HTML element.
16:24:41 So this will come up again later. But for all of your HTML elements, you can provide them with ids which will allow you to select them later, when we actually make the interactive application.
16:24:52 So after you've created your or set your apps layout, the next thing you can do or have to do is call runs server.
16:25:01 So you call app, which is the variable storing our application.
16:25:04 Run underscore server, then followed inside. You need to do mode in line, which means that we're going to display the app within the notebook.
16:25:14 And then you set a port number which should be in the 8,000.
16:25:19 So for us. It's our first plot so I put 8 0 1 0, and we'll talk about this more in the next notebook.
16:25:26 So the port or not. The next notebook later in this notebook this specifies, you know, where the channel that's gonna run.
16:25:34 The server to generate the application. So now you can see we've got our simple scatter plot, and it looks exactly like a dashley or a Dashle a plot plot.
16:25:46 That we've seen before, but it's now contained within a dash application, and we're gonna use that to our advantage in the next few code chunks to actually make interactive applications.
16:26:01 So what's the second part? I said. There are 2 parts to a dash application.
16:26:06 The first was the layout, the next are called callbacks, so these callbacks are the part of the dash application that allows you to add interactivity.
16:26:16 So callbacks are going to allow us to include little Widgets like drop-down menus.
16:26:23 Scrollers. I'm not sure if that's what they're called, or check boxes, selectors, things like that.
16:26:30 And so we're going to see 2 examples in particular, in this notebook.
16:26:33 We'll see a dropdown menu and something called a radio items, which is just a series of check boxes that you can click.
16:26:41 Or selector buttons that you can click. So you click on one and it will select that option.
16:26:47 And then all the other options are not selected. So think like a multiple choice answer on a test.
16:26:52 So how do we make a dropdown menu?
16:26:55 We're just gonna demonstrate this first. So to make a drop-down menu called Dcc Dropdown.
16:27:02 And then, after calling Dcc Dropdown, you input the list of all the options you'd like to be available on your dropdown.
16:27:11 So for us, you might recognize these as some variables from that auto Npg data set like a a ceiling which stands for acceleration.
16:27:21 Cl. Which is the number of cylinders, etc.
16:27:24 Then, after the initial list of all the options, you then specify the default.
16:27:30 Option for the button. So for us, we're going to start with weight, and we'll see why in a second.
16:27:36 And then, after that you provide an id and HTML id for your dropdown button and for me in this example I've specified it to be X dash variable.
16:27:47 So now you might be expecting, well, I thought I was gonna see a dropdown button.
16:27:52 We'll see that in the very next example, this is just showing you what it looks like as python code
16:27:58 Okay. So in order to add the widget and then make it interactive, we have to take in the HTML.
16:28:04 Id. If we have to add outputs and inputs.
16:28:08 So we'll talk a little bit more about outputs and inputs after we import them.
16:28:12 So why don't we do that first? So from dash, import, output, comma input or I guess as I'm typing it input, comma output.
16:28:22 And now let's look at the example. So first, remember, we create the app using Jupiter dash.
16:28:28 We set the layout, and now this layout has our dropdown button, which should look familiar from our code above.
16:28:35 And now I'm adding 2 things, so I'm adding a break which is just going to put some space between the drop-down button and whatever I place next, and then I'm adding a div with an id of my dash output so now we're gonna actively show you how to add the part
16:28:50 that allows it to make it interactive. So you use this syntax, the@symbolapp.call back parentheses.
16:29:02 Then within the call back you put in the output. So the output tells you.
16:29:08 Yeah, it. Allows you to specify what within your application is going to change.
16:29:14 When the user makes some sort of interaction with the widget.
16:29:18 So for us. That's the drop-down menu in this example.
16:29:22 So how does it select what it's going to change?
16:29:25 It calls the component id. So remember the component I need is going to be the HTML id of the thing you want to change.
16:29:34 And for me. It's this Div. That I set its id as my dash output, and then you have a component property.
16:29:42 That's the thing you want to change. And for us it's going to be something called children, which is more. HTML!
16:29:49 Talk so every time I make a change to my dropdown or my audio makes a change to the dropdown.
16:29:56 The output that gets changed is the Div. And the children of that div.
16:30:01 Now, we specify our input. So for us, well, what's the thing that takes the input from the user?
16:30:07 It's my dropdown button which has an id of x dash variable.
16:30:14 So component id. Equals x dash variable, and then what's the thing that's being changed that I would like to take that value well, it's the component property equals to value.
16:30:25 So, whatever the value of my dropdown button is, so.
16:30:29 The thing that selected going to be taken as input whenever a change is made.
16:30:35 So immediately following app, Dash, call back, you have to define a python function, and this python function should return.
16:30:44 What you would like to be added or changed about the the output that you are changing. So for us.
16:30:53 I just want to have it display the input value.
16:30:58 So the thing that was selected
16:31:01 Now@thebottomwejuststillrunapp.run server, with mode in line, but I want you to notice the difference here.
16:31:08 The port is now 8 0 to 0. So why is it a different number?
16:31:13 So this up here, this application, which is just a scatter plot, is still running on the server with the port 8 0 1 0.
16:31:23 And so currently, at the time of this writing, to my knowledge, there's not unclean way to stop this server from running within the Jupiter notebook.
16:31:34 And so the easiest thing to do is just to run a second server with a different port.
16:31:40 And so this is usually not good. I don't think this is good practice, but we're just learning how to run a dash dashboard or a dash app application.
16:31:49 So for us every time we make a new dash application, we're gonna have a separate server in practice.
16:31:55 You'll have a single server that runs all of your you know all of your applications or website, or whatever.
16:32:04 Okay. So now you can see, I've got this dropdown button.
16:32:08 Okay. And then currently, what's selected is, wait. So that's my output.
16:32:14 X variable selection is wait, but we can see now, as I make a change, maybe to Displ
16:32:22 Now that has changed as well. X. Variable selection is changed to reflect the new drop-down selection
16:32:29 So here it is with excel with so, and we can go back to ways
16:32:38 Another option for a widget is that we're gonna learn about is radio items.
16:32:43 So these are just like little selection. Buttons, like on a multiple choice test.
16:32:48 So it did. The definition works the same way as the drop-down.
16:32:52 But instead of the drop-down, you put radio items, and then you input a list of all the possible options followed by the default option, which I believe is optional.
16:33:02 So if we don't have to have a default option here, and then you give it an id.
16:33:07 Okay.
16:33:11 So. And actually let me make this change real quick. So I want this to match.
16:33:15 So change your Id for x axis type. Actually, what I want
16:33:24 Yes, so change the id to origin, dash selection.
16:33:30 Well, maybe what I'll do is I'll just change that on your version of the notebook.
16:33:33 You don't have to worry about it. I just like my code to be consistent so here's the radio items button that we're gonna add.
16:33:39 So the same exact thing when we make our layout for our app, instead of the dropdown, we put our radio items and then everything else is the same as the previous example, and then within our callback, all that changes is the input so in our input, now has the id origin dash selection.
16:33:55 So we can see that. And so now, when the radio items get selected.
16:34:00 So one of us selects something or audience, select something. There's the change made also notice again that my port is now a third separate, unique number, so we'll have 3 servers technically running in the background.
16:34:15 Okay. So now, as you go through and you select a different button, our output changes
16:34:23 Okay.
16:34:26 So we can use both of these to our advantage to make simple dashboards, using the auto Mpg data set.
16:34:34 So we're going to use a version of this data that is auto.
16:34:36 Npg. Clean and so here's what that looks like.
16:34:39 It's virtually the same. The only thing that changed is we now have a column called The Origin that tells us the continent in which the car was manufactured.
16:34:51 So possible values are North America, Europe, and Asia, and then you also now have an Mfr.
16:35:00 Which stands for manufacturer, which just is the company that has made the car.
16:35:05 So the 2 dashboards are gonna see? Are gonna be one where we select what goes on the horizontal axis and the other will be changing to have a subset of the data based upon the origin.
16:35:18 So this first one where we change the horizontal axis is going to take advantage of that drop-down.
16:35:23 But
16:35:26 So our layout here will have the dropdown button on top.
16:35:31 Followed by the graphs, and so the graph will be below our audience will be able to select what they want plotted on the horizontal axis above, and then, once they do, will update the graph.
16:35:43 So if we want them to be able to make a selection that updates the graph.
16:35:47 So what's the thing that we're changing upon our output?
16:35:51 What's our output? Well, we should select the graph which has the id of plot.
16:35:57 And what part of the graph are we changing? We're changing the figure property.
16:36:03 So if we remember, we go all the way back to our first example.
16:36:05 Graph, had a figure attribute property, so that's what we're changing here.
16:36:10 So, now on a upon. For this example, let's look at our function.
16:36:16 So the function for our callback takes in the selected X variable, and then it just goes ahead and makes the the plot.
16:36:26 Lee express plot. So it does. Px, scatter the data set.
16:36:30 And now the X variable, which is the input of our function, gets put in as an argument to the plot, Lee, and then on the vertical axis, we're plotting the miles per gallon.
16:36:41 Then what gets returned is the fig, which is a variable storing.
16:36:46 The Plotley express graph. Okay, so what happens? Why don't we go ahead and make this?
16:36:52 So here's the default when we have the weights, because the weight is the default.
16:36:56 Selection of the drop-down menu. But I can go in and let's say I'm interested.
16:37:01 Instead, an acceleration, and send. My plot changes to be miles per gallon against acceleration.
16:37:09 I could also do the number of cylinders
16:37:13 The displacement or the horsepower. Okay, so let's go back to the default, which was the wait.
16:37:22 Alright! So what's happening is every time your user, an audience member makes a change here the change gets selected as the input that input is then used as the input to the make plot function which produces this plotly plot, and then that gets returned as output into our output so in
16:37:47 The next one. We can use the radio items. Example to change this, to make a subset of the data that gets plotted.
16:37:57 So if we have it selected to be all, all of the automobiles get plotted if we set it to Asia. Only those that are produced in Asia get plotted Europe in North America likewise, so
16:38:11 Let's go ahead and do that now. So we create our app using Jupiter.
16:38:15 Dash we add the radio. Items that we saw from above.
16:38:19 Then on below that we have our graph. Now we call the call back.
16:38:24 So the output here is still the graph so component.
16:38:28 Id plot, component property. What's getting changed is the figure, then what we need to do is select.
16:38:35 What the audience is interacting with. So the origin selection.
16:38:39 And then what are we taking from that? It's value
16:38:44 So what are we gonna do now in our callback function, we first check.
16:38:49 If the origin is everything, and if it is, we set our data frame that we're going to use for our plotting to just be the entire data frame.
16:38:57 If they made a specific selection. Asia, North America, or Europe, we're going to go ahead and subset our data set to be that origin, and then we just plot it just like before.
16:39:10 And then we also. We'll make sure our X range.
16:39:15 I'm just fixing it to be a set range, so that no matter what our data set is, the X range and the Y range don't change.
16:39:23 Okay, so this is the default. All of our all of our automobiles are represented, but we can go ahead and see what about those automobiles that are only plot only produced in Asia.
16:39:36 The ones that were produced in Europe, the ones that were produced in North America.
16:39:41 And now we can go back to all. Okay. So now we've made 2 simple dashboards, one where we change the x-axis, and one where we change the subset of the data that was plotted.
16:39:56 So these are 2 very simple dashboards, but they're a good start for those of you that like to learn about how to make more complicated dashboards, using the dash package combined with plotting so I've provided a link to the dash package documentation.
16:40:11 Here which has a really nice series of tutorials.
16:40:14 If you'd like to get started and learning more about dash it may also help if you're really interested in using dash, maybe it will help to learn a little bit more.
16:40:21 About HTML, which we're going to do in our next section of the course, so it might be, will be worth your while to work until after we cover.
16:40:29 HTML, so you now have a really good start on making all sorts of figures and plots, using Plotley and starting to make your own dashboards using and Plotley in the next notebook we're going to give you some next steps if you're interested in continuing to learn