AndreaSimeone / d3-hypergraph

implement hypergraphs on D3 force layout

d3-hypergraph

d3-hypergraph is a simple implementation of Hypergraph linking using the awesome Mike Bostock's force layout. Take a look to a simple example or the reinterpretation of the classic "Lés Miserables" example.

Installing

If you use NPM, npm install d3-hypergraph. Otherwise, download the latest release.

Usage

##### d3.hypergraph([links],[nodes])

As shown by the example the function expect [links],[nodes] to be arrays of links and nodes. Since the hypergraph can connect a number of nodes that is major of 2 the link's rappresentation is coded as an array that contains sets of nodes connected by the same hypergraph: for every sets with a number of elements major of 2 the function will create a "connection node" and the links that connect the nodes of the set to the connection node. For example a proper json rappresentation of nodes connected by hypergraph is:

{
  "nodes": [
    {"id": "A"},
    {"id": "B"},
    {"id": "C"},
    {"id": "D"},
    {"id": "E"}
  ], 
  "links": [
   ["A","B","C"],
   ["C","D","E"],
   ["C","E"]
  ]
}

The data are returned through an object:

	var obj = d3.hypergraph(links,nodes);
   links = obj.links		//return all the links of our graph
   nodes = obj.nodes		//return all the nodes of the graph with the add on "connection nodes"

Is evident that, into the nodes array the connection nodes are graphically indistinguishable from the nodes of the graph but modify the graphical rappresentation is quite simple because the connection nodes are easily recognizable by their internal structure:

//generic node structure
{
  id:"A"
}
//connection node structure 
{
  id:"lnABC"
  link:"True"
}

that consent us to modify the graphical rappresentation of nodes easily:

var node = svg.selectAll(".node")
  .data(nodes.filter(function(d) { return d.id; }))
  .enter().append("circle")
  .attr("class", function(d){
   if (d.link){
     return "linknode";
   }else{
     return "node";
   }
  });