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.
forked from emeeks's block: Adjacency Matrix Layout
xxxxxxxxxx<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><div id="viz"> <svg> </svg></div><div id="controls" /></body> <footer><script>d3.json("miserables.json", createAdjacencyMatrix);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