score:2

Accepted answer

Our goal is to load your CSV and convert into a JSON structure expected by force Directed graph d3.

To do this:

  //load your CSV via ajax as below
  d3.csv("my.csv", function(json) {
  //load the csv as json
  //array of nodes
  var nodes = [];
  /array of links
  var links = [];
  json.forEach(function(d){
    //check if node is present if not add that in the array to get unique nodes.
    if (nodes.indexOf(d.Source.trim()) <0){
      //sorce node not there so add
      nodes.push(d.Source.trim())
    }
    if (nodes.indexOf(d.Target.trim()) <0){
      //target node not there so add
      nodes.push(d.Target.trim())
    }
    //link to map the nodes with its index.
    links.push({source:nodes.indexOf(d.Source.trim()), target:nodes.indexOf(d.Target.trim())})
  });
  nodes = nodes.map(function(n){
    return {name:n}
  })
  //now the usual code for force graph.

Now feed the nodes and links to the Force directed graph.

working code here


Related Query

More Query from same tag