Visualizing the Cayley Graph Database

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 ‘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>
    <!-- Load the KeyLines file -->
    <script src="keylines.js" type="text/javascript"></script>
    <!-- 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 -->
      let chart;            // This will store a reference to our KeyLines chart object

      async function startKeyLines() {
        // Store a reference to the KeyLines chart object
        chart = await KeyLines.createChart('chartID');

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

        // Load the chart with the newly defined nodes and links
          type: 'LinkChart',
      // Helper function to add a new node definition to our chart items array
      function addNode(nodeId, nodeTitle, colour) {
        return {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) {
        return {a2: directional, c: colour, id: `${nodeId1}-${nodeId2}`, id1: nodeId1, id2: nodeId2, t: linkTitle, type: 'link'};

      window.onload = startKeyLines;

Step 3: Call Cayley from KeyLines

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

async function callCayleyAPI(query) { 
  const resp = await fetch(cayleyPath, { method: 'POST', body: query });
  const json = await resp.json()
  return translateItemsToKeyLines(json);

function translateItemsToKeyLines(list) {
  const nodes = => createNode(item));
  const links = => createLink(item));
  return [...nodes, ...links];

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.on('double-click', expandClickedData);

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

async function expandClickedData({id}) {
 if (id) {
   const item = chart.getItem(id);
   const query = … // prepare your query here

   // collect nodes from the REST API
   const items = callCayleyAPI(query);
   await loadItems(items)

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

// bind UI events once the chart is created
document.getElementById('layoutButton').addEventListener('click', layout);

async function layout() {
    await chart.layout('organic');

…A popover menu on hover (using Mustache):

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

function popover({id}) {
  if (id) {
    const tooltip = document.getElementById('tooltip');
    const item = chart.getItem(id);
    const {x, y} = chart.viewCoordinates(item.x, item.y);

    if (item.type === 'node') {
      // Create the HTML code that is going to fill the tooltip
      const html = Mustache.to_html(document.getElementById('tt_html').innerHtml, {
        director: item.d.director
      // Add it to the DOM
      document.getElementById('tooltip-container').innerHtml = html;
      const top = y - tooltip.height() / 2; = x; = top;

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:

Register for a free trial

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.

More from our blog

Visit our blog

Registered in England and Wales with Company Number 07625370 | VAT Number 113 1740 61 | 6-8 Hills Road, Cambridge, CB2 1JP. All material © Cambridge Intelligence 2020.