Force-Directed Layout

3980.edges

4038 4014
4032 4027
4019 4026
4023 4003
4018 3997
4023 4031
4021 3998
4013 4004
4023 4030
4027 4032
3988 4021
3998 3982
4031 4002
4037 4020
3995 3993
4004 3995
3982 3986
4017 3983
3994 3998
3998 3999
4014 3982
3997 3994
4005 3999
3993 3995
4009 3982
4030 3993
3991 3989
3982 4021
3982 4037
4023 4004
3997 4019
3994 4019
4031 4011
4023 3997
4030 4014
3992 4017
3981 3998
3997 4018
4009 4030
3994 4018
3995 4000
4023 4014
4000 4026
4027 4038
4027 4002
4027 4020
4030 4017
4031 4038
4009 3981
4000 4021
3986 4030
3985 4014
3994 4030
3998 4021
3994 4009
3982 4023
4023 4009
3998 4019
4014 3986
4020 4031
4009 4023
3994 3997
3993 3985
4017 3986
4011 594
3995 3985
3981 4023
3995 3988
3997 4030
3997 4021
4030 3997
4000 3992
3996 3994
4038 3989
4029 4001
3989 594
4025 4016
4023 4034
3993 4004
4030 4019
4030 3988
3994 3996
4026 4017
4016 3990
4031 3991
4000 4030
3998 4014
4009 3998
4004 4013
4000 3995
4016 4025
3990 4016
3999 4005
4004 4023
4002 4020
3998 4018
4011 3989
4003 3982
4021 3982
4002 3998
4031 4020
3985 3995
3988 3985
3989 3991
4000 4017
4003 4009
3997 3981
3982 4030
3982 3994
3998 4005
3995 4014
4021 4030
4005 3998
4023 3998
594 4011
3993 4030
4020 4030
3989 4038
3989 4011
4019 3994
4030 4020
4009 4019
4004 4020
3995 4026
4023 3981
4020 4002
4014 3985
4017 4026
3989 4013
4038 4023
4023 4002
4020 4037
3998 4002
4013 3989
3995 4023
4021 3988
3983 4017
4004 3993
4021 4000
3999 4036
4026 4019
4033 3986
4023 3995
3982 3997
3998 3981
3990 4007
3985 3988
4018 3981
4018 4030
4025 3990
4026 4030
4021 3997
3997 4023
4031 594
3996 4028
3982 3988
4012 3987
4021 4017
3988 4030
4013 4023
4025 4007
4014 4021
4030 4004
4014 4037
3986 4021
4017 4021
3982 4009
4016 4007
3998 4023
3998 4009
4007 3990
594 3989
4009 3997
3992 4000
4011 4031
3986 3982
4019 4030
4020 4038
4020 4004
4021 4014
4023 3982
4017 4000
3997 3998
3993 3988
4030 3994
4023 4038
4004 4031
4027 4031
4014 4038
3986 4000
4019 3997
3982 4003
3986 4033
4030 4003
4030 4018
3981 3994
4004 4038
4009 4003
3985 3993
4000 4033
4013 4038
4018 4023
4036 3999
4003 4030
4019 4009
4030 4023
4026 4021
4019 3981
3990 4025
4023 4018
4021 3986
4030 4009
3986 4026
4038 4020
4014 3995
3996 4002
4031 4004
4001 4029
4038 4013
4014 4030
4020 4027
3988 3982
3998 3994
3982 3998
4033 4000
3988 3993
4002 4031
3998 3997
3988 3995
4037 3982
3994 3982
4018 3994
3986 4014
4003 4023
4037 4014
4026 3995
3981 4019
3999 3998
3997 4009
4026 4000
4014 4023
4004 4030
4038 4027
4006 4027
594 4031
4007 4025
4038 4004
3981 4018
3981 3997
4023 4013
3982 4026
4014 4017
4009 3994
3991 4031
4000 3986
3994 3981
4018 3998
3987 4012
4019 3998
4030 4026
4007 4016
4030 4000
4017 4014
3995 4004
3997 3982
4014 3998
4017 4030
4002 4023
3994 4023
4004 3985
4026 3982
4034 4023
4030 3982
4023 3994
4002 3996
3982 4014
3981 4009
4021 4026
4030 3986
4013 4031
4026 3986
4027 4006
4030 4021
3986 4017
4017 3992
4038 4031
4031 4023
4031 4027
4002 4027
4031 4013
4028 3996
3985 4004

cleanededges.csv

edgecleaner.py

import csv


file = open('/Users/Aren/Documents/Homework/Spring2018/DataVis/p5/Assignment2/cleaning/facebook/3980.edges','r')

outfile = open('/Users/Aren/Documents/Homework/Spring2018/DataVis/p5/Assignment2/data/cleanededges.csv','w')

writer = csv.writer(outfile)

lines = file.readlines()

