VI7 Adjacency matrix

###Adjacency matrix

Insights

Each cell in the matrix determines a connection between the states.
The matrix is symmetric about the diagonal.
Ordering based on names makes it easy to figure out connections in alphabetical order
Ordering based on number of connections makes it easy to figure out states with most and least connecctions.
Ordering based on Clusters/Groups that is regions in this case can identify all states within the region together on the matrix.

<!DOCTYPE html>
<html class="ocks-org ">
<meta charset="utf-8">
<style>
@import url(style.css);
.background {
  fill: #efefef;
}
line {
  stroke: #fff;	
}
text.active {
  fill: blue;
}
</style>
<script src="//d3js.org/d3.v2.min.js" charset="utf-8"></script>

<body>
<h2 align="center">Adjacency matrix between contiguous US states</h2>
<div style="margin-top:80px;align="center";">
<p >Order by: 
<select id="order">
  <option value="name"> Name</option>
  <option value="count">Connections</option>
  <option value="group">Group</option>
</select>
</p>
</div>

nodes.forEach(function(node, i) {
    node.index = i;
    node.count = 0;
    matrix[i] = d3.range(n).map(function(j) { return {x: j, y: i, z: 0}; });
  });
  // Convert links to matrix; count character occurrences.
  regions.links.forEach(function(link) {
    matrix[link.source][link.target].z += link.value;
    matrix[link.target][link.source].z += link.value;
   // matrix[link.source][link.source].z += link.value;
    //matrix[link.target][link.target].z += link.value;
    nodes[link.source].count += link.value;
    nodes[link.target].count += link.value;
  });
  // Precompute the orders.
  var orders = {
    name: d3.range(n).sort(function(a, b) { return d3.ascending(nodes[a].name, nodes[b].name); }),
    count: d3.range(n).sort(function(a, b) { return nodes[b].count - nodes[a].count; }),
    group: d3.range(n).sort(function(a, b) { return nodes[b].group - nodes[a].group; })
  };
  // The default sort order.
  x.domain(orders.name);
  svg.append("rect")
      .attr("class", "background")
      .attr("width", width)
      .attr("height", height);
  var row = svg.selectAll(".row")
      .data(matrix)
    .enter().append("g")
      .attr("class", "row")
      .attr("transform", function(d, i) { return "translate(0," + x(i) + ")"; })
      .each(row);
  row.append("line")
      .attr("x2", width);
  row.append("text")
      .attr("x", -6)
      .attr("y", x.rangeBand() / 2)
      .attr("dy", ".32em")
      .attr("text-anchor", "end")
      .text(function(d, i) { return nodes[i].name; });
  var column = svg.selectAll(".column")
      .data(matrix)
    .enter().append("g")
      .attr("class", "column")
      .attr("transform", function(d, i) { return "translate(" + x(i) + ")rotate(-90)"; });
  column.append("line")
      .attr("x1", -width);
  column.append("text")
      .attr("x", 6)
      .attr("y", x.rangeBand() / 2)
      .attr("dy", ".32em")
      .attr("text-anchor", "start")
      .text(function(d, i) { return nodes[i].name; });
  function row(row) {
    var cell = d3.select(this).selectAll(".cell")
        .data(row.filter(function(d) { return d.z; }))
      .enter().append("rect")
        .attr("class", "cell")
        .attr("x", function(d) { return x(d.x); })
        .attr("width", x.rangeBand())
        .attr("height", x.rangeBand())
        .style("fill-opacity", function(d) { return z(d.z); })
        .style("fill", function(d) { return nodes[d.x].group == nodes[d.y].group ? c(nodes[d.x].group) : null; })
        .on("mouseover", mouseover)
        .on("mouseout", mouseout);
  }
  function mouseover(p) {
    d3.selectAll(".row text").classed("active", function(d, i) { return i == p.y; });
    d3.selectAll(".column text").classed("active", function(d, i) { return i == p.x; });
  }
  function mouseout() {
    d3.selectAll("text").classed("active", false);
  }
  d3.select("#order").on("change", function() {
    clearTimeout(timeout);
    order(this.value);
  });
  function order(value) {
    x.domain(orders[value]);
    var t = svg.transition().duration(2500);
    t.selectAll(".row")
        .delay(function(d, i) { return x(i) * 4; })
        .attr("transform", function(d, i) { return "translate(0," + x(i) + ")"; })
      .selectAll(".cell")
        .delay(function(d) { return x(d.x) * 4; })
        .attr("x", function(d) { return x(d.x); });
    t.selectAll(".column")
        .delay(function(d, i) { return x(i) * 4; })
        .attr("transform", function(d, i) { return "translate(" + x(i) + ")rotate(-90)"; });
  }
  var timeout = setTimeout(function() {
    order("group");
    d3.select("#order").property("selectedIndex", 2).node().focus();
  }, 5000);
});
</script>

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

https://www.google-analytics.com/analytics.js