In this video, I want to show you how you can use the three to display networks. And more especially, I want to show you how we can create another link diagram. But in order to understand how draw a network is important for us to understand how the data looks like. So here, for example, we have a small data set. And this data set is break into two sections, nodes and links. So if you think about nodes, nodes are basically some circles that we're going to draw for each person. And here we have their names, so we have John, Marcus, Jane. So this could be John, this could be Marcus, Jane, and we could have others here. And then we the links. So, the links are going to be the connection between them. So, if we are saying that we have a link with a source John and the target Marcus, it means that if this is John and this is Marcos. We're going to have a line that goes from John to Marcos. Know that even though in my visualization, I don't have any direction. In my data, I going to have this direction. So, I'm saying that I going to start from John and go to Marcus, and it's up to me to decide if I want to draw just a line, or if I want to show this direction with an arrow. So, the problem here is how do we decide where to put each circle in outer space. So if you want to show a 100 people, how are we going to decide where to put each one? If I just put those people in order, I may have a lot of overlapping lines. For example, I could have distinct here, where one line is crossing the other one. So in order to fix this problem, we use a technique called Force Direct Layout. So a layout in d3 is going to compute information for you, basically position of elements and shapes of elements so you can use this information later. We have seen this thing happen with arcs for example where d3 computes for us the angles of the arcs. But here we want d3 to complete the positions, and based on the links that we have between these people. And d3 is going to do that by trying to simulate some force that either push away, pull away nodes that are very dissimilar, that doesn't have much link. But I'll put together nodes that are more similar so we can avoid this kind of crossing that we have here. So, let's see how d3 help us to do this. So here in our data, I just saw we have our nodes and we have our links. The first step that we need to go through is to view those simulation force. Where d3's going to try to arrange the nodes for us based on just sort of gravitational force between the nodes. So to do that, we're going to create something here called simulation. And you going to create a d3.forceSimulation. So, this is the first thing that we have to build. Just build the simulator that is going to simulate the force, but now we have to choose which forces we want to use. So as I said, one force that we are interested on is to pull apart things that does not have link, and a put together things that are related. So, we're going to create a force called link and we're going to use features from d3 called force link. That's going to use the link of Adobe But now we need something that returns the id. So given the node, we need something that tells me what is the id off that node. So, you're going to use either function that's called id, that's going to return d.id. So this function basically takes a note as input, and returns the id of the note. So this is the first force that we have, but that's not enough because a force like this may put together things. But they may not be very well spaced or well centralized in my screen, this kind of thing. So you may want to add new forces. So a second force that we can add is charge. And this force simulates kind of elements pulling each other apart. So, we can do d3.forceManyBody. And then finally, I want to make sure that the resulting is more towards the center of my visualization. So, I'm going to use a force to put my elements in the center. So remember that bodyWidth is my width, so we just divided by 2 to get the center, and then we have bodyHeight. There is the height and we also divide that by 2. So now, I created all the forces that I want. My next step is to run those forces, and tell this simulator where the nodes come from and where the links come from. So remember that our data set we have two keys, nodes and links. So we going to use that here, were going to say, simulation.nodes(data.nodes). And you're going to also see that our links, So, link is the name of the font the source that we created on the top, and we going to say, that the links are data.links. Also I have my simulation, I can run it and get each steps. So, this is a retaliate process. So it going to run give me a result, it's going to run again and give me a new result, and so on. So, I can capture that using a an event here called tick. So this means that every time I have a new update, I going to run this function. So on tick, this means that every time I have a new information, I just going to log my data here. So this simulation thing, it updates the data every time it runs. So this means that every time I go to this process, it going to change the elements that I have in my data, adding new information. So if I open all these notes here, for example, you going to see that for now, for each node, I also have their position, their x and y position. This is the velocity, how they are moving in some direction. Now, I can just use use the x and y position to draw the dots on the screen, and the same thing is going to happen with my links. So if I open a link, I'm going to have information of the source, for example, where it starts. And I also have an x and y position where my line starts, and the target where my line is going to end. Now, I can use this information to actually draw my node link on the screen.
