Student vices

README.md

This is my first foray in d3. It's a force directed graph representing correlations amongst college students' vices. Thicker bands represent stronger correlations, and larger nodes represent larger proportions of student partaking in that vice. More info found on my blog.

force.json

{
"nodes":
	[
	{"group":"SkipClass","size":108},
	{"group":"FakeID","size":150},
	{"group":"CheatedPartner","size":222},
	{"group":"SmokeCig","size":95},
	{"group":"SmokedMJ","size":368},
	{"group":"CheatedExam","size":93},
	{"group":"LowGPA","size":53},
	{"group":"MedGPA","size":548},
	{"group":"HighGPA","size":299}
	],
"links":
	[
	{"cor":0.69259,"source":0,"target":1},
	{"cor":0.7358,"source":0,"target":2},
	{"cor":0.85945,"source":1,"target":2},
	{"cor":0.72443,"source":0,"target":3},
	{"cor":0.47864,"source":1,"target":3},
	{"cor":0.569,"source":2,"target":3},
	{"cor":0.85114,"source":0,"target":4},
	{"cor":0.82728,"source":1,"target":4},
	{"cor":0.8481,"source":2,"target":4},
	{"cor":1,"source":3,"target":4},
	{"cor":0.72841,"source":0,"target":5},
	{"cor":0.71436,"source":1,"target":5},
	{"cor":0.65598,"source":2,"target":5},
	{"cor":0.74432,"source":3,"target":5},
	{"cor":0.61797,"source":4,"target":5},
	{"cor":0.56937,"source":0,"target":6},
	{"cor":0.47771,"source":1,"target":6},
	{"cor":0.70632,"source":2,"target":6},
	{"cor":0.38034,"source":3,"target":6},
	{"cor":0.48189,"source":4,"target":6},
	{"cor":0.38575,"source":5,"target":6},
	{"cor":0.61241,"source":0,"target":7},
	{"cor":0.49707,"source":1,"target":7},
	{"cor":0.39016,"source":2,"target":7},
	{"cor":0.66394,"source":3,"target":7},
	{"cor":0.54786,"source":4,"target":7},
	{"cor":0.52096,"source":5,"target":7},
	{"cor":0,"source":0,"target":8},
	{"cor":0.16532,"source":1,"target":8},
	{"cor":0.16182,"source":2,"target":8},
	{"cor":0.041092,"source":3,"target":8},
	{"cor":0.11061,"source":4,"target":8},
	{"cor":0.18652,"source":5,"target":8}
	]
}

force.R

library(RJSONIO)
data<-read.csv('student.csv')

## clean data
data$low<-ifelse(data$GPA<2.5,2,1)
data$med<-ifelse(data$GPA<3.5&data[,1]>=2.5,2,1)
data$high<-ifelse(data$GPA>=3.5,2,1)
data<-data[,-1]
data$FakeID<-as.numeric(data$FakeID)
data$ChtdSO<-as.numeric(data$ChtdSO)
data$SmokeCig<-as.numeric(data$SmokeCig)
data$SmokedMJ<-as.numeric(data$SmokedMJ)
data$ChtdExam<-as.numeric(data$ChtdExam)
data$SkipClass<-ifelse(data$SkipClass<1,0,data$SkipClass)

## create links json out of correlations between groups
cor.data<-data.frame(cor(data))
temp<-cor.data[upper.tri(cor.data)]
d<-data.frame(temp)[-c(35,36,28),]
upper<-(d-min(d))/(max(d)-min(d))

## if this list was longer, I would have automated this
links<-list(c(cor=upper[1],source=0, target=1),
           c(cor=upper[2],source=0, target=2),
           c(cor=upper[3],source=1,target= 2),
           c(cor=upper[4],source=0, target=3),
           c(cor=upper[5],source=1,target= 3),
           c(cor=upper[6],source=2,target= 3),        
           c(cor=upper[7],source=0,target= 4),
           c(cor=upper[8],source=1, target=4),
           c(cor=upper[9],source=2,target= 4),
           c(cor=upper[10],source=3, target=4),
           c(cor=upper[11],source=0,target= 5),
           c(cor=upper[12],source=1, target=5),
           c(cor=upper[13],source=2,target= 5),
           c(cor=upper[14],source=3, target=5),
           c(cor=upper[15],source=4,target= 5),
            c(cor=upper[16],source=0,target= 6),
            c(cor=upper[17],source=1, target=6),
            c(cor=upper[18],source=2,target= 6),
            c(cor=upper[19],source=3, target=6),
            c(cor=upper[20],source=4,target= 6),
            c(cor=upper[21],source=5,target= 6),
            c(cor=upper[22],source=0,target= 7),
            c(cor=upper[23],source=1, target=7),
            c(cor=upper[24],source=2,target= 7),
            c(cor=upper[25],source=3, target=7),
            c(cor=upper[26],source=4,target= 7),
            c(cor=upper[27],source=5,target= 7),   
            c(cor=upper[28],source=0,target= 8),
            c(cor=upper[29],source=1, target=8),
            c(cor=upper[30],source=2,target= 8),
            c(cor=upper[31],source=3, target=8),
            c(cor=upper[32],source=4,target= 8),
            c(cor=upper[33],source=5,target= 8))

