Matrix diagram

A matrix diagram of Les Miserables characters colored and ordered by their communities (determined using Louvain modularity). Darker colors indicate more interactions between characters, and light gray cells indicate no interaction.

In comparison with node-link diagrams, which can become inscrutable hairballs with dense networks, matrix diagrams can be simpler and easier to read. However, this is highly dependent on the row and column ordering, and it is difficult to follow paths connecting nodes. Furthermore, a matrix diagram of a graph with hundreds or thousands of nodes can be difficult to fit on one screen and still be able to read the row and column labels.

forked from rpgove's block: Matrix diagram

<!DOCTYPE html>
<meta charset="utf-8">
<style>

svg {
  font: 10px sans-serif;
}

.label {
  fill: #999;
  font-size: 8px;
  text-anchor: end;
}

.column .label {
  text-anchor: start;
}

rect {
  fill: #eee;
  stroke: #d62333;
  stroke-width: 0;
}

rect:hover {
  stroke-width: 1px;
}

</style>
<svg></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var margin = {
  top: 170,
  right: 0,
  bottom: 0,
  left: 170
};

var width = 800 - margin.left - margin.right;
var height = 800 - margin.top - margin.bottom;

var color = d3.scaleOrdinal(["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#bcbd22", "#17becf"]);
var opacity = d3.scaleLinear()
  .range([0.5, 1])
  .clamp(true);

var x = d3.scaleBand()
  .rangeRound([0, width])
  .paddingInner(0.1)
  .align(0);

var svg = d3.select('svg')
  .attr('width', width + margin.left + margin.right)
  .attr('height', height + margin.top + margin.bottom)
  .append('g')
  .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

d3.json('data.json', function (error, graph) {
  if (error) throw error;
	console.log(graph.links)
  var idToNode = {};

graph.nodes.forEach(function (n) {
    n.degree = 0;
    idToNode[n.id] = n;
  }); 
	console.log(graph.nodes);
  graph.links.forEach(function (e) {
    e.source = idToNode[e.source];
    e.target = idToNode[e.target];
  });

graph.nodes.sort(function (a, b) {
    console.log(a,b)
    if (b.community != a.community)
      return b.community - a.community;
    else
      return b.degree - a.degree;
  });
  console.log(graph.nodes);
  x.domain(d3.range(graph.nodes.length));

opacity.domain([0, d3.max(graph.links, function (d) { return d.betweenness_centrality * 20; })]);

graph.links.forEach(function (l) {
    matrix[l.source.index][l.target.index].val = l.betweenness_centrality * 20;
    matrix[l.target.index][l.source.index].val = l.betweenness_centrality *20;
  });
// 	console.log(matrix);
  var row = svg.selectAll('g.row')
    .data(matrix)
    .enter().append('g')
    .attr('class', 'row')
    .attr('transform', function (d, i) { return 'translate(0,' + x(i) + ')'; })
    .each(makeRow);

row.append('text')
    .attr('class', 'label')
    .attr('x', -4)
    .attr('y', x.bandwidth() / 2)
    .attr('dy', '0.32em')
    .text(function (d, i) { return graph.nodes[i].id; });

var column = svg.selectAll('g.column')
    .data(matrix)
    .enter().append('g')
    .attr('class', 'column')
    .attr('transform', function(d, i) { return 'translate(' + x(i) + ', 0)rotate(-90)'; })
    .append('text')
    .attr('class', 'label')
    .attr('x', 4)
    .attr('y', x.bandwidth() / 2)
    .attr('dy', '0.32em')
    .text(function (d, i) { return graph.nodes[i].id; });

cell.append('title')
      .text(function (d) {
        return graph.nodes[d.i].id + ' - ' + graph.nodes[d.j].id + ', degree: ' + d.val;
      });
  }

});

</script>

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