VI7 Matrix View

Rajyalakshmi Mukkamala

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

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

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

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