adjacency matrix

forked from jwilber's block: adjacency matrix

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    const margin = {top: 25, bottom: 25, left: 250, right: 25};
    const width = 960 - margin.right - margin.left;
    const height = 800 - margin.top - margin.bottom;
    const svg = d3.select('body').append('svg')
    							.attr('width', width + margin.right + margin.left)
    							.attr('height', height + margin.top + margin.bottom)
    							.append('g')
    							.attr("id", "adjacencyG")
                  .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
    
      var PromiseWrapper = d => new Promise(resolve => d3.csv(d, p => resolve(p)));
      
      Promise
        .all([
          PromiseWrapper("nodelist.csv"),
          PromiseWrapper("edgelist.csv")
        ])
        .then(resolve => {
          createAdjacencyMatrix(resolve[0], resolve[1]);
        });
      
      function createAdjacencyMatrix(nodes, edges) {
        var edgeHash = {};
        edges.forEach(edge => {
          var id = `${edge.source}-${edge.target}`;
          edgeHash[id] = edge;
        });
        
        var matrix = [];
        nodes.forEach((source, a) => {
          nodes.forEach((target, b) => {
            var grid = {
              id: `${source.id}-${target.id}`,
              x: b,
              y: a,
              weight: 0
            };
            if (edgeHash[grid.id]) {
              grid.weight = edgeHash[grid.id].weight;
            }
            matrix.push(grid);
          });
        });
        
        d3.select("svg")
          .append("g")
            .attr("transform", "translate(50,50)")
            .attr("id", "adjacencyG")
          .selectAll("rect")
          .data(matrix)
          .enter()
          .append("rect")
            .attr("class", "grid")
            .attr("width", 25)
            .attr("height", 25)
            .attr("x", d => d.x * 30)
            .attr("y", d => d.y * 30)
            .style("fill-opacity", d => d.weight * .2);
        
        d3.select("svg")
          .append("g")
            .attr("transform", "translate(50,45)")
          .selectAll("text")
          .data(nodes)
          .enter()
          .append("text")
            .attr("x", (d,i) => i * 30 + 12.5)
            .text(d => d.id)
            .style("text-anchor", "middle");
        
        d3.select("svg")
          .append("g")
            .attr("transform", "translate(45,50)")
          .selectAll("text")
          .data(nodes)
          .enter()
          .append("text")
            .attr("y", (d,i) => i * 30 + 12.5)
            .text(d => d.id)
            .style("text-anchor", "end");
        
        
        d3.selectAll("rect.grid").on("mouseover", gridOver);
        function gridOver(d) {
          d3.selectAll("rect")
            .style("stroke-width", function (p) {
              return p.x == d.x || p.y == d.y ? "3px" : "1px";
            });
        }
      }
    
    </script>
</body>

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