D3 Examples - VI7 Matrix

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