Visualizing the Cayley Graph Database

3rd July, 2014

Google dove deeper into the world of graphs last week with their release of Cayley – a new open source graph database.

For those of us who can’t get enough of graphs (and graph databases) this is an exciting development.

Google have been strong advocates of the power of graphs for some time, but the release of a new database technology backed by the Internet giant can only further increase the visibility of this emerging field.

But how can we visualize Cayley? The Cayley database already has a visualization component, but it has limited functionality at the moment.

We thought we’d set our new Software Development Intern, Romain, the challenge of building a better Cayley visualization app with KeyLines (on day two of his internship!). Just a day later, he came back with a fully functioning Cayley visualization application. Here’s how he did it.

An introduction to Cayley

Cayley is a graph database. This means it’s specifically optimized to hold connected, network data. Instead of data being held as a series of tables, it’s stored in a graph model with index-free adjacency.

For network visualization tools like KeyLines, it’s a perfect fit. Users can expect high performance, lower latency and aren’t held back by the restrictions of a fixed schema.

A few more Cayley characteristics include:

  • It’s written in Go – meaning it has awesome performance
  • It has a RESTful API
  • It’s uses a ‘Gremlin-inspired’ query language
  • It works with multiple backend stores, like LevelDB or MongoDB

The KeyLines / Cayley architecture

The architecture for a KeyLines application based on Cayley is pretty simple:

KeyLines and Cayley
  • Users interact with their KeyLines chart in a web browser
  • If an interaction, e.g. click, right-click, hover, etc., requires new data to be added to the chart, a database query is raised. This is generated by KeyLines in the form of an AJAX request.
  • The AJAX request parsed to a Cayley query, which is sent to the Cayley database
  • Cayley returns the data as a JSON object which is sent back to KeyLines
  • KeyLines renders the data in the browser, using the HTML5 Canvas element or a WebGL renderer.

How to visualize the Cayley Graph Database with KeyLines

Step 1: Install Cayley

This is really straightforward. There’s step-by-step instructions that we found quick and easy to follow:

Step 2: Install KeyLines

Download the KeyLines files from the SDK site (contact us for access) then install them on your web server.

Create a simple HTML page with references to the KeyLines files and the KeyLines component in a <div>. Again, step-by-step instructions for doing this are available in the KeyLines SDK.

To give some idea of how it works, here’s a simple KeyLines “hello world”:

<!DOCTYPE html>
<html>
  <head>
    <!-- Load the KeyLines file -->
    <script src="keylines.js" type="text/javascript"></script>

    <!-- Other libraries we want to use, e.g. jQuery -->
    <script src="jquery.js" type="text/javascript"></script>    
  </head>
  <body>
    <!-- This is the HTML element that will be used to render the KeyLines component -->
    <div id="chartID" style="width: 400px; height: 300px;" ></div>
     
    <!-- This is the actual code to load KeyLines in the page -->
    <script>
      var myChart;            // This will store a reference to our KeyLines chart object
      var myChartItems = [];  // This array will store our node and link definitions

      // wait until the fonts are loaded to start
      $(window).load(function () {
        
        // Set the path for the assets
        KeyLines.setCanvasPaths(‘assets/’);
         
        //load the component: specify the id and callback
        KeyLines.createChart('chartID', chartReady);
      });
         
      function chartReady (err, chart) {
        // Store a reference to the KeyLines chart object
        myChart = chart;

        // Use our helper functions to add the node and link definitions
        addNode('id1', 'Hello','#B9121B');
        addNode('id2', 'World','#B9121B');
        addLink('id1', 'id2', '', '#4C1B1B', false);

        // Load the chart with the newly defined nodes and links
        myChart.load({
          type: 'LinkChart',
          items: myChartItems
        });
      }  
 
      // Helper function to add a new node definition to our chart items array
      function addNode(nodeId, nodeTitle, colour){
        myChartItems.push({c: colour, id: nodeId, t: nodeTitle, type: 'node',x: 100, y: 100
            });
      }

      // Helper function to add a new link definition to our chart items array
      function addLink(nodeId1, nodeId2, linkTitle, colour, directional){
        myChartItems.push({a2: directional, c: colour, id: nodeId1 + '-' + nodeId2,
              id1: nodeId1, id2: nodeId2, t: linkTitle, type: 'link'
            });
      }
    </script>
  </body>
</html>

Step 3: Call Cayley from KeyLines

Now we have our Cayley instance and KeyLines component running, we just need to call the data:

  function callCayleyAPI(query, callback) { 

  $.post(cayleyPath, {q: query}).done(function (json) {
      json = jQuery.parseJSON(json);
      translateItemsToKeyLines(json.result, callback);
    });
}

function translateItemsToKeyLines(list, callback) {
  var items = [];
  $.each(list, function (index, item) {

    items.push(createNode(item));
    items.push(createLink(item));
  });

  callback(items);
}

Step 4: Style your data

Now we have the data in KeyLines, we need to add some functionality to help users make sense of it.

First of all, double-click a node to expand its connections:

  // Bind chart events once the chart is created
chart.bind('dblclick', expandClickedData);

function loadItems(items, callback){

 // Load and layout nicely new items
 chart.expand(items, {fit: true, animate: true, tidy: true}, callback);
}

function expandClickedData(clickedID, x, y) {

 if (clickedID) {

   var item        = chart.getItem(clickedID);
   var query = … // prepare your query here

   // update the cayley query text
   updateQueryText(query);

   // collect nodes from the REST API
   callCayleyAPI(query, loadItems);
 }
}

… Add an automated structural layout to show the structures in our data:

// bind UI events once the chart is created
$('#layoutButton').click(layout);

function layout() {
    chart.layout('standard', {fit: true, animate: true, tidy: true});
}

…A popover menu on hover (using Mustache):

// Bind chart events once the chart is created
chart.bind('hover', popover);

function popover(id, x, y, sub) {
}

And we’re done!

In under a day, Romain was able to install Cayley, get started with the KeyLines toolkit and build an entire functioning application. It looks nice too.

Want to try it for yourself?

Request a free trial of the KeyLines SDK to get started building your own application for visualizing the Google Cayley Graph Database:

Try KeyLines!

Double-click on any node to call its connections from the database
Hover on any node for more information.
Run structural layouts to rearrange your expanded data into a convenient format.
Inspect the queries each time you expand a node or hover.

| |

Subscribe to our newsletter

Get occasional data visualization updates, stories and best practice tips by email