Goals This article reviews the different tools available for visualizing graph-based data. Prerequisites You should have familiarized yourself with Graph Databases and the Property Graph Model. Beginner Overview Screencast: The Neo4j Browser Presentation: SVG-Based Graph Interaction Library: Alchemy.js Open Source… Learn More →

This article reviews the different tools available for visualizing graph-based data.
You should have familiarized yourself with Graph Databases and the Property Graph Model.

Graph visualisations are a powerful tool to convey the content of a graph. They can highlight patterns, and show clusters and connections. There are many excellent options for graph visualization, such as D3.js, three.js, sigma.js and Alchemy.js. A few of the more popular graph-visualization methods are discussed below.

In all cases, the visualizer request JSON data for all or part of the graph data then dynamically creates an in-memory JavaScript visualization on the client side.

Screencast: The Neo4j Browser

The default Neo4j Server has a powerful, customizable data visualization tool based on the built-in D3.js library.

In the screencast, we demonstrate how to style nodes and relationships in the Neo4j’s Browser visualization, and how to set colors, sizes, and titles. We then discuss the Graph-Style-Sheet (GRASS) and how you can download, update, and reset the styling information.

Presentation: SVG-Based Graph Interaction

seening pattern in data

In this talk, Alistair Jones builds a very powerful graph web editing tool based on SVG, suited for easy integration into modern HTML frameworks.

Library: Alchemy.js Open Source Graph Visualization

As you’ve just seen, preparing, converting and rendering graph data with plain D3 force layout involves a bit of work. The open-source Alchemy.js library replaces this effort with a few lines of configuration. It uses the GraphJSON format for interaction which is easier to handle than the raw D3 JSON format. Alchemy.js is mostly configuration based but can also be customized with javascript functions. It supports custom styling, highlighting, hoover effects, clustering and interactive exploration.

Here is a simple example of using Alchemy.js to render a simple graph:

<script src="http://cdn.graphalchemist.com/alchemy.min.js"></script>
<script type="text/javascript">
        dataSource: "actors.json",
        nodeCaption: 'name',
        nodeMouseOver: 'name',
        cluster: true,
        clusterColours: ["#1B9E77","#D95F02","#7570B3","#E7298A","#66A61E","#E6AB02"]})

alchemy example

Product: Linkurious Graph Visualization

Linkurious is a browser based graph exploration and navigation tool. It integrates with the Neo4j backend, indexes nodes and relationships for fast facetted search. Besides graph navigation it supports also graph editing and Cypher query execution.

Linkurious uses Neo4j’s graph database technology to offer you an easy solution to store, search and visualize graphs. You can start navigating inside your graph database. Search for properties, inspect nodes, and explore their relationships visually in your web browser. find any node in your database easily thanks to our built-in search engine. You can simply modify, add and remove nodes or relationships. You can also customize what is displayed, how the data is indexed.

mac2 w500 vid

Linkurious.js Visualization Library

The underlying javascript-toolkit is available as an open-source library called linkurious.js

It uses Sigma.js for its graph data structure and visualization engine, which provides both Canvas, WebGL and SVG renderers for nodes and relationships. The linkurious.js toolkit is made of more than 30 Sigma.js plugins, combined to work together and tested for integration into modern Web applications.

Product: Tom Sawyer Perspectives

Tom Sawyer Perspectives 6.0 offers Cypher support for Neo4j graph databases and connects them to the broad visualization capabilities of the tool. Tom Sawyer Perspectives is integrated with the latest Neo4j version for easy visualization of complex results.

Product: Keylines Neo4j Graph Visualization

cambridge intelligence time bar

KeyLines is an out-of-the-box JavaScript solution for visualizing networks. It works in all major browsers and all platforms, including the iPad.

KeyLines integrates into existing web applications easily and with very little effort. How and where you get the data is up to you. KeyLines does the job of rendering it and responding to user interactions like clicking, touching, moving nodes, and more. You bind to these events to customize what happens, and, most importantly, your data stays under your control at all times: KeyLines is self-contained and needs no external connections.

