D3 Examples - VI7 Matrix View

Matrix View
Insight
When ordered by region, states which are in the same region, the cells are colored closely.For example, New York ,New Jersey and Pennsylvania are in same region and colored with orange closely.
When ordered by connections, states are displayedfrom maximum to minimum number of adjacent states to a respective state are displayed
When ordered by name,we can find out the states which are adjacent to each other
xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Matrix View</title>
<style>
​
.background {
  fill: #eee;
}
​
line {
  stroke: #fff;
}
​
text.active {
  fill: red;
}
​
</style>
<script src="//d3js.org/d3.v2.min.js" charset="utf-8"></script>
​
<p>Order: <select id="order">
  <option value="name">by Name</option>
  <option value="count">by Connection</option>
  <option value="group">by Region</option>
</select>
​
​
<script>
​
var margin = {top: 80, right: 0, bottom: 10, left: 80},
    width = 720,
    height = 720;
​
var x = d3.scale.ordinal().rangeBands([0, width]),
    z = d3.scale.linear().domain([0, 4]).clamp(true),
    c = d3.scale.category20().domain(d3.range(10));
​
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("states.json", function(state) {
  var matrix = [],
      nodes = state.nodes,
      n = nodes.length;
​
  // Compute index per node.
  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.
  state.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>
​
</script>
    