D3 Examples - Matrix Graph

xxxxxxxxxx
 
<!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>
​
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<svg></svg>
<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    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 + ')');
    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; });
​
            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].Name; });
            
            function makeRow(rowData) {
    var cell = d3.select(this).selectAll('rect.cell')
      .data(rowData)
      .enter().append('rect')
      .attr('class', 'cell')
      .attr('x', function (d, i) { return x(i); })
      .attr('width', x.bandwidth())
      .attr('height', x.bandwidth())
      .style('fill-opacity', function (d) { return d.val > 0 ? opacity(d.val) : 1; })
      .style('fill', function (d) {
        if (d.val > 0)
          return color(graph.nodes[d.i].degree);
        else if (d.val > 0)
          return '#555';
        return null;
      })
      .on('mouseover', function (d) {
        row.filter(function (_, i) { return d.i === i; })
          .selectAll('text')
          .style('fill', '#d62333')
          .style('font-weight', 'bold');
        column.filter(function (_, j) { return d.j === j; })
          .style('fill', '#d62333')
          .style('font-weight', 'bold');
      })
      .on('mouseout', function () {
        row.selectAll('text')
          .style('fill', null)
          .style('font-weight', null);
        column
          .style('fill', null)
          .style('font-weight', null);
      });
​
    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>
​
    