json<-toJSON(links,.escapeEscapes=FALSE,pretty=TRUE)
write.table(json,file='links.txt')

## create nodes size
count.data<-apply(data,2,function(x){ifelse(x>1,1,0)})
size<-apply(count.data,2,sum)

nodes<-list()
for (i in c(1:length(size))){
  row<-list(c(group=names(size)[i],size=size[[i]]))
  nodes<-append(nodes,row)
}

json<-toJSON(nodes,.escapeEscapes=FALSE,pretty=TRUE)
write.table(json,file='nodes.txt')

index.html

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style>
  
div.tooltip {   
 position: absolute;           
 text-align: right;
 z-index:9999;
 width: 6px;                  
 height: 18px;                 
 padding: 15px;             
 font: 15px sans-serif;        
 background: transparent;   
 pointer-events: none;         
}
  
.link {
 stroke: #ddd;
 stroke-opacity: 0.8;
 fill: none;
}
 
.node{
 stroke-width: 0.5px;
}
 
</style>
<body>

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

<script>
 
// initialize variables
var width = 800,
   height = 600;
 
var color = d3.scale.category20();
 
var force = d3.layout.force()
   .charge(-100)
   .theta(1.5)
   .gravity(0.05)
   .linkDistance(function(d){return(150*(1+d.cor)^2);})
   .size([width, height])
   .friction(0.9)
   .start();
 
// set SVG container size
var svg = d3.select("body").append("svg")
   .attr("width", width)
   .attr("height", height);
 
var tooltip = d3.select("body").append("div")   
   .attr("class", "tooltip")   
   .style("font-size","15px");
  
d3.json("force.json", function(json) {
	
	force
	.nodes(json.nodes)
	.links(json.links)
	.start();

	// link thickness is determined by correlation between nodes
	// link is highlighted when you hover over it
	var link = svg.selectAll(".link")
     .data(json.links)
     .enter()
     .append("line")
     .attr("class", "link")
     .style("stroke-width", function(d) { return(5*(1+d.cor)^2); })
     .on('mouseover', function(d){
        return d3.select(this)
                  .style({stroke:'red'})
                  .style({opacity:'0.5'});
      })
     .on('mouseout', function(d){
       return d3.select(this)
                .style({stroke:'ddd'})
                .style({opacity:'1.0'});
      });


// create node SVG elements and bind node data from the json file
var node = svg.selectAll(".node")
     .data(json.nodes)
     .enter().append("g")
	 .attr("class", "node")
     .call(force.drag);

 // make nodes into circles and set radius, color
 // nodes become transparent when you hover over
 node.append("circle")
     .data(json.nodes)
     .attr("r",function(d){
       return d.size/15;
     })
     .style("fill",function(d){
       return color(d.group);
     })
     .style("opacity",0.8)
     .on('mouseover', function(d){
       d3.select(this).style({opacity:'1.0'})
         .transition()
         .duration(750)
         .attr("r",function(d){return d.size/10;});
       
       tooltip.transition().duration(100).style("opacity", .9);
      
       tooltip.html(d)
         .style("left", (d3.event.offsetX) + "px")
         .style("top", (d3.event.offsetY - 28) + "px")
         .text(d.group);
      })
     .on("mousemove", function(d){
       tooltip.html(d)
         .style("left", (d3.event.pageX) + "px")
         .style("top", (d3.event.pageY - 28) + "px")
         .text(d.group);    
     })
     .on('mouseout', function(d){
       d3.select(this).style({opacity:'0.8'})
         .transition()
         .duration(300)
         .attr("r",function(d){return d.size/15;});

     })
     .call(force.drag);  
 
 	// link coordinates
	force.on("tick",function(){
		
		link.attr("x1", function(d) { return d.source.x; })
		    .attr("y1", function(d) { return d.source.y; })
	            .attr("x2", function(d) { return d.target.x; })
	            .attr("y2", function(d) { return d.target.y; });
	            
	        node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
	
	});
});
 
</script>
</html>

thumbnail.png