HowTo: Graph Visualization Step By Step

If you want to get started directly, here are the few steps you have to take to convert Neo4j’s graph query results into the format typically needed by the visualization libraries. This approach is also used in the example project which we implemented for each of the languages and drivers listed. You can find the appropriate transformation code for your language and stack there.

Target JSON Datastructure

They visualization toolkits usually expect a JSON structure of node objects (their id, label(s) and properties) and a list of relationships (their properties, start- and end-node-id (or node-array-index for d3) and optionally relationship-id) like this. Here we see 3 nodes (2 people, one database) and 3 relationships in that datastructure.

 "links":[{source:0, target:1, type:"KNOWS", since:2010},{source:0, target:2, type:"FOUNDED"},
          {source:1, target:2, type:"WORKS_ON"}]}

Graph Rendering Javascript Code

To render this list with D3, you just need the d3.js library dependency and a few lines of javascript.

  var width = 800, height = 800;
  // force layout setup
  var force = d3.layout.force()
          .charge(-200).linkDistance(30).size([width, height]);

  // setup svg div
  var svg = d3.select("#graph").append("svg")
          .attr("width", "100%").attr("height", "100%")
          .attr("pointer-events", "all");

  // load graph (nodes,links) json from /graph endpoint
  d3.json("/graph", function(error, graph) {
if (error) return;


      // render relationships as lines
      var link = svg.selectAll(".link")
              .append("line").attr("class", "link");

      // render nodes as circles, css-class from label
      var node = svg.selectAll(".node")
              .attr("class", function (d) { return "node "+d.label })
              .attr("r", 10)

      // html title attribute for title node-attribute
              .text(function (d) { return d.title; })

      // force feed algo ticks for coordinate computation
      force.on("tick", function() {
          link.attr("x1", function(d) { return d.source.x; })
                  .attr("y1", function(d) { return d.source.y; })
                  .attr("x2", function(d) { return d.target.x; })
                  .attr("y2", function(d) { return d.target.y; });

          node.attr("cx", function(d) { return d.x; })
                  .attr("cy", function(d) { return d.y; });

Neo4j Query Result Format

To generate the expected format from Neo4j you convert the results returned from the HTTP Cypher API endpoint. That endpoint already has an option ({"resultDataContents":["graph"]}) to return graph only results.

For instance executing this request:

:POST /db/data/transaction/commit
  {"statements":[{"statement":"MATCH path = (n)-[r]->(m) RETURN path",

results in:

var res  =
{ "results": [
      "columns": ["path"],
      "data"   : [{
          "graph": {
            "nodes": [
              {"id": "1", "labels": ["Person"], "properties": {"name": "Peter"}},
              {"id": "2", "labels": ["Person"], "properties": {"name": "Michael"}}
            "relationships": [
              {"id": "0", "type": "KNOWS", "startNode": "1", "endNode": "2", "properties": {}}
          } // , {"graph": ...}, ...
  ], "errors": []

Converting Neo4j Query Results to D3 JSON

Which can be converted to our visualization format by collecting the nodes and relationships of the different rows into two lists. Just make sure that each node is unique in the list and that the relationships refer to the array-index (not the id) of the node.

function idIndex(a,id) {
  for (var i=0;i<a.length;i++) {
    if (a[i].id == id) return i;}
  return null;
var nodes=[], links=[];
res.results[0].data.forEach(function (row) {
   row.graph.nodes.forEach(function (n) {
     if (idIndex(nodes,n.id) == null)
   links = links.concat( row.graph.relationships.map(function(r) {
     return {start:idIndex(nodes,r.startNode),end:idIndex(nodes,r.endNode),type:r.type};
viz = {nodes:nodes, links:links};

Bringing all of this together – querying Neo4j and converting the result and rendering the graph with D3 into an interactive SVG based graph layout results in a visualization like this.

movie application