D3 Examples - Redo Matrix

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 {
    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>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    d3.json('alumni_data.json', function(error,data){ 
      console.log(data, error);
      createAdjacencyMatrix(data)
    });
    function createAdjacencyMatrix(data) {
      console.log(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.id);
​
    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.source.degree * 0.8);
​
    d3.select('#adjacencyG')
      .call(adjacencyMatrix.xAxis);
​
    d3.select('#adjacencyG')
      .call(adjacencyMatrix.yAxis);
  }
​
  </script>
​
​
    