Adjacency Matrix Layout

A simple D3 layout that creates an adjacency matrix. In an adjacency matrix, unlike an arc diagram or a force-directed layout, the links are not lines and the nodes are not circles (or other icons). Instead, all nodes are shown across the x and y axes, and a link is indicated by a filled grid cell where the connected nodes meet.

The layout also includes helper functions to draw the x and y axes to label the nodes.

The most current version of the layout is here.

<html>
<head>
  <title>D3 in Action Chapter 6 - Example 1</title>
  <meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="d3.layout.adjacencyMatrix.js" type="text/JavaScript"></script>
</head>
<style>
  svg {
    height: 1400px;
    width: 1400px;
    border: 1px solid gray;
  }
  g.am-axis text {
    font-size: 8px;
  }

.domain {
    fill: none;
  }

.tick > line{
    stroke: black;
    stroke-width: 1px;
    stroke-opacity: .25;
  }

</style>
<body>

function createAdjacencyMatrix(data) {

var adjacencyMatrix = d3.layout.adjacencyMatrix()
  .size([800,800])
  .nodes(data.nodes)
  .links(data.links)
  .directed(false)
  .nodeID(function (d) {return d.name});

var matrixData = adjacencyMatrix();

console.log(matrixData)

var someColors = d3.scale.category20b();

d3.select("svg")
  .append("g")
  .attr("transform", "translate(50,50)")
  .attr("id", "adjacencyG")
  .selectAll("rect")
  .data(matrixData)
  .enter()
  .append("rect")
  .attr("width", function (d) {return d.width})
  .attr("height", function (d) {return d.height})
  .attr("x", function (d) {return d.x})
  .attr("y", function (d) {return d.y})
  .style("stroke", "black")
  .style("stroke-width", "1px")
  .style("stroke-opacity", .1)
  .style("fill", function (d) {return someColors(d.source.group)})
  .style("fill-opacity", function (d) {return d.weight * .8});

d3.select("#adjacencyG")
  .call(adjacencyMatrix.xAxis);

d3.select("#adjacencyG")
  .call(adjacencyMatrix.yAxis);

}
</script>
  </footer>

</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js