Enhance your interactive dashboard by integrating a functional slider that dynamically filters data based on user input. This article demonstrates how to use Python callbacks to update your graphs in response to changes in both dropdown selections and slider values.
Key Insights
- Implementing interactivity requires combining multiple inputs—such as a manufacturer dropdown and an engine size slider—into a single Dash callback that updates a graph based on user selections.
- Python’s tuple unpacking is used to extract minimum and maximum values from the slider input, enabling efficient filtering of data within a specified engine size range.
- Noble Desktop guides learners through building multi-input dashboards that allow users to filter datasets dynamically, creating a more responsive and user-friendly data exploration interface.
This lesson is a preview from our Data Analytics Certificate Online (includes software). Enroll in this course for detailed lessons, live instructor support, and project-based training.
We have a slider. It doesn't really, I mean it slides, but it doesn't do anything when you slide. So let's add that functionality.
Now this will be much like what we did before, and in fact we're going to use the same function here. We could write a separate function, but it makes sense to consolidate this logic. So what we're going to do is define the same output.
We're going to keep this output the same. When any of the inputs change, we'll run our update graph filtering function. But we're going to say run that when either the manufacturer dropdown changes or the engine size slider, when either of those change.
And the way we do that is, you know, this is a function called a callback. It's two arguments or output comma input, but we can pass the second argument instead of an input, a list of inputs. So let's do that.
We'll make a list and I move this up into here. This is now a list of inputs and the order is the order in which the arguments we passed into update graph. So again, what we're saying is when the below changes, either of the below now, use our code to replace the graph.
That's what the output is saying. The input is saying, okay, when this changes, manufacturer dropdown, pass in its value as the first thing. Now we'll say, okay, but pass in as the second thing our engine size range, maybe.
And to make that actually happen, we'll say, okay, here's the input that will give us the second argument to this function. So the second argument is another input in this list. Input to our, what do we call it, engine size, engine size slider.
Oops, I've accidentally lowered the brightness. There we go. Okay.
Hey, we all do things like that. Engine size slider, when that happens, give me its value. Okay.
So now two arguments will come in when the engine size slider, which we defined here and gave an ID of engine size slider, when that changes, pass in its value to update graph. Call update graph and give it that engine size range. For now, let's just print engine size range just like we did before.
Let's check out what this value is. All right. Where's our terminal? Here it is.
All right. So it just ran and it printed out a list of one and eight. And the reason it did that is because those are the minimum and maximum values.
So it's passing us a list in engine size range of the current lowest range on the slider and highest range. Let's try changing this eight to six. Now it should have run our update graph function and printed out the new engine size range.
Let's see. Yep. One six.
And if we make that four six, we should get printed out four six. Yep. There it is.
Okay. So our next step is actually filtering based on that. Let's get rid of this print.
Always delete your prints. And let's make a min engine size. We've already used that variable.
I want to use a different one. Range low and range high. And we'll do some tuple unpacking to grab the first two values from engine size range.
This will make a new variable called that is index zero of engine size range. And range high will be index one in engine size range. This is unpacking.
And if you're not super familiar with that Python tool, look it up. Python unpacking. It's a wonderful tool.
Just a nice succinct way to make these two variables. All right. Now we can say instead of filtered cars equals cars, we can say filter it by.
We'll check is the car's engine size. We could do an and. Is it greater than or equal to range low? And is it less than or equal to range high? But every column has a dot between which returns true or false.
Is it between these two values? So just like an if, we can make this a condition in an if or a condition in a filter like this. Is it between range low and range high? Okay. So that will filter it by that.
And then, hey, if there's a non all manufacturers, select a manufacturer, further filter it by that manufacturer. Let's see if that worked. Okay.
Let's try bringing up to three. Oh, looks like it did. We now have only ones that are in the range three to eight.
Here we have this Viper that has an engine size I happen to know of eight. It's the only one. Let's decrease it to, say, five.
Yep. No Viper anymore. And this should also work with other ones.
We can filter by two things at once. Here are the fours that are between three and five. And we can expand that.
Here are the fours that are between one and eight. And there we are. All right.
We've successfully made a somewhat complex interactivity dashboard for our users to explore this data. And our next step will add we'll show you that you can add additional new elements to what we've got here and that we can make those elements we can create them as our user interacts. We'll add a whole new layer of interactivity.