Interactive Graph Visualization Using D3.js – ggraph

ggraph is an interactive graph visualization library which allows you to merge, split and remove messy data using the familiar D3.js library.

How to use it:

Load the needed d3.js library in your web project.

<script src="//d3js.org/d3.v4.min.js"></script>

Download and load the ggraph’s JavaScript and CSS files as follow:

<link rel="stylesheet" href="ggraph/ggraph.min.css">
<script src="ggraph/ggraph.min.js"></script>

Create a container in which you want to place the graph.

<div id="container"></div>

Prepare your data as follows:

var graph = {
    nodes:[
      {"type": "name", "id": "elizabeth vittor"}, 
      {"type": "name", "id": "john thain (e-mail)"}, 
      {"type": "email", "id": "[email protected]"}
      ...
    ],
    links: [
      {source: "Maria West", target: "Hazel Santiago", value:100},
      {source: "Maria West", target: "Sheldon Roy"},
      {source: "Hazel Santiago", target: "Sheldon Roy"},
      ...
    ]
}

Convert the data with a valid D3 object:

converted = ggraph.convert(graph);

Initialize the ggraph.

ggraph.init('container');

Render the graph inside the container.

ggraph.draw(converted);

Merge date:

// Merge selected
ggraph.merge(selection.all());
// Into single group
ggraph.merge(['Maria West', 'Sheldon Roy']);
// Into several groups
ggraph.merge([
  ['A', 'B'],
  ['C', 'D']
]);

Split nodes:

ggraph.split(['Maria West', 'Sheldon Roy']);

Remove nodes:

ggraph.remove(['Maria West', 'Hazel Santiago']);