Step by step tutorial on how to do a network visualization using d3 v4 Force Simulation

hello everyone my name is John Alexis gasps Aramis and in this tutorial I'm going to explain how to create these network visualizations using d3 canvas and the for simulation system in d3 version 4 so let's get started so let's go here into my desktop I'm going to create a new folder called simulation and inside that start sublime I don't know why sometimes I do this I have to call it twice anyhow so let's create a new file inside that that is going to be called index dot HTML I'm going to use just a regular HTTP HTML sorry template with title in here that says first tutorial I'm just going to an h1 here that says the same thing and then I'm going to create a canvas element that I'm going to call Network and then it's going to come up with of let's say 500 pixels versus a height of 500 pixels since we are going to be using d3 then I need to include the library so I'm going to use that from the CDN that Mike gracefully offers in the d3 website and then let's start writing down our script so to start working with these basically we will need add some data so let me create that so I'm going to save that inside a variable called graph and that variable it's going to be just do will contain two attributes one is going to be the notes that is basically an array of objects and the other one is going to be the links that we are going to do that in a minute so let's start with the nodes each node in here will contain two attributes very simple then an edge that we can use for clearing the visualization let's say like 36 or so so now let me replicate this oops a bomb and then a bunch of notes so basically I'm going to say here is chargers Muffy and then I also have a dream there's going to be nine and then I'm going to cut off centi that eight and three that's three and finally Julianne that is three years old okay now that we have data basically we are going to be drawing these inside the campus I'm going to create some variables in here we're going to create a selection that is basically just selecting this network that we created up here the canvas and then apart from that when you work with canvas basically you need to be able to generate the context and the way of doing that in here will be from the canvas we are going to use the node call that basically returns the HT HT ml element or the Dom element I am from there and Joan is going to say get context and we are going to be using a 2d context to find more information about that all right all right so apart from that we are also going to be using the width and the height we're going to get that from the canvas just by calling the attribute with such that it changes and I think I you of course have our title here and then please change these for the height and this ain't one here so basically these two variables will get 500 500 each one okay so the next thing I'm going to do is basically start drawing that on the screen so for that I'm going to create a function I'm going to call that it's called update and then this function is going to do something very simple since we are using canvas so the first thing I need to do is just to take that context that I called CTX and then I'm going to do a clear rect which means I'm going to clear the whole campus from the core a 2-0 to height width height okay and the next thing is that I'm going to do for each one of my notes oops I'm going to call the method draw note so that's a method that doesn't exist yet so let's create it basically each one of these draw note is going to receive the data so it's going to receive each one of these elements and then what I'm going to do in there is to move the cursor like in as we used to do in level many years ago to the position of the nodes in DX and dy and finally to create a circle between that in canvas we use the arc primitive and then it's the circles going to be centered in x and y it's going to have a radius of art that I'm going to create a variable in a second and then the arc is going to go from angle 0 to 2 times math.pi so basically with that we're saying we want a full circle now I also need an odd values so let's say that this is ready of 3 and finally so we are going to now this is not going to show nothing yet on campus because basically that is that we need to tell it that we are going to create a path in here and then that we actually want to draw those things basically the way this works is that first it knows in here we start creating something then for each one of my notes is going to perform these two actions without JETRO and then after all of that it's going to draw all of it so this is I think a little bit more efficient and we'll see in a minute how that works let me just create a global in here D tween such that my linker stops complaining and I think oh and we have a problem so you guys see in here I'm using DX and dy however none of my objects contain any X or Y whatsoever so those are variables are going to be controlled automatically by the simulation system but since we are done using that yet so let me do a hacking here and then for each one of my elements I'm just going to assign a random D X point saying that I think it's random not sure like this I think x width and then do the same thing with the Y that in this case is going to be x height let's line this nicely and then basically we're going to have notes that appear on the screen and different positions let me start an HTTP server in here in position in the ad and if I run that well so now we have nodes appear in random positions okay go so that lies but that's my prediction data visualization so let's go a little further so I'm not going to use this anymore and then what I'm going to do is to start creating the magic of the D treat for simulation so when I do that basically I just need to call this function and I will create a simulation object and in each one of those objects I can do many things so the first thing I need to do is do something whenever there is a new thing on this simulation so basically this is this method is going to be called many times every time the simulation has a new body and basically that was creating idea of the animation in these cases we have this of a function we are going to be calling that going to be more in things around and to see then how this thing works basically we want to create forces so let's create a simple force that takes elements and take them to the x position with with other two which means in the middle of the screen and then finally the only thing I need to do is just to say and I'm not removing this because I simulation is going to take care of coordinates now or actually let's put it in here it's going to say the simulation the notes of that is going to be my graph dot notes okay so when I do that now I'm using that and then this is going to be called let's see how that looks so if I run like that you see that the note should be go into the middle of the screen so now I can actually say well I also want that same behavior on the Y position this case is going to be with the height and it was going to be a force why did you do that you see all the notes are going to the center so now we have a simulation and the tick is getting called several signs and each one of those it's printing out in there we can actually bring beats a little bit bigger but we'll do that in a second so the next thing I want it's to create another one another function that actually says you know what I know I don't want my notes to collide so these new for simulation system has a nice function that's called force collide and then you just pass to it what is the radius of each one of the nodes then when you do that it actually makes sure that the nodes don't collect then I can actually make this bigger just to see if it is actually working and you see that there one on top of each other but they're not colliding means you actually want about that and you can add like a little bit of threshold in there and then so the nodes actually differentiate now as of now I have two forces I have one force or three forces one for sending the nodes to the x position to the middle another person in the right position to a half of the screen - and then of course avoiding them to collide the other force that is very useful is the charge force so if you use the charge force basically it creates a system in which in which each one of the notes will try to repel the others and then if you just do this you see the notes they are not moving too much in here but is because of the strength that it has and the size so I actually can add a little bit more of strength and let's say and this takes negative values if you want the notes to take to stay away from each other so when I do that you see that the notes try to separate if I add higher values in here I can negative values and they will try to stay away of each other if you put a positive value in there they will actually get together and then they do we see these with smaller values then you still can see hand like honor okay good so this is really nice now we have forces that avoid collisions that allow notes to separate themselves but I need another force because this is supposed to be a network so I actually need some links so let's start creating some links basically the link is another attribute that is going to contain objects it's another way sorry is going to contain objects that have a source in this case I'm going to say the source is shown and a target I'm going to say that the target is mapping then I'm going to create several of these that's good beautiful so now I can say that Jam is going to get muffin John is connected to a doing and also a dream is connected to Santee Green is connected to the read then we'd make the same mistake event something and something to debate and finally a ring to Julie let's create something that doesn't make much sense now so I now have my links now if I actually want to draw them then I also need a function that will throw my links so I'm going to create a function here that it's called drug link I'm going to change these variables for an L and then basically I'm going to do the same trick I'm going to move the cursor first to L but in this case they look the link itself doesn't have a coordinate but it does have the source and the target so I'm going to move into the source coordinates and then I'm going to draw a line to the target coordinates and those are the two coordinates of the link so it goes from one node into the rotor node and then I repeat the same trick you can actually put this in here and say instead of the clouds I'm going to do that with the links it's going to be draw a link and instead of a fail is going to be a stroke because the links they don't have any filling okay so with that I'm the B to R in them but even if I try to run it like this and then if I do it here you'll see that it's still not drawing my links the reason for that is that you see I'm using l dot source dot X but if you look at the links and we only have a source that contains some name so the reason why that will work eventually is that the simulation system will take this gem and then we'll search in here then it will replace this whole element with this title and since the nodes it keeps on updating them with the X&Y coordinates then it will work ok so to do that the next thing I need to do is to add a new force this case is going to be called a link force and it's just a d3 force link go figure and basically the same way that I was assigning here the notes I need to assign my links however I don't assign the links same dot links because the links are just yet another first so I need to get that force first and then that force is the one that contains there are three links and for that I will assign my graph top links okay let's run like that this let's see what we get so now it is complaining a lot here in the console you can see that it's not finding the Muffy and the reason for that is that originally dete read like like the basic of if you don't pass any parameters is that the source should be an index of the nodes array so this this instead of Jones you'll be like zero knowing that this is the first element but since I like writing things like this I'm just going to tell the link how to find the notes so I'm going to say the ID for this it's going to be a function that for each node you just have to look into D domain that's it okay so if I want that again seeing this so now it is working and then we actually have our network good perfect so the next thing that we can do is actually load this with real datum so this is just a toy example so I'm going to remove this I'm going to use that anymore and I'm actually going to be using a file that had been playing with that is this what does unison on each file that contains all of the building patterns of the Colombian Congress basically it has each one of the congressmen and congresswomen and then it also contains their party that in Colombia it's like 20 or different and then if we look into the linking here you call contain how many times these two senators have voted together that means that have had the same opinion on the different laws that they have been debated these contains data for the last three years in Colombia and it's quite top let's slow that and the way of doing that is that I'm going to call the three JSON in here I'm going to be very lazy and just copy the name just to avoid mistakes and then remember that the function depreciation will receive another call back that basically contains an error variable that it gets assigned basically it's something when up so I'm just going to throw an error and then I will contain here my god now that's what I'm going to use to assign my elements to my simulation and then as you see my update also depends on the graph so I'm going to put that inside that term and make use of the closure of JavaScript and then finally I was calling this update manually so I don't I won't do that anymore I now I have to call that update so that was called here on the tick on the simulation here so now I'm going to do that after loading the data because I don't want that to happen before having any data so I'm just going to say a simulation on tick so another way of doing this that so that it's a little bit more deeply will be something like this so we can say here are my notes and then finally like okay I have to do it in this order because if we try to do first the link and then they don't tick we think it will not work because this is returning the force do you think here is returning the force of the links and not a simulation person so with that let's load it and see what we get and as you can see now we have this ugly log and it's because we are drawing the links on black so let's change that and way we can do that you just would say first I'm going to say that they are not that opaque I'm going to put some transparency in it so I'm going to say the global outline here is going to be point 1 whereas for the nodes is full opacity and then the other thing is that I'm going to say that the stroke style is going to be in a color of AAA okay so that's like a gray I think so by doing that we do get like a better chart in here now the final touch I want to give to this it's to give some colors so I'm going to create another scaling here there is a d3 scale or you know and that one is going to receive the skin of the category 20 and comma so we get to the next one and then the next thing I want to do is that before drawing each one of my notes then I'm going to say change the fill style to be the color of the d dot body that is the attribute that contains the party and I'm going to do something ugly that is just to do the beginning pad and fill inside the cloud note which is a little bit less efficient because it's going to create many more parts that is what I need to be able to actually go natural colors and then you got so this is quite interesting but I still wanna know who are these interesting notes so what I'm going to do is that if you guys search for the d3 force documentation then you go to the github page you will see that Mike has here several examples and I'm going to use this one in here that contains some bragging behaviors and I'm going to cops so basically the idea in there is that I'm going to be using these three functions I'm too lazy to write them myself so let's put them in here basically if you look at them and they're what they're doing they are just taking this d3 event subject which is going to be a note out of my graphic notes and for this to work I actually need to also have this other function that is the one that is going to search for that did I see that one was included inside the d3 Jason call and the reason for that is that this uses something called simulation defined that it's a nice method than my cluster provided to allow us to search inside the campus for any specific coordinate and to return the node that corresponds to that so now we have the four methods and I'm just going to copy this too and so basically if you see in this example the canvas Mike was using was obtained in a different way using just the regular document query selector so in our case canvas is a d3 selector so actually I don't need this I just can do like the regular comers because that's a nice selection but I will need to change this continuing here because that's supposed to be an HTML element so I get that by just calling note and to be it she we can get this to work so if I get a node now you can actually see I can actually drag it and then to show that that what note is that one you can actually in play print here in the t3 in and subject that is the one that was found in here during the drag subject okay and I will print one whole nodes so every time I start dragging a note you will be able to see what is actual senator dollars working it now the nice thing about that simulation system is that you don't need to some things into specific positions so for instance one of the things I can do is that instead of sending these to Force X to the middle of the screen I can send it a little bit to the left then you will see the whole chart box in there whereas you can actually move them each one of them elements into any specific position so for instance I can say I want to move each one of the senators to an x position depending on the tally that they are a so I'm going to do that create a menu d3 scale ordinal and then it's going to have a range that goes from let's say 22 with minus 20 just such that I doesn't go into the borders and then basically depending on each party it's going to assign a position and if you do it that way that you see that it's actually this wheel in the notes is trying to distribute the notes but because of the links it's a little bit too difficult so we can actually make this force to be a little bit stronger so I can add a strength of zero point six or seven for instance and when you do that you see that it's actually pushing pretty hard to get things in there and stretching them with the links you can also play with things like say oh the link strength link I don't want it to be that hard so you do that then actually notes start getting into different positions so that's why this for simulation is quite interesting because you can add your own forces and create very interesting charts that depend and change the pnina on the attributes okay so that's what I have for today you can you will find a github repository that contains each one of the steps of what I have been doing here so you can follow your own pace and if you have any questions please let me know in the comments of this tutorial and thank you very much

Channel: John Alexis Guerra Gomez

Views: 26,130

Keywords: d3.js, forceSimulation, tutorial, infovis, dataviz, network visualization

Id: gda35eYXBJc

Length: 25min 30sec (1530 seconds)

Published: Sat Jul 08 2017