d3.js Subsetting Data Video Lecture Transcript
This transcript was automatically generated by Zoom, so there may be discrepancies between the video and the text.

12:39:09 Hi! Everybody! Welcome back in this video. We're gonna talk about how we can use d 3 dot.
12:39:14 Js to subset data from the larger to maybe one that fits a certain category.
12:39:20 So this can be done with the dot filter argument.
12:39:25 So dot filter or function dot filter takes in a function of how you want to specify the data, subset.
12:39:32 So for instance, maybe we're going to be looking at the Golton data set that has heights for various children compared to their parents.
12:39:39 Heights. So we are going to do dot filter, and then the function we would use if we wanted to say plot just the individuals that were female, we would do function, d return d dot sex equal to female.
12:39:55 Our capital F. In this instance this should come after enter in the chain, but before append, and can be combined with user input.
12:40:06 If you want to do some data exploration, which is exactly what we do in this example.
12:40:11 So let's dive into the code in visual studio.
12:40:14 So maybe it helps to remind ourselves what the Galton data looks like.
12:40:21 So console dot log, Galton, and then we'll open it up.
12:40:30 Not Galton. Just data.
12:40:35 Okay, so we have 898 elements.
12:40:40 And within each element we have the following, so what family number it is?
12:40:44 The father's heights, the mother's height.
12:40:48 This person's height, and the number of kids that this family had.
12:40:53 And then the sex of that person, where the possible values in this data set are male or female. So M.
12:40:58 For male, F for female. Okay? So that's just reminding us of the data.
12:41:04 And so the interaction we're going to do is we're going to add a select button which is added by just a pending select.
12:41:14 And then this select will have 3 options, all which will plot all of the data female which will plot the children who are females and male or m, which will plot the children who were males.
12:41:30 So when the user makes these selections, the plot will change.
12:41:33 And so how do we do that? We do that by adding, I change update.
12:41:43 So this is a new update that we haven't seen so far.
12:41:44 We've seen mouse over as well as mouse out and click another one.
12:41:51 You could make for select buttons is change. So on. Change.
12:41:55 We run the following function, so draw. And this function takes in a variable called sex, and then it's going to first.
12:42:07 So? Why did it remember? We learned remove it's first going to remove all the circles that are currently drawn. Then it doesn't.
12:42:13 If else of checking. If the sex is set to all.
12:42:18 So sex. Here is the value of this selector. So if it's equal to all, it just draws the points so we're gonna plot the height of the child against the height of the MoD so it just plots the points in the way that we've seen before using the
12:42:36 relevant variables, and then it also then goes, and if it isn't one of those, it does, this filtering.
12:42:46 So after the entry we filter to check where the sex column is equal to the selection from the button which is stored in a variable called sex, and then we go ahead and find the rest of it like we've seen before.
12:43:04 Okay. So every time there's a change of this button, this function is run.
12:43:09 And this might be something new. So you can get the if you go through the code in the developer tools, you can get the value of the button by calling dot node dot value.
12:43:24 So, for instance, we could.
12:43:26 Hmm, actually don't know if I can write it in a console.
12:43:33 But anyway, you can get the. You can get the value of the button in this way.
12:43:38 Okay, so why don't we demonstrate what's going on with this code?
12:43:42 So we've got. The child's full grown height on the vertical axis.
12:43:46 The mother's heights on the horizontal axis and we've got all of these.
12:43:53 All of these obstacles. So we can see this is what the children who are just female.
12:43:59 This is their data now. So remember in our code that removed all of the previous circles and then redrew the ones for a female, and then we have the ones for mail.
12:44:12 They're drawn, and then we could go back to all of them, which will just bring the female login technically. What's going on is you're deleting all of the circles, and then redrawing all of them.
12:44:23 So this is an example of a subsetting data. So this is the subset that is, female, the subset that is male.
12:44:32 And now back to all of the data. So you can see how this is useful.
12:44:36 Again, if you want to create interactive plots with your users.
12:44:39 Okay. All right. So that's how you use filter.
12:44:43 And it's also a nice example combining basically everything we've done up to this point.
12:44:48 We've got access labels. We've got axes.
12:44:52 We've got appended circles. We've got updates.
12:44:57 And yeah, we've got a lot just in this single example.
12:45:01 Okay, so that's it for our d, 3 js, content.
12:45:06 And the next lecture I'm gonna give you some steps on what you could do if you want to learn more about web browser-based data visualizations, I hope you enjoyed learning about D 3 Js, and in particular, in this video learning about filter, and I hope to see it.