for line in lines:
    vertices = line.rstrip().lstrip().split(" ")
    for i in range(0,len(vertices)-1):
        vertices[i] = int(vertices[i])
    verticesArray = [vertices]
    writer.writerows(verticesArray)
    


outfile.close()
    
        
        
   

forcedirected.js

var edges;
var numVertices;
var area;
var vertices;
function preload(){

	table = loadTable('cleanededges.csv');
}


function setup(){
	createCanvas(800,800);

	var w = 800;
	var l = 800;
	edges = [];
	vertices = {};
	numVertices = 0;
	for(var r = 0; r<table.getRowCount();r++){
		var v1 = table.getNum(r,0);
		var v2 = table.getNum(r,1);
		edges[r] = [v1,v2];
		if(v1 in vertices){

		}
		else{
			var randx = random(0,w);
			var randy = random(0,l);
			var array = [randx,randy,0,0];
			vertices[v1] = array;
			numVertices++;
		}
		if(v2 in vertices){

		}
		else{
			var randx = random(0,w);
			var randy = random(0,l);
			var array = [randx,randy,0,0];
			vertices[v2] = array;
			numVertices++;
		}
	}


	

}


function draw(){
	clear();
	area = 800*800;
	var k = sqrt(area/numVertices);
	var t = 800;
	var w = 800;
	var l = 800;

	for(var i =0;i<edges.length;i++){
		var x1 = vertices[edges[i][0]][0];
		var y1 = vertices[edges[i][0]][1];
		var x2 = vertices[edges[i][1]][0];
		var y2 = vertices[edges[i][1]][1];
		fill(0,0,255);
		ellipse(x1,y1,5,5);
		ellipse(x2,y2,5,5);
		fill(0,0,0);
		line(x1,y1,x2,y2);

		var d1 = dist(mouseX,mouseY,x1,y1);

		if(d1<5){
			fill(0,0,255);
			text("Node "+edges[i][0],x1,y1-10);
		}

	}



	for(var j=0;j<50 ;j++){
		for(key in vertices){

			vertices[key][2] = 0;
			vertices[key][3] = 0;

			for(key2 in vertices){
				if(!(key==key2)){

					var keyposX = vertices[key][0];
					var key2posX = vertices[key2][0];
					var keyposY = vertices[key][1];
					var key2posY = vertices[key2][1];
					var distanceX = keyposX - key2posX;
					var distanceY = keyposY - key2posY;

				if(distanceX!=0 ){
					vertices[key][2] = vertices[key][2] + ((distanceX/Math.abs(distanceX))*repulsion(Math.abs(distanceX)));

				}

				if(distanceY!=0){
					vertices[key][3] = vertices[key][3] + ((distanceY)/Math.abs(distanceY)*repulsion(Math.abs(distanceY)));
				}
				}

				

			}		
		}
		//calculate attractive forces
		for(var m = 0;m<edges.length;m++){

			
			var posx1 = vertices[edges[m][0]][0];
			var posy1 = vertices[edges[m][0]][1];
			var posx2 = vertices[edges[m][1]][0];
			var posy2 = vertices[edges[m][1]][1];
			var distx = posx1 - posx2;
			var disty = posy1 - posy2;


			

			
		if(distx!=0){
			vertices[edges[m][0]][2] = vertices[edges[m][0]][2] - ((distx/Math.abs(distx))*attraction(Math.abs(distx)));
			vertices[edges[m][1]][2] = vertices[edges[m][1]][2] + ((distx/Math.abs(distx))*attraction(Math.abs(distx)));
		
			}

			if(disty!=0){
				vertices[edges[m][0]][3] = vertices[edges[m][0]][3] - ((disty/Math.abs(disty))*attraction(Math.abs(disty)));
				vertices[edges[m][1]][3] = vertices[edges[m][1]][3] + ((disty/Math.abs(disty))*attraction(Math.abs(disty)));


			}
		
		}

		//limit max displacement to temperature t and prevent from displacement outside frame
		for(key in vertices){
			
			
			vertices[key][0] = vertices[key][0] + (vertices[key][2]/Math.abs(vertices[key][2]));
			vertices[key][1] = vertices[key][1] + (vertices[key][3]/Math.abs(vertices[key][3]));

		

		

			vertices[key][0] = min(w-10,max(10,vertices[key][0]));
			vertices[key][1] = min(w-10,max(10,vertices[key][1]));

			


		}

		

 }



}


function attraction(x){
	area = 800*800;
	var k = sqrt(area/numVertices)
	var toReturn = pow(x,2)/k;
	return (x*x)/k;
}

function repulsion(x){
	
	area = 800*800;
	var k = sqrt(area/numVertices);

	var toReturn = pow(k,2)/x;
	
	return (k*k)/x;

}

index.html

<!DOCTYPE html>
<html>
  <head>
    <script
    src = "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
    <script src ="forcedirected.js"></script>
  </head>
  <body>
  </body>
</html>