This course has been updated! We now recommend you take the Introduction to D3.js course.
Transcript from the "Position and Collision" Lesson
[00:00:00]
>> Shirley Wu: I think a lot of the examples for force stimulation is like not only graphs, but in version four. I'm like in love with version four for simulation, because it put into like, it now provides position and collision. So what position is, is you can actually provide X and Y positions that you want the nodes to go towards, but not exactly those X and Y positions.
[00:00:31] Yeah, so basically, you can provide at focal points. You can be like, I want these nodes to center on 100 by 100, and then these nodes to be 200 and 200, or something like that. And then, what force simulation will do will be, it will calculate the positions of all of those nodes, such that it does go to their focal point but don't overlap each other.
[00:00:56] Or something along those lines because you have repulsion set on them. And collision is something called collision detection which you can say like, I want, I want absolutely no overlap between the nodes. So then for each node make sure I have a buffer space of this much radius or something like that.
[00:01:21] And these were previously like pieces of code that you can copy and paste into your own code, but wasn't built into D3, and in version four it got added into D3s for simulation and you can now just kind of like build and use it. And I absolutely love that.
[00:01:44]
>> Shirley Wu: Because, apparently this is not the link.
>> Shirley Wu: I love using, position and collision together because then I can do something like,
>> Shirley Wu: Something like this.
>> Shirley Wu: Yeah, where each of these dots are, so this is just like my vacation pictures and yeah. So basically took my pictures and I took the five most primary colors in my vacation pictures and then I map them.
[00:02:20] So here, each of these are a different day in a trip. So first of all I map them to the day that they were taken in the trip. And then also I think the radius is actually, yeah. So time like time of day of the trip and then I'm the, I guess is that, angle, sorry, angle is the time of day, and then radius is the hue, I think.
[00:02:49] Yeah, hue going from red to blue. If I didn't have focus X, focus Y, I wouldn't all of this would just be converge they'll all be overlapping each other, but because I have that you can see little things like some days I take the most okay so. Through this exercise I actually learnt something about myself which is I really like taking pictures of the sky and the oceans, so the blue and nature so the blues make a lot of sense.
[00:03:24] But, then I was like, why do I have so many red things? Cuz, like what things in nature are red, right. So, I actually dug into this and apparently these are all food pictures. So,
>> Speaker 2: [INAUDIBLE].
>> Shirley Wu: Yeah, food pictures. So you, can see you're up, mostly food.
[00:03:45] Asia, this was when I went to Tokyo, or yeah. This like I just ate through Japan, apparently. And Hawaii, and I think this was Iceland, so this was a lot of water. But if I didn't have position and collision then I wouldn't be able to show you this whole big chunks of blue or big chunks of red that led to my discovery that I just eat a lot.
[00:04:14] So that's one of the things. And the other place that I used that was in the other place I use the Force Layout a lot is in the Hamilton one that I showed, previously, where if you see, like, at the very beginning it, all the dots come together.
[00:04:35] That's using the Force Layout. I'm making them come together, and then there's specific positions that they're going to, and then it snaps into the star and then once you scroll a little bit it whizzes out and then as you scroll all of this is bouncing. It's actually this force called force menu body, and I'm just telling it like just apply a bunch of repulsion around it, repulsions to push them apart from each other.
[00:05:06] And then, it snaps back and then it goes into this view. But even calculating and this is what I was mentioning earlier about being like okay this set of nodes should focus around this center point, and center point, and this center point. So this is like all of the nodes group by other lines grouped by their song.
[00:05:32] And so I use D3 force to calculate the positions of all these. So that's basically to use T3 force to calculate positions for nodes. And it's very versatile and it's very awesome.
>> Speaker 2: Is positioning using force layout deterministic? Is there any randomness to it or?
>> Shirley Wu: Okay, so by positioning they don't mean this force, the focus position, but just positioning in general.
[00:06:09]
>> Speaker 2: That's right.
>> Shirley Wu: Great question, so with the force layout if you give it an X and Y to start with, it will start with that X and Y. And then, it will calculate a quote on quote, the best set of positions, most optimal layout it can. If you don't provide it with X and Y attributes to start with then D3 just like randomly generates an X and Ys for you, and then converges on a lay out starting with that randomly position instead of nodes, yeah.
[00:06:50]
>> Speaker 2: Excellent okay, so that's very good. The next question is, is there a performance impact for force layout especially on mobile devices?
>> Shirley Wu: Yes [LAUGH] as you can imagine what I was saying before is it loops through. Basically so D3 is smart in that is uses a quatri underneath the hood so then it's not it's at least not o of n squared, it's, so at least, as it goes through all of the notes, it's not going through everything twice.
[00:07:29] Or wait, n squared, it's so, I think it's, and log in. But even then, you can imagine, it loops through all of the nodes on each tick, and then it ticks for a thousands of times, that's super, super resource intensive. And I think performance starts degrading. After maybe, I want to say 1,000 nodes, or a few thousand nodes, or something like that, on desktop.
[00:08:02] And on mobile it's worse, yeah.
>> Speaker 2: So a follow up question would be, is there a sneaky cheap and free way to get a forced layout to converge faster?
>> Shirley Wu: Yes so, there is. So I think I don't remember of the top of my head the, yes. One way is you can just loop through, like you can just like do loop 1,000 times, and then on each loop, just call simulation.tick.
[00:08:39] And that basically forces a tick calculation. And then that's only, you can be like, tick 100 times or tick 1,000 times or something like that. And, although it's not like100%. It's not as optimal as if you had just let it run the whole time, but I find that usually by 1,000 ticks it's gotten to a pretty decent layout.
[00:09:10] And then 1,000 ticks is pretty quick. I think it finishes within a second or two. So that's one of the things I've seen often done in version three. And I think in version four, what you can also do is, there's this concept called alpha, that you can read about in my blog.
[00:09:27] But it's essentially the cooling perimeter, and you can specify an alpha min to have the force simulation end earlier than it's originally intended. So it's called alpha min, yeah.