Introduction to Data Visualization with d3.js v4 d3-force Module
This course has been updated! We now recommend you take the Introduction to D3.js course.
Transcript from the "d3-force Module" Lesson
>> Shirley Wu: You guys might have seen the force lay out as something like these right? I think this is, the lamaze, is this the lamaze? This might not the lamaze, but you've seen force lay outs, all right you've seen things like this where it's graph and all that the force lay out d3 force does for you, a lot.
[00:00:24] But it basically calculates the X and Y positions of each of the nodes for you, so that you don't have to, because having to calculate this is kind of painful, yeah. So the force layout tries to do the most optimal layout it can given as little overlap of nodes as possible and as little overlap of links as possible and of course each of those attributes are things that you can specify with D3 force.
[00:01:00] Yeah, so how D3 force works under the hood, and this is my favorite slide because each of those little dots are a node. And what the force layout does is it figures out, okay here's my node, and what are all the attractive forces between the nodes? So, three goes through and says, okay, given this red node in the center.
[00:01:36] Apply all the attractive forces that basically are pulling all of the other nodes to it. Yeah, so attractive forces pull nodes together, and that's so that you can conserve space. So if you don't have the attractive forces, all of these nodes would just kind of fly away from your center or something like that, or be really big and doesn't fit on your screen, right?
[00:02:01] So there's attractive forces, denoted by the hearts. And there are also repulsive forces, that act on each of the nodes. And so that's kind of like yeah. The forces that push nodes apart and that just makes sure that these nodes don't overlap with each other. Cuz sometimes your nodes might be circles that are 50 pixels or 100 pixels or something like that.
[00:02:29] So actually you really shouldn't maybe ten pixels. And so they don't overlap, and make sure they don't overlap. And so underneath the hood, what Force Layout does is it repeats this calculation. So, it's basically figuring out the x and y positions, of that node, just that red node given all of the forces that the other nodes are applying on it.
[00:03:00] Attractive and repulsive, and it figures this out for every single node to get every single node, their x and y positions, and that whole process is called one tic, so one tic, yeah. So that whole process is called one tic, and the whole point of a force layout is that it runs thousands of iterations of these quote unquote tics.
>> Shirley Wu: To converge on an optimal, quote unquote optimal layout. And so it's basically running a simulation where at each tick, nodes are nudging each other apart or pulling each other together. And over thousands and thousands of iterations, you hopefully arrive at something that looks good on the screen.
[00:03:58] So, this might be actually a pretty good example.
>> Shirley Wu: You can see, can you see that? It's pretty fast but then like it starts a little bit in the middle, and then it kind of expands so that none of them are overlapping each other, and let me see if there is any other ones that might be good.
[00:04:23] So, every single movement that you see that's a tic, so as it and stuff that's a tic, where the positions are being calculated.
>> Shirley Wu: And I have a article that I wrote that kind of goes through, this is version three, but it kind of goes through what the force layout is for.
[00:04:52] How do you use it?
>> Shirley Wu: What does the data structure look like? And this is where you pass in your nodes and links for the force layout to calculate its x and y. And you have to tell it to start the simulation. And then, as the simulation is going, you want to be setting the, maybe the x and y attribute of the node, and the x and y attribute of, if you have any links on each tick.
[00:05:29] Or you could be doing that after the whole simulation has finished running on end.
>> Shirley Wu: And then there is like, there is a little bit of like tricky things about the force layout but I think I have mentioned them all in this article. And then I also go in to detail about all of the different forces that the d3 force layout applies, and how those are kind of working.
[00:06:02] So this is for d3 version 3 and there's some things that have changed in version 4. Where instead of having these default forces applied on our simulation, in d3 version 4 we can specify the forces that we want.
>> Shirley Wu: So we can pick and choose between all of these different, do we want the force to center all the nodes?
[00:06:34] Do we want collision detection to makes sure to push apart the nodes so that they don't overlap each other. And then, do we have links? And with links then, links, you can push apart nodes so that the links unfurl correctly. And there's a lot of different things that you can kind of pick and choose and put in there.
[00:07:00] And that freedom is really awesome in version four that didn't exist in version three. So yeah, definitely if you're interested in the forced layout,
>> Shirley Wu: Check out the article and then check out the documentation to kind of see the changes. Yeah, between those two, cuz I think force layout is one of the things that changed quite a bit, between version three and version four.
[00:07:36] And then, this is the example. This is a super simple, I think this is Les Mis data set, and then it's basically just all of the, each of the nodes are character and all of the links are co-occurances throughout the musical. And then, so this is where I defined forcedSimulation, and this is where I say all of the forces that I want to use.
[00:08:08] So, I'm specifying that I have links, specifying that I want a certain amount of retraction and a certain amount of reportion between the forces. Specifying that I want the [INAUDIBLE] be pulled to the center, because if I don't have that, it's going to be at zero zero. And then the slightly different thing from everything that we've done previously is notice that with the links and circles that I defined, notice that it doesn't have any CX or CI attributes that they are not set.
[00:08:44] When we create this circles and you certainly can set them but you don't have those x and y attributes yet because you haven't run the full simulation yet. So once you start, I think this is, yeah. So once, I think in version actually in version four the four simulation runs automatically as soon as you define it.
[00:09:11] So as it starts running, then you start getting the x and y attributes for each of those nodes and that's when you can apply them in a take call back function. So for example, if I just take this and then put them here, that's what happens, yeah because you're only updating the x and y when the circles are being created, which isn't necessarily when the force simulation has stopped running.
[00:09:56] And often times it's definitely not when the force simulation has, like it's at the very beginning of the force simulation. So then you want to make sure to update the x and y as the force simulation is running. And then you'll get the right x and y attributes.