Implement interactivity in a Dash data visualization by filtering a dataset based on user input. This article demonstrates how to dynamically update a graph of car data by selecting different manufacturers from a dropdown menu.
Key Insights
- Use pandas to filter a DataFrame based on a selected manufacturer, creating a subset of car data that matches the user's dropdown choice.
- Update the graph dynamically in Dash by referencing the filtered DataFrame instead of the full dataset, allowing real-time interactivity.
- Noble Desktop’s tutorial highlights how to expand functionality further by introducing an "All Manufacturers" option in the dropdown, requiring minor modifications to the code.
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're ready to finally make this be interactive. Let's replace, I said let's replace, there we go, let's replace this print with a filtering of the cars. So we have this selected manufacturer string and we can find all cars that match that selected manufacturer.
This is a good opportunity for you to practice your Panda skills. See if you can create a filtered cars that will be equal to only the rows, a smaller data frame where it's only the rows where the manufacturer name matches this. I'll give you a moment to give that a try.
Pause up, you can pause the video here and then come back and see a solution. How'd you do? I hope you did well. We're going to say filter cars equals cars where the manufacturer equals our selected manufacturer.
Now when we update the graph, we're going to do instead of doing just all of our cars, we're always going to do filtered cars. Let's take a look at this and see if it worked. All right, we have Acura and those are Acuras.
We can see the BMWs, we can see something more numerous like the Fords and all of these are now being filtered using the interactivity tools of Dash. We're doing this filter, which normally would be a thing we could do one time, but instead we're doing it whenever the user changes that dropdown and we're returning the figure that's outputting to here, to the FE versus HP graph. Our next step, it's a minor change overall.
It's going to take a little bit of code to do it. Not a lot, but a little bit of code. What we want is to allow the user to view all of them.
Right now we are viewing only specific manufacturers, but what if they want the whole graph? We don't really have that option right now. The reason we don't have that option right now is because we are making our dropdown just from the manufacturers, from the unique values in the column, but we also want something that's maybe all manufacturers. Let's do that in our next video.