Matrix Graph

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src='d3-adjacency-matrix-layout.js' type='text/JavaScript'></script>
  <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>

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 + ')');
    var graph = {}
    d3.queue()
      .defer(d3.csv, "nodes_viz.csv")
      .defer(d3.csv, "edges_viz2.csv")
      .await(function(error, file1, file2) {
          if (error) {
              console.error('Oh dear, something went wrong: ' + error);
          }
          else {
            	
            	createAdjacencyMatrix(file1, file2);

}
    });
    function firstAttempt(file1, file2) {
      graph['nodes'] = file1;
            	graph['links'] = file2;
            	var idToNode = {};

graph.nodes.forEach(function (n, key) {
                n.degree = 0;
                idToNode[n.Name] = n;
              });
            	console.log(graph, idToNode);
            	graph.links.forEach(function (e) {
                e.source = idToNode[e.source];
                e.target = idToNode[e.target];
//                 console.log(e)
                e.source.degree++;
                e.target.degree++;
              });
            	x.domain(d3.range(graph.nodes.length));

opacity.domain([0, d3.max(graph.links, function (d) { 
                return d.degree; })]);
            	
            	var matrix = graph.nodes.map(function (outer, i) {
              outer.index = i;
              return graph.nodes.map(function (inner, j) {
                return {i: i, j: j, val: i === j ? inner.degree : 0};
              });
            });

graph.links.forEach(function (l) {
              matrix[l.source.index][l.target.index].val = l.degree;
              matrix[l.target.index][l.source.index].val = l.degree;
            });
            console.log(graph.links);
            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].Name; });

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

}
    function createAdjacencyMatrix(nodes,edges) {
      var edgeHash = {};
      for (x in edges) {
        var id = edges[x].source + "-" + edges[x].target;
        edgeHash[id] = edges[x];
      }
      console.log(edgeHash)
      matrix = [];
      //create all possible edges
      nodes.forEach(function (n, key){
        n.id =key
      })
      for (a in nodes) {
        for (b in nodes) {
          console.log(nodes[a], b)
          var grid = {id: nodes[a].id + "-" + nodes[b].id, x: b, y: a, weight: 0};
          if (edgeHash[grid.id]) {
            grid.weight = edgeHash[grid.id].weight;
          }
          matrix.push(grid);
        }
      }
      console.log(matrix);
    }
		  </script>
</body>

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