D3 Examples - adjacency matrix layout

adjacency matrix layout

to make this example, I also ported the underlying adjacency matrix layout to d3v4. find that layout at the d3-adjacency-matrix-layout project on github.

Original README.md

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 d3v3 version of the layout is here.

xxxxxxxxxx
 
<html>
<head>
  <title>d3-adjacency-matrix-layout example</title>
  <meta charset='utf-8' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js'></script>
<script src='d3-adjacency-matrix-layout.js' type='text/JavaScript'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js'></script>
</head>
<style>
  svg {
    border: 0px solid gray;
  }
  g.am-axis text {
    font-size: 8px;
  }
​
  .domain {
    fill: none;
  }
​
  .tick > line{
    stroke: black;
    stroke-width: 1px;
    stroke-opacity: 0.25;
  }
</style>
<body>
<div id='viz'>
  <svg height='960px' width='960px'></svg>
</div>
<div id='controls' />
</body>
<footer>
<script lang='babel' type='text/babel'>
d3.json('miserables.json', createAdjacencyMatrix);
​
function createAdjacencyMatrix(data) {
  const adjacencyMatrix = d3.adjacencyMatrixLayout();
  console.log('adjacencyMatrix', adjacencyMatrix);
  console.log('d3', d3);
​
  adjacencyMatrix
    .size([870,870])
    .nodes(data.nodes)
    .links(data.links)
    .directed(false)
    .nodeID(d => d.name);
​
  const matrixData = adjacencyMatrix();
​
  console.log(matrixData)
​
  const someColors = d3.scaleOrdinal()
    .range(d3.schemeCategory20b);
​
  d3.select('svg')
    .append('g')
      .attr('transform', 'translate(80,80)')
      .attr('id', 'adjacencyG')
      .selectAll('rect')
      .data(matrixData)
      .enter()
      .append('rect')
        .attr('width', d => d.width)
        .attr('height', d => d.height)
        .attr('x', d => d.x)
        .attr('y', d => d.y)
        .style('stroke', 'black')
        .style('stroke-width', '1px')
        .style('stroke-opacity', .1)
        .style('fill', d => someColors(d.source.group))
        .style('fill-opacity', d => d.weight * 0.8);
​
  d3.select('#adjacencyG')
    .call(adjacencyMatrix.xAxis);
​
  d3.select('#adjacencyG')
    .call(adjacencyMatrix.yAxis);
}
</script>
</footer>
</html>
    