lightning-import-test

matrix.js

var d3 = require('d3');
var inherits = require('inherits');

var margin = {
    top: 20,
    right: 20,
    bottom: 20,
    left: 45
};

var Matrix = function(selector, data, images, opts) {

    var width = $(selector).width() - margin.left - margin.right;
    var height = 500 - margin.top - margin.bottom;

    var matrix = [];
    var nodes = data.nodes;
    var n = nodes.length;
    var color = d3.scale.category10().domain(d3.range(10));
    
    var x = d3.scale.ordinal().rangeBands([0, Math.min(width, height)]);

    var zrng = d3.extent(data.links, function(d) {
            return d.value;
        });
    var z = d3.scale.linear().domain([zrng[0], zrng[1]]).clamp(true);

    nodes.forEach(function(node, i) {
        node.index = i;
        matrix[i] = d3.range(n).map(function(j) { return {x: j, y: i, z: 0}; });
    });

    data.links.forEach(function(link) {
        matrix[link.source][link.target].z = link.value;
    });


    //x.domain(d3.range(n))
    x.domain(d3.range(n).sort(function(a, b) { return nodes[b].group - nodes[a].group; }));

    var zoom = d3.behavior.zoom()
        .scaleExtent([0.1, 20])
        .translate([(margin.left + (width / 2) - Math.min(width, height)/2), 0])
        .on('zoom', zoomed);

    var svg = d3.select(selector)
        .append('svg:svg')
        .attr('class', 'matrix')
        .attr('width', width + margin.left + margin.right)
        .attr('height', height + margin.top + margin.bottom)
        .attr('pointer-events', 'all')
        .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
        .call(zoom)
        .append('svg:g')
        .attr('transform', 'translate(' + (margin.left + (width / 2) - Math.min(width, height)/2)  + ', 0)');

    svg.selectAll('.row')
        .data(matrix)
        .enter().append('g')
        .attr('class', 'row')
        .attr('transform', function(d, i) { return 'translate(0,' + x(i) + ')'; })
        .each(function(row) {
            d3.select(this).selectAll('.cell')
                .data(row.filter(function(d) { return d.z; }))
                .enter().append('rect')
                .attr('class', 'cell')
                .attr('x', function(d) { return x(d.x); })
                .attr('width', x.rangeBand())
                .attr('height', x.rangeBand())
                .style('fill-opacity', function(d) { return z(d.z); })
                .style('fill', function(d) { return nodes[d.x].group === nodes[d.y].group ? color(nodes[d.x].group) : null; });
        });


    svg.selectAll('.column')
        .data(matrix)
        .enter().append('g')
        .attr('class', 'column')
        .attr('transform', function(d, i) { return 'translate(' + x(i) + ')rotate(-90)'; });

    function zoomed() {
        svg.attr('transform', 'translate(' + d3.event.translate + ')' + ' scale(' + d3.event.scale + ')');
    }

};


module.exports = Matrix;

sample-data.json

[{
    "name": "simple matrix data",
    "data": {"nodes":[{"group":0},{"group":0},{"group":0},{"group":0}],"links":[{"source":0,"target":0,"value":22},{"source":0,"target":1,"value":2},{"source":0,"target":2,"value":3},{"source":0,"target":3,"value":4},{"source":1,"target":0,"value":5},{"source":1,"target":1,"value":6},{"source":1,"target":2,"value":7},{"source":1,"target":3,"value":8},{"source":2,"target":0,"value":9},{"source":2,"target":1,"value":10},{"source":2,"target":2,"value":11},{"source":2,"target":3,"value":12},{"source":3,"target":0,"value":13},{"source":3,"target":1,"value":14},{"source":3,"target":2,"value":15},{"source":3,"target":3,"value":16}]}
}]