Python Data Visualization Transcripts
Chapter: Dash
Lecture: Full app part 1
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Now we'll go through the code for the full app and there. I'm gonna preface this and say there's a lot of code.
0:07
I'm gonna go through it very quickly and I encourage you to run it on your own system and play around with it so you understand what we're doing.
0:16
So I have my stub file here. The only new thing I've added from previous files is a styles dictionary that I'm going
0:24
to apply a little bit later in the code to help present the final output. So after reading in the data,
0:31
one of the things I need to do is capture the input parameters. So we need to know the minimum year in the maximum year as well as the
0:40
full range of years to fill in our slider. We also need to know all of our transmission types.
0:46
So I'm using a combination of min max and unique to get those values either as a list or an individual value.
0:55
The next thing I want to do is to find our data table columns. So we have multiple columns that we could display.
1:01
I'm gonna sort it down to a smaller number of columns so that it's a little bit easier to understand. So we will use that list a little bit later.
1:10
Then the other variable that we need to keep track of is a total clicks and I'll walk through why we need that in a moment.
1:19
But basically it's to keep track of how many times we've clicked on a button and make sure we can reset our data properly.
1:26
So now that we've defined those variables, we need to create our app layout. And I'm gonna put this in here and walk through it.
1:35
So we've created our app layout, we have a heading of fuel cost analysis. We're gonna put some text in here to show us an example.
1:43
We'll display our graph here with the ID Histogram with slider. You'll notice that I passed some config here.
1:53
So in this specific example it says displayed mode bar false. This just shows how you can turn off that plotly bar at the top the
2:01
second graph. I want to show us a scatter plot and then I want to add my slider that says year range for the range slider. We need to have an ID.
2:11
A min and a max and then the values and then I wanna actually show each individual year. So I need to define the marks,
2:21
I need each of those values to be a string versus a manager. So then I have a little dictionary comprehension that will create that.
2:32
Then we want to show our transmission type in this case it's the checklist for the labels and values for each of the transmissions.
2:41
And then I display the or I modify the style to show it in line block so that it's horizontally displayed the next piece shows a horizontal bar.
2:53
Then I add a button that says to reset selections and that's where I set the
2:59
number of clicks equal to zero and I'll keep track of that each time you click it, then I add another header to show how many items are selected.
3:08
And then we talked about that data table, so I'm adding a dash data table and it starts out empty, but then I will fill it in a moment.
3:18
You can see here that the data table, columns that I defined earlier are now used to define which columns I want to show
3:24
in this data table. And finally I'll put a little margin at the bottom so that it is easier to view.