D3 Examples - Adjacency Matrix Example

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <title>Adjacency Matrix Layout</title>
    <style>
        svg {
            width: 1250px;
            height: 850px;
            border: 1px solid gray;
        }
​
        g.am-axis text {
            font-size: 8px;
        }
​
        .domain {
            fill: none;
        }
​
        .tick > line{
            stroke: black;
            stroke-width: 1px;
            stroke-opacity: .25;
        }
​
    </style>
</head>
<body>
    <svg></svg>
    <script src="https://d3js.org/d3.v3.min.js" type="text/JavaScript"></script>
    <script src="adjacency_matrix.js"></script>
    <script>
        var svg = d3.select('svg');
​
        d3.json('data.json', function(err, data) {
            var adjacencyMatrix = d3.layout.adjacencyMatrix()
            .size([1200, 800])
            .nodes(data.nodes)
            .links(data.links)
            .directed(false)
            .nodeID(function(d) {return d.name;});
​
            var matrixData = adjacencyMatrix();
​
            var colorScale = d3.scale.category20b();
            svg.append('g')
            .attr('transform', 'translate(' + 50 + ',' + 50 + ')')
            .attr('id', 'adjacencyG')
            .selectAll('rect')
            .data(matrixData)
            .enter().append('rect')
            .attr('x',  function(d) {return d.x;})
            .attr('y', function(d) {return d.y;})
            .attr('width', function(d) {return d.width;})
            .attr('height', function(d) {return d.height;})
            .style('stroke', 'black')
            .style('stroke-width', '1px')
            .style('stroke-opacity', .1)
            .style('fill', function(d) {return colorScale(d.source.group);})
            .style('fill-opacity', function(d) {return d.weight * .8;})
​
​
            d3.select('#adjacencyG')
            .call(adjacencyMatrix.xAxis)
            .call(adjacencyMatrix.yAxis);
        });
    </script>
</body>
</html>
    