Filtering & Updating Data Exercise

[00:00:00]
>> Let's go to the final exercise for this notebook. So the final exercise is we are going to actually think this is pretty cool and so we are going to write We're going to update our film flowers such that when we click on any of these, and our film flowers are going to animate and they're going to update and animate accordingly.

[00:00:39]
So actually, you can't quite see the animation right now because they're so far down. So let me bring it up here so that you can see it. So as we kind of filter around. Our film flowers animate in or animate out. So we can filter, maybe we only wanna see the PG 13 films and then so we filter down by this.

[00:01:09]
And then, maybe we're only curious about the action films and so we filter everything else out. And that's what it looks like, so I think hopefully, it will be quite a fun exercise. And in terms of like practical application, I actually think this and filtering I'm is very much very kind of practical in our data visualizations because that means, and you probably won't have flowers in your data visualizations or charts.

[00:01:48]
And but if you imagine these as like a line chart or you would have a scatterplot or maybe even something more exotic, but whatever your visualization is being able to handle these sort of filtering. Will really help with whatever data exploration tool you're trying to provide or maybe some, whatever story you're trying to tell.

[00:02:14]
And so to be able to do this and we're going to do the exercise in two parts. The first part being that we're going to use the new way with join to update all of our flowers every time the movies are filtered, and in the second is that once we have that will break off into that exercise.

[00:02:39]
And then we'll come back and we'll do part two where we add animations. So that on every update you see the flowers fading in when they're entering and moving to their new positions when they're updating and fading out if they're an exiting. And a few notes about some of the things that are happening within the observable notebook outside of the scope of the cell that we're going to be working in, but important to know.

[00:03:13]
So let me bring this back. And so this is the cell we'll be working in and we'll have our code here. But I wanted to show you some of the things that are happening. So every time we click on one of these checkboxes, I have this filter function running and this one says to only keep the movies that we have the genres checked for, and the Parental Guidance Rating is checked for.

[00:03:51]
So this is what this big function is doing. And I am as of right now with these filters we have 109 of the movies and a 135. If we do that, we have 34 of the movies. And then here we're saying okay and then take that set of filtered movies and run that through our function, the function that we created to calculate all of our flowers using scales.

[00:04:22]
And so then we get the corresponding kind of, array objects for drawing our flowers. And then finally we're going to use that filteredFlowers array in our cell when we're creating our flowers. And I'm not sure if I explained this before, but there's a lot of heavy lifting that observable is doing for us to make this filtering work.

[00:04:59]
And primarily that it is reactive and in that each of these cells are dependent on these cells every time these cells change, these cells update. So here for our exercise is also dependent on the filteredFlowers, so every time filteredFlowers update and our cell reruns. And if anytime this dependency chain confuses you, and then you can take a look here and it shows you the current cell that you're in and all of the things that it's dependent on or is dependent on it.

[00:05:56]
So I wanted to mention that and before you get started on the exercise and because I wanted to put that little bit into say that if we were to implement this ourselves, I'm in maybe like a separate index HTML file. And it's going to take a little bit more work to hook it up together and it's outside of the scope of this workshop.

[00:06:20]
And, but because we're in observable we get to do this. So, and that I'm mentioning because at the very end of this workshop, we'll figure we'll kind of translate everything that we've been doing in observable notebooks into an index HTML file, so that you can see how, that might work if you want to, create a web page but that.

[00:06:47]
And so this is the disclaimer to say that when we do that, we won't be able to do kind of this filtering update, and but we'll do everything up until this point.
>> Since exit and enter correspond to different rec elements. Shouldn't the order of execution the irrelevant?

[00:07:08]
>> Yes, so, the order of execution is irrelevant when it is simply a rectangle elements and there's nothing nested in there. But, it was that I had worked out this logic a long time ago, and I can't quite remember it anymore. But I think there's a few edge cases where the order does matter, like what gets removed.

[00:07:39]
And I think that edge case was if you have like group elements and then things within those group elements but I can't quite remember. And so that one is a gentle suggestion of having it in that order and you can certainly do it in other orders and I just can't remember exactly the bugs that come up.

[00:08:05]
But I do feel like there are bugs I came up and that's why I have this like, best practice for myself because I run into the bugs and I've wiped the bugs from memory, but just remember the lesson. [LAUGH] Yeah so, that was a great question.
>> Then do you have any advice for D3 and react?

[00:08:33]
>> Yes, okay, so I was going to mention this briefly at the end of our workshop, but I do have another workshop on front end masters. And that is a very gentle introduction to D3 for react developers. And for that one, and we cover there's some overlap in the materials that we cover.

[00:08:59]
But I do talk a lot more about how you can use react and D3 together. And so the short answer is check that workshop out and maybe you can skip around the parts that we've already covered here. And but yes, you can definitely use react and D3 together and it does fight each other a little bit and I think I cover that in the workshop also.

[00:09:28]
And I'll have a little bit of bonus content for this workshop at the very end, where I talk about using Vue and D3 together. And because I actually haven't used react with D3, and like two years, because I started picking up Vue. And I find that with Vue it plays with D3 a lot more nicely.

[00:09:59]
And it makes much more sense for the data visualizations I build because Vue has a lot of the same reactivity that we've been seeing in these observable notebooks built in. So it makes kind of data updates and user interaction that manipulates data updates really much simpler. And I view also treats animations as a first class citizen and has a lot of really good built in support for it which is really important for.

[00:10:31]
When I'm making visualizations, and so that's why I tend to prefer Vue. And again, the disclaimer is that I haven't used react in about two years. So maybe there's a lot of things that have updated since then and have made it much friendlier to use for with D3 and data visualization.