Python Data Visualization Transcripts
Chapter: Dash
Lecture: Interactive app
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Let's go through an example of adding some interactivity to one of our dash plots.
0:05
So I've created a new file called simple app 2 I'm going to load in our
0:11
data like we have before you will notice that I did add two additional imports that
0:15
we haven't shown. I am importing input and output and we'll show how we're going to use those in just a second.
0:22
So the first thing we wanna do is let's say I want to make a histogram and filter based on our fuel type summary.
0:30
So the first thing I'm gonna do is after we've loaded our data I'm going to get a list of all the unique fuel types and store that in a variable.
0:39
Then the next thing I need to do is create my app layout. And I want to just have a simple application with a graph and a drop down
0:50
with a multi select. So let me walk through what I've done here So I have my simple layout with our H1 and then the annual fuel cost plot.
1:01
And you'll notice here that I use my DCC Component graph and I don't put the actual graph there. I just sign it and I.
1:10
D. So what this is saying is I want to put the histogram there and I'll show you a second how I create that histogram.
1:16
The next thing I want to do below the graph. Is that a drop down and I'm gonna call this drop down the fuel ID.
1:22
And I want to specify options as all the fuel types are available. The values of the fuel types.
1:30
And what this allows you to do is if we want to use maybe a cleaner label for the values we can do that here.
1:36
In this case they're they're clean enough so I'm using them the same. The other thing I'm doing is having a multi equals true.
1:43
So that means you can select multiple options. So now the tricky part is this is my layout and what I want to happen
1:51
is when a dropdown has changed I want to update my graph. The function would look something like this.
1:58
So let's say we have a function where I want to update my output based on a fuel list. So then once I get that fuel list I want to filter
2:07
my data frame so that I only have those values that are in that fuel list And then I create my histogram based off of that filtered data frame
2:16
And then I returned the figure. So this is all relatively simple. But then the hard part is how do you make sure that once a change is
2:26
made in your dropdown that it gets processed here in this function and then gets displayed
2:32
here where we tell it to in the app layout and that's where the magic of callbacks come in dash makes it easy for us to define those just on top of
2:41
the function. So we use this decorator. So now I've put this new decorator here. So what this is saying is remember I have my app to find up here and
2:54
I add a callback and when you call a call back you need to say what the output is and what the input.
3:00
So the output is a histogram which corresponds to this ID. And it's a figure type and the input is the fuel ID. Which corresponds to this value here.
3:13
And the value it is input is a value and that can be a list or a single value. So then what happens is this call back?
3:21
Make sure that whenever any updates are made that this function gets re executed with the new inputs and places the outputs in the proper place.
3:33
So now we add our if name equals main and we have the full function. So let's walk through what this looks like when we execute it.