VI7 Matrix

##Juliette Pardue
##Insight The matrix is very sparse, so most states only have a few neighbors.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			svg {
				border:1px solid black;
			}
      
      line {
        stroke: #fff;
			}
      
      .background {
  			fill: #eee;
			}
      
      text.active {
  			fill: red;
			}
		</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 margin = {top: 50, right: 10, bottom: 10, left: 50};
			var width = 700;
			var height = 700;

var x = d3.scale.ordinal().rangeBands([0, width]);

var svg = d3.select("body").append("svg")
				.attr("width", width + margin.left + margin.right)
				.attr("height", height + margin.top + margin.bottom)
				.style("margin-left", -margin.left + "px")
				.append("g")
				.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.json("neighbors.json", function(neighbors) {
				var matrix = [];
				var nodes = neighbors.nodes;
				var n = nodes.length;

nodes.forEach(function(node, i) {
  				node.index = i;
  				matrix[i] = d3.range(n).map(function(j) { return {x: j, y: i, z: 0}; });
  			});
  
  			neighbors.links.forEach(function(link) {
  				matrix[link.source][link.target].z = 1;
  				matrix[link.target][link.source].z = 1;
  			});
  
    		var order = d3.range(n).sort(function(a, b) { 
      		return d3.ascending(nodes[a].name, nodes[b].name); 
    		});
    		x.domain(order);
  
    		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].abb; });
  
        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].abb; });
  
        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", "blue")
              .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);
        }
      });
		</script>
	</body>
</html>

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

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