D3 Examples - VI7 Node Link

VI7 Node Link

##Juliette Pardue
##Insight

There are only three states in the Pacific Region and the only connect to other states in the Pacific Region or Mountain Region

All states in the Middle Atlantic Region are neighbors

There is no state outside of a particular region that is a neighbor to every state in a particular region

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            svg {
                overflow:hidden;
                border:1px solid black;
            }
            
      .node {
        stroke: #fff;
        stroke-width: 1.5px;
      }
​
      .link {
        stroke: #999;
        stroke-opacity: .6;
      }
        </style>
    </head>
    <body style="text-align:center;margin-top:5px;">
        <script src="https://d3js.org/d3.v3.min.js"></script>
        <script type="text/javascript">
      var width = 500;
      var height = 500;
​
      var color = d3.scale.category10();
​
      var force = d3.layout.force()
        .charge(-120)
        .linkDistance(30)
        .size([width, height]);
​
      var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);
​
      d3.json("neighbors.json", function(error, graph) {
        if(error) throw error;
​
        function mouseover(d) {
          d3.select(this).transition()
          .duration(750)
          .attr("r", 10);
        }
​
                function mouseout() {
                d3.select(this).transition()
            .duration(750)
            .attr("r", 5);
                }
        
        force
          .nodes(graph.nodes)
          .links(graph.links)
          .start();
​
        var link = svg.selectAll(".link")
          .data(graph.links)
          .enter().append("line")
          .attr("class", "link")
          .style("stroke-width", function(d) { return Math.sqrt(d.value); });
​
        var node = svg.selectAll(".node")
          .data(graph.nodes)
          .enter().append("circle")
          .attr("class", "node")
          .attr("r", 5)
          .style("fill", function(d) { return color(d.group); })
            .on("mouseover", mouseover)
                .on("mouseout", mouseout)
          .call(force.drag);
​
        node.append("title")
          .text(function(d) { 
            return d.name + " (" + d.abb + ") is in the " + d.region + " region"; 
            });
​
        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("cx", function(d) { return d.x; })
            .attr("cy", function(d) { return d.y; });
        });
            });
        </script>
    </body>
</html>
    