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 →

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


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">
  alchemy.begin({
        dataSource: "actors.json",
        nodeCaption: 'name',
        nodeMouseOver: 'name',
        cluster: true,
        clusterColours: ["#1B9E77","#D95F02","#7570B3","#E7298A","#66A61E","#E6AB02"]})
</script>

alchemy example

Product: Linkurious Graph Visualization

Linkurious visualization1 e1497376040398

Product: Linkurious Enterprise

Linkurious is an on-premise graph visualization and analysis software that allows you to detect suspicious patterns, understand connections and discover new insights in your data.

Linkurious Enterprise leverages Neo4j’s graph database technology to offer you an easy solution to search, visualize, detect patterns and edit graph data. You can easily search for properties, nodes and relationships thanks to a built-in search engine or monitor specific Cypher query alerts. Linkurious also optimizes multi-users collaboration and make sharing and reporting available to teams. Linkurious is used in many different fields from fraud detection to enterprise architecture management or IT management. The solution provides a security framework compatible with the security requirements of Fortune 500 companies and government agencies.

Product: Linkurious SDK

The Linkurious SDK is a powerful toolkit to build graph visualization and analysis applications or add graph features to existing apps. The Linkurious Server REST API provides access to high-level services on top of Neo4j including data access (full text search or graph query), authentication and access rights management, alert management or visualization management (create, share, collaborate). The Ogma JavaScript graph visualizations library provides the ability to build interactive scalable graph visualization user interfaces. Display information with various graph layouts (Grid, Concentric, ForceLink, Continuous or Hierarchical) for a fast understanding of the data or customize the style (colors, icons, size, shape) to obtain easy-to-read graph visualizations.

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.

{"nodes":[{name:"Peter",label:"Person",id:1},{name:"Michael",label:"Person",id:2},
          {name:"Neo4j",label:"Database",id:3}],
 "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;

      force.nodes(graph.nodes).links(graph.links).start();

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

      // render nodes as circles, css-class from label
      var node = svg.selectAll(".node")
              .data(graph.nodes).enter()
              .append("circle")
              .attr("class", function (d) { return "node "+d.label })
              .attr("r", 10)
              .call(force.drag);

      // html title attribute for title node-attribute
      node.append("title")
              .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",
                  "resultDataContents":["graph"]}]}

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)
       nodes.push({id:n.id,label:n.labels[0],title:n.properties.name});
   });
   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