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

<!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>

Modified http://d3js.org/d3.v3.min.js to a secure url

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