Data Visualization First Steps

# Plotting the Filtered Data Solution

## Anjana Vakil

Software Engineer & Educator

### Check out a free preview of the full Data Visualization First Steps course

The "Plotting the Filtered Data Solution" Lesson is part of the full, Data Visualization First Steps course featured in this preview video. Here's what you'd learn in this lesson:

Anjana walks through the solution to the plotting the filtered the data exercise.

Preview
Close

### Transcript from the "Plotting the Filtered Data Solution" Lesson

[00:00:00]
>> Let's take a look. So again, there are a few different ways that we could do this. One way is that we can take our selected codes array, and use it in our a filter call to our API logs data to compare the status code of each data point and check it against that array [LAUGH] and see if it is one of the valid ones.

[00:00:26]
So, one way we could do that is in our call to filter. And again, we could name these whatever we want, but let's just keep with this convention of D for datum. We can see if the selectedCodes Array includes the value of the data points status code. And if it does this will return true.

[00:00:51]
So, it will pass our filter and if it does not it will get filtered out. If I have typed this correctly, how does that sound everybody? Seeing some thumbs up. Excellent, hoping for virtual thumbs-up from you all out there. Alright so, now let's see if we've done this right then, when we get rid of this.

[00:01:12]
Okay, when I uncheck some of these boxes, the chart should update. Okay great so, as we are deselecting some of these codes, we're seeing fewer and fewer data points visualized. We're also seeing some of those colors change probably because certain of the paths that let's say the all of those yellow dots, a lot of them came back with 200s.

[00:01:34]
And if we take away the 200 code then we have different colors. And so on and so forth. And so, we can still go back to our original plot by checking everything again. By default, everything is selected but users can decide to drill down and maybe I'm only interested in looking at these server errors.

[00:01:54]
These a couple of 503 that returned really quickly and now I can hover over and see. Some of these were all of these were these really long 30 millisecond search endpoints. So, you'll notice though that also this messes with our axis, right? The values chosen on our axis.

[00:02:14]
That's because plot again is sort of cleverly trying to figure out which axis it should use, what input domain it has to account for by looking at the values in our data set. So, if we want to stabilize that, we already know how to do that, we can override the default values for the axis.

[00:02:35]
If we want to make sure that plot does it keep changing this as the input dataset changes. But for now, we'll call this good enough.

### Learn Straight from the Experts Who Shape the Modern Web

• In-depth Courses
• Industry Leading Experts
• Learning Paths
• Live Interactive Workshops
Get Unlimited Access Now