Add a dynamic drop-down menu to your Dash application that filters data based on unique manufacturer names. Learn how to extract distinct values using Pandas and integrate them with Dash's core components for interactive data visualization.
Key Insights
- Use the .unique() method in Pandas to extract distinct manufacturer names from a dataset, ensuring drop-down options are not repeated.
- In Dash, insert the dcc.Dropdown component between the H1 header and the DCC graph to create a user-selectable menu.
- Noble Desktop demonstrates how to structure the drop-down options and set a default value, while also emphasizing proper syntax to avoid runtime errors in Dash apps.
Note: These materials offer prospective students a preview of how our classes are structured. Students enrolled in this course will receive access to the full set of materials, including video lectures, project-based assignments, and instructor feedback.
Let's take a look at what we could do to add a drop-down here. We're going to add a little drop-down menu right around here between our title and our graph and what it's going to do is, well nothing yet, but what it will ultimately do is allow us to filter by that manufacturer. If we want to add that here, what we're going to need to do is outline all the options that some could be in that drop-down menu and the options are our manufacturers.
Let's try exploring that. We're not going to have to do so much Pandas's work here, but let's see what we can do. If we want manufacturers, well we could look at cars at the column manufacturer, which should be a series, a column.
Let's print that out and I saved it and switched back to our terminal. What should print out? That's printing out all 157 of them and there's lots and lots of repeats, right? Four Acuras, at least five Volvos. What we want is, we don't want our drop-down to have four options, Acura, Acura, Acura, Acura.
We want it just be Acura and then followed by Audi and all the way down in the last option to just be a single Volvo. So what we need is to find out how we can get the value for each of these manufacturers individually. We want a list of the manufacturers.
I'll give you a moment to see if you can figure out how to do that. You might have to do some research. Pause the video, see if you can make that happen.
See if you can print out the individual manufacturers from our cars list. I'll give you a moment. Okay, I hope you figured it out and if not, I recommend doing research on things like this.
It'll really improve your skills in this field. All right, so what we're going to do is say.unique. Every column or series in Pandas has a unique method that gives you back only a list of the unique values. Let's see what prints out now.
Yep, that's our manufacturers. All right, so what we're going to do next is we're going to put these into, for actually very next thing, is get rid of our print. We really almost never want that.
Just a print statement sitting there. Okay, so to make a drop down, we're going to use a, we want to put it between our HTML H1 and our DCC.graph and it is another dash core component, DCC component, the capital D drop down. And we pass a couple of things into it.
We pass our options. We don't have those yet, but we could say manufacturers and we could also give it a starting value. Let's say Acura.
Okay, let's see what that looks like. It doesn't look like much of anything. That's because this is equated with the right format.
Syntax error, invalid syntax. That's just because I believe I forgot a comma here. We'll definitely encounter some other issues with this.
If you get an error, remember it's going to bounce you right out of running your dash app, so you'll need to run it again. All right. We have these right here.
And we can change them. Doesn't do anything yet, but it's something we can interact with, if not have it respond. So our next step will be to give it the ability to actually choose and filter this by that.
That'll be a multi-step process, but we're going to do it.