D3 Examples - SNA Graph

xxxxxxxxxx
 
<!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;
​
        var simulation = d3.forceSimulation()
        .force("link", d3.forceLink().id(function(d) {
        return d.id; }))
        .force('charge',
                d3.forceManyBody().strength(-200)
            )
//      .force("center", d3.forceCenter(width / 2, height / 2));
    
        .force('center', d3.forceCenter(width / 2, height / 2))
      .force('y', d3.forceY(0))
      .force('x', d3.forceX(0));
    function nodeByName(name) {
         return nodesByName[name] || (nodesByName[name] = {name: name});
    }
    var nodesByName = {};
    d3.queue()
      .defer(d3.csv, "nodes_viz.csv")
      .defer(d3.csv, "edges_viz2.csv")
      .await(function(error, file1, file2) {
          if (error) {
              console.error('Oh dear, something went wrong: ' + error);
          }
          else {
                var nodes = {};
                file2.forEach(function(link) {
                            
                if (Object.keys(link).length === 0) { 
                  
                } else {
                  
​
                  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);
​
        function ticked() {
          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(" + 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>
​
    