Skip to main content
Colin Jaffe/3 min read

Creating Interactive Drop-Down Menus for Data Filtering in Dash

Dropdown Filter Workflow

1

Add dcc.Dropdown

Pass options=[{'label': 'X', 'value': 'x'}, ...].

2

Define Callback

Input(dropdown.id, 'value') triggers when user picks.

3

Filter Data

Use selected value to filter your DataFrame.

4

Update Output

Return filtered chart or table from the callback.

Master Python at Noble Desktop

Noble Desktop's Python Programming Immersive covers AI APIs, data analysis, and modern Python development.

This lesson is a preview from our Data Science & AI Certificate Online (includes software) and Python Certification Online (includes software & exam). Enroll in a course for detailed lessons, live instructor support, and project-based training.

Add a Dash dropdown menu using the unique values from the 'manufacturer' column to enable future filtering of the graph. Watch this tutorial to learn the key concepts and techniques.

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.