graph ex

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.node  {
        fill: #e80080;
        stroke: #404040;
        stroke-width: 2px;
    }
    /*add css for links*/
    
    .link {
      	fill: none;
        stroke: #404040;
        stroke-width: 2.72px;
    }
  
 	 .link-mouseover {
  		fill: none;
  		stroke: #666666;
  		stroke-width: 5px;
}
  
  	text {
  		font: 10px sans-serif;
  		pointer-events: none;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

// setup links
var links = [
    { source: "D3", target:"Adron Hall" },
    { source: "D3", target:"Alex Korban" },
    { source: "D3", target:"Ben Sullins" },
    { source: "D3", target:"Bernard Avenatti" },
    { source: "D3", target:"Dan Appleman" },
    { source: "D3", target:"Douglas Starnes" },
    { source: "D3", target:"Fernando Medina Corey" },
    { source: "D3", target:"Hendrik Swanepoel" },
    { source: "D3", target:"Jake Trent" },
    { source: "D3", target:"James Wilson" },
    { source: "D3", target:"Matt Baker" },
    { source: "D3", target:"Miguel Castro" },
    { source: "D3", target:"Simon Hughes" },
    { source: "D3", target:"Tommy Ryan" },
    { source: "D3", target:"Walter Quesada" },
    { source: "D3", target:"Wes Higbee" },
    { source: "D3", target:"YK Sugishita" },
];

// create empty nodes array
    var nodes = {};
    
    // compute nodes from links data
links.forEach(function(link) {
  link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
  link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
});
  
// set a width and height for our SVG
var width = 640,
    height = 480,
    margin = 100;

var force = d3.layout.force()
        .nodes(d3.values(nodes))
        .links(links)
        .size([width, height])
        .linkDistance(175)
        .charge(-425)
        .on("tick", tick)
        .start();
      
  	var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);

var link = svg.selectAll(".link")
    		.data(force.links())
  			.enter().append("line")
   		  .attr("class", "link")
    		.on("mouseover", linkMouseOver)
				.on("mouseout", linkMouseOut);; 
				
    var node = svg.selectAll(".node")
        .data(force.nodes())
        .enter().append("circle", "g")
        .attr('class', 'node')
        .attr('r', width * 0.03)
    		.call(force.drag);
    	
		node.append("circle")
        .attr("r", 8)
        .on("mouseover", mouseover)
        .on("mouseout", mouseout);

node.append("text")
        .attr("x", 12)
        .attr("dy", ".35em")
        .text(function(d) { return d.name; });
      
    // what to do 
    function tick(e) {
        
        node.attr('cx', function(d) { return d.x; })
            .attr('cy', function(d) { return d.y; });
            
            
        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; });
        
    }
    
function mouseover() {
  d3.select(this).transition()
      .duration(500)
      .attr("r", 16);
}

function mouseout() {
  d3.select(this).transition()
      .duration(500)
      .attr("r", 8);
}
  
function linkMouseOver() {
  d3.select(this)
    .attr("class", "link-mouseover");
}

function linkMouseOut() {
  d3.select(this)
    .attr("class", "link");
}

</script>

https://d3js.org/d3.v3.min.js