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