CODEWITHSUNDEEP
d3.js
manglano
manglano

Reputation: 844

D3.js: Force-directed graph from adjacency matrix

I have an adjacency matrix stored as a CSV file. I would like to visualize the adjacency matrix as a force-directed undirected weighted graph, using D3.js. Elements of the matrix represent distances between nodes, as such:

AA,A1,A2,A3 A1,0,0.5,1 A2,0.5,0,2 A3,1,2,0

Is there a simple way to read an adjacency matrix and produce an undirected graph visualization with d3, or should this data be transformed to something more straightforward (i.e. a "source, target, weight" CSV file or a JSON graph specification)?

Upvotes: 2

Views: 2018

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109282

Assuming that the data is stored in a matrix like in you've posted, you'd get the nodes like this:

var nodes = matrix[0].slice(1);

Then you can construct the links like this:

var links = [];
nodes.forEach(function(d, i) {
  matrix[i+1].slice(1).forEach(function(e, j) {
    if(matrix[i+1][j+1] > 0) {
      links.push({source: i, target: j});
    }
  });
});

Upvotes: 1

Related Questions