wk7

what we can see with this chart, is that some states are more interconnected than others. By being able to stretch and pull out different elements, we can also see which ones are tied to what element directly. This might be very useful when we are trying to draw out some path of travel, or coorelation between the interconnected states.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }

.node {
  stroke: #fff;
  stroke-width: 1.5px;
}

.link {
  stroke: #999;
  stroke-opacity: .6;
}

</style>
</head>

<body>
  <script>
    var data = [
["AL","FL"],["AL","GA"],["AL","MS"],["AL","TN"],["AR","LA"],["AR","MO"],["AR","MS"],["AR","OK"],["AR","TN"],["AR","TX"],["AZ","CA"],["AZ","NM"],["AZ","NV"],["AZ","UT"],["CA","NV"],["CA","OR"],["CO","KS"],["CO","NE"],["CO","NM"],["CO","OK"],["CO","UT"],["CO","WY"],["CT","MA"],["CT","NY"],["CT","RI"],["DC","MD"],["DC","VA"],["DE","MD"],["DE","NJ"],["DE","PA"],["FL","GA"],["GA","NC"],["GA","SC"],["GA","TN"],["IA","IL"],["IA","MN"],["IA","MO"],["IA","NE"],["IA","SD"],["IA","WI"],["ID","MT"],["ID","NV"],["ID","OR"],["ID","UT"],["ID","WA"],["ID","WY"],["IL","IN"],["IL","KY"],["IL","MO"],["IL","WI"],["IN","KY"],["IN","MI"],["IN","OH"],["KS","MO"],["KS","NE"],["KS","OK"],["KY","MO"],["KY","OH"],["KY","TN"],["KY","VA"],["KY","WV"],["LA","MS"],["LA","TX"],["MA","NH"],["MA","NY"],["MA","RI"],["MA","VT"],["MD","PA"],["MD","VA"],["MD","WV"],["ME","NH"],["MI","OH"],["MI","WI"],["MN","ND"],["MN","SD"],["MN","WI"],["MO","NE"],["MO","OK"],["MO","TN"],["MS","TN"],["MT","ND"],["MT","SD"],["MT","WY"],["NC","SC"],["NC","TN"],["NC","VA"],["ND","SD"],["NE","SD"],["NE","WY"],["NH","VT"],["NJ","NY"],["NJ","PA"],["NM","OK"],["NM","TX"],["NV","OR"],["NV","UT"],["NY","PA"],["NY","VT"],["OH","PA"],["OH","WV"],["OK","TX"],["OR","WA"],["PA","WV"],["SD","WY"],["TN","VA"],["UT","WY"],["VA","WV"]
]
 
var groupMaps = new Object();
var nodes = new Object();
var links = new Object();

var jsonObject = {
  nodes : [],
  links: []
}

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
    
 var jsonGoodies = JSON.stringify(jsonObject)
 data = JSON.parse(jsonGoodies)
  
  force
      .nodes(data.nodes)
      .links(data.links)
      .start();

var link = svg.selectAll(".link")
      .data(data.links)
    .enter().append("line")
      .attr("class", "link")
      .style("stroke-width", function(d) { return Math.sqrt(4); });

var node = svg.selectAll(".node")
      .data(data.nodes)
    .enter().append("circle")
      .attr("class", "node")
      .attr("r", 5)
      .style("fill", function(d) { return color(d.group); })
      .call(force.drag);
   
  console.log("we came here")

node.append("title")
      .text(function(d) { return d.name; });

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>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js