Directed graph matrix visualization using JS

Question

I tried to visualize a directed graph to matrix using protovis matrix. By default protovis matrix fills 2 blocks in matrix if A->B. I want to fill only one block as per the direction between 2 nodes. If A->b and B->A then only both blocks should be filled.

I dint find any documentation for that. Can I do this using some protovis settings?

Answer 1

Well!! I spent couple of hours to make my own HTML table matrix.

data.nodedetail.forEach(function(node){
    table += "<tr><td>"+ node.title + "</td>";
    var emptycols ="";
    i++;
    for(j=0;j<i;j++){
        emptycols += "<td></td>";
    }
    if(i!=size){ emptycols += "<td colspan='"+ (size - j) +"'>"+node.title+"</td>";}
    table += emptycols + "</tr>";
});

table = "<table>"+ table + "</table>";

$("#panel").append(table);
i=1;
data.nodedetail.forEach(function(node){
    i++;
    $('table tr:nth-child('+ i +')').addClass(node.id);
    $('table tr td:nth-child('+ i +')').addClass(node.id);
});

Later own I got to know that I can achieve it by just setting directedgraph property of protovis matrix, to true