Force Practice: Graph Calculation

[00:00:00]
>> What I would like us to do is position all of our film flowers by the genres that they share and bonus points if we can make it work with our filters at the same filters as before. And Just to show how the end result should look like.

[00:00:26]
I'm gonna give a slight disclaimer now that I'm on a 2015 MacBook Pro and it is not handling the force calculation very well with everything else that I'm putting out there. No, so and it might look a bit janky but usually it should be much smoother. And this is one of those examples where there's so much animation going on that definitely for older devices it's gonna look very laggy and janky.

[00:01:06]
And this is where I would recommend that we move away from SVG and use Canvas instead. But we don't have the time for that today. So we'll just deal with this add kinda slight bit janky animation that's going on. And if you're working on your own project, and this is about where I would consider using Canvas, html5 Canvas.

[00:01:30]
So it is very slowly, patiently, it started at some random positions, and it's trying to kind of like you can see it playing nudging each other because I have some forces applied. That says that don't overlap each other. But then I also have some links so that they're attracting each other.

[00:01:51]
So it's like struggling to find an optimal layout right now. But what's happening is it's already really cool to see because the movies are positioned by the genres they share. You can actually start to see like the genres that are closer to each other like the sci fi action, adventure, horror and fantasy.

[00:02:16]
You can see like rom com is close to each other and drama and crime. And so like even from that perspective, forced layouts are really fun and really fun option. And I think what makes this potentially even better is if we have the filter and we can be like I wanna see all of the movies positioned like this but without the R rated movies.

[00:02:41]
And then it will start to reposition and what if I only wanna see the GMP g ones and then there we go. And whoa, he is really going at it in there. And, and it's all of the GMP g rated movies are comedy and family and animation and ventures and mystery and you can see that like it's like Scooby Doo or Toy Story.

[00:03:07]
So a lot of really great potential for the force layout. So I'm going to actually like, stop this. I'm gonna comment out this cell because and I would suggest you do the same thing because if we keep having it and run it, it's just gonna bog our notebook down so much that we're not going to be able to do our exercise together.

[00:03:39]
So and before actually, before I get started on this code, I wanna kind of show you my graph calculations. So this is the function that I'm using to turn our movies data into the node and link set of arrays that D3 force needs to do its calculations and so I'm creating a nodes and links, arrays and then one genres object.

[00:04:13]
And I'm going through and I'm pushing the flowers into my nodes array. So here, some basically looping through all of the filtered movies and I'm finding, I'm finding the corresponding flower and I'm pushing the flowers into the nodes array. And then, for each of the genres on that film, I'm going to loop through all of the genres and I'm saying I go and find the genre and if it doesn't exist, then create it and, and and set the genre on the genres object.

[00:04:59]
And finally create a new link where the source is the genre object and the target is a flower object. And I'm saying return the nodes array, the links array and their genres turned into an array also. And so this is what we're seeing is a graph and it has all these different arrays.

[00:05:24]
So we will use this graph array to do our code.