SNA Graph

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<style>

.links line {
  stroke: #999;
  stroke-opacity: 0.6;
}

.nodes circle {
  stroke: #fff;
  stroke-width: 1.5px;
}
text {
  pointer-events: none;
  font: 10px sans-serif;
}

</style>
<svg width="960" height="600"></svg>
<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    radius = 5;

link.source = nodeByName(link.source);
                  link.target = nodeByName(link.target);

// Extract the array of nodes from the map by name.
                  
                  
                }
							});
            	var nodes = d3.values(nodesByName);
            	console.log(nodes, file2);
              buildGraph(nodes, file2);
          }
      });
    
   function buildGraph(nodes, edges){
     var link = svg.append("g")
      		.attr("class", "links")
    			.selectAll("line")
    			.data(edges)
    			.enter().append("line")
          .attr("stroke-width", '1');

var node = svg.append("g")
          .attr("class", "nodes")
        .selectAll("circle")
        .data(nodes)
        .enter().append("circle")
          .attr("r", 5)
          .attr("fill", 'black')
          .call(d3.drag()
              .on("start", dragstarted)
              .on("drag", dragged)
              .on("end", dragended));
        
     
     var nodeLabel = svg.append("g")
            .selectAll('text')
            .data(nodes)
            .enter().append('text')
            .attr('class', 'labels')
            .attr('dx', 12)
            .attr('dy', '.35em')
            .text(d => d.name);

simulation
            .nodes(nodes)
            .on("tick", ticked);

simulation.force("link")
            .links(edges);

node.attr("transform", function(d) { return "translate(" + Math.max(radius, Math.min(width - radius, d.x)) + "," + Math.max(radius, Math.min(height - radius, d.y)) + ")"; });
//           node.attr("cx", function(d) { return d.x = Math.max(radius, Math.min(width - radius, d.x)); })
//         .attr("cy", function(d) { return d.y = Math.max(radius, Math.min(height - radius, d.y)); });
          
          nodeLabel.attr('x', d => d.x)
            	.attr('y', d => d.y);
        }

}
   function dragstarted(d) {
        if (!d3.event.active) simulation.alphaTarget(0.3).restart();
        d.fx = d.x;
        d.fy = d.y;
      }

function dragged(d) {
        d.fx = d3.event.x;
        d.fy = d3.event.y;
      }

function dragended(d) {
        if (!d3.event.active) simulation.alphaTarget(0);
        d.fx = d.x;
        d.fy = d.y;
      }
        
    
  </script>
</body>

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