Interactive Graph Visualization Using D3.js – ggraph

Category: Chart & Graph , Javascript , Recommended | January 2, 2017
Author: pcbje
Views Total: 156
Official Page: Go to website
Last Update: January 2, 2017
License: MIT


Interactive Graph Visualization Using D3.js – ggraph


ggraph is an interaction 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="//"></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 = {
      {"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.


Render the graph inside the container.


Merge date:

// Merge selected

// Into single group
ggraph.merge(['Maria West', 'Sheldon Roy']);

// Into several groups
  ['A', 'B'],
  ['C', 'D']

Split nodes:

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

Remove nodes:

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