D3 Examples

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.
xxxxxxxxxx
 
<!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 stateId = 0;
for (var i = 0; i < data.length; i++) {
  var firstState = data[i][0]
  var secondState = data[i][1]
  if (!(firstState in groupMaps)) {
      stateId++;
      groupMaps[firstState] = stateId
      jsonObject.nodes.push({"name":firstState,"group":stateId})
    } 
    if (!(secondState in groupMaps)) {
      stateId++;
      groupMaps[secondState] = stateId
      jsonObject.nodes.push({"name":secondState,"group":stateId})
    }
} 
 
function findStateIdByName(name) {
  return groupMaps[name];
}
  
for (var i = 0; i < data.length; i++) {
  var firstState = findStateIdByName(data[i][0]) - 1
  var secondState = findStateIdByName(data[i][1]) - 1
  jsonObject.links.push({"source":firstState,"target":secondState})
}  
 
var width = 960,height = 500;
var color = d3.scale.category20();
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);
    
 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>
​
    