Visualizing your Titan graph database: An update

16th June, 2016

titan-340x220Last summer, we wrote a blog with our five simple steps to visualizing your Titan graph database with KeyLines. Since then TinkerPop has emerged from the Apache Incubator program with TinkerPop3, and the Titan team have released v1.0 of their graph database:

  • TinkerPop3 is the latest major reincarnation of the graph proje­­­ct, pulling together the multiple ventures into a single united ecosystem.
  • Titan 1.0 is the first stable release of the Titan graph database, based on the TinkerPop3 stack.

We thought it was about time we updated our five-step process, so here’s:

How to Visualize your Titan 1.0 Graph Database with KeyLines…

Step 1: Configuration

Thanks to TinkerPop3, this step is even simpler than before. Go here, download Titan 1.0 (we recommend using Titan for Hadoop 1) and install the package. The bundle includes the Gremlin Server and Gremlin Console, so no additional downloads are required.

Step 2: Loading the data

GraphSON is TinkerPop’s file format, based on JSON, for graph elements. In this tutorial we’re using a GraphSON file containing randomly generated data, but the code will work for any other GraphSON or supported format as well:

You can download our dataset, and an extended version of this guide, using the link at the end of this post.

Our first step is to start Titan, with the following commands:

$ cd titan-1.0.0-hadoop1 && ./bin/ start
Forking Cassandra...
Running `nodetool statusthrift`... OK (returned exit status 0 and printed string "running").
Forking Elasticsearch...
Connecting to Elasticsearch ( OK (connected to
Forking Gremlin-Server...
Connecting to Gremlin-Server ( OK (connected to
Run to connect.

Once Titan has started, start your Gremlin console and enter…

$ ./bin/
        (o o)
plugin activated: aurelius.titan
plugin activated: tinkerpop.server
plugin activated: tinkerpop.utilities
plugin activated: tinkerpop.hadoop
plugin activated: tinkerpop.tinkergraph

This will activate the required TinkerPop plugins. Next, we need to connect to the Gremlin graph server to load our dataset…

gremlin> :remote connect tinkerpop.server conf/remote.yaml
==>Connected - localhost/
gremlin> :>'path/to/graph.json')
==> null
gremlin> :> g.E().count()
==> 9138
Step 3: Configure the Gremlin Server

By default, the Gremlin server uses a WebSocket channel, which is great for real-time or data streaming scenarios. If this configuration works best for you, skip this step.

If you do not need WebSockets, or if you are migrating from an old version of Titan & Rexster, you’ll need to follow these steps to adjust the configuration:

  1. Shutdown Titan
    $ ./bin/ stop
  2. Edit the configuration file
    // Use vim or any other editor you like
    $ vim ./conf/gremlin-server/gremlin-server.yaml
  3. Change the channelizer value from WebSocketChannelizer to HttpChannellizer
  4. Save and exit
  5. Restart Titan
    $ ./bin/ start
Step 4: Call the Gremlin Server

Option A – WebSockets

If you are using the default WebSockets configuration, you can call the Gremlin server using the following four steps:

  1. Download the Gremlin-JavaScript module and build the browser version of the library. If you’re using a tool like Browserify or Webpack, make sure you require the library in your app and skip the next step.
  2. Include the gremlin.js file in your HTML page, just before your app.js file:
// Put the gremlin.js file here just before your app code
  1. Setup the Gremlin Server client on top of your app code:
var client = gremlin.createClient();
  1. Now add a function to use the client object to query the database:
function gremlinQuery(query, params){

 return new Promise( function(resolve, reject){

   client.execute(query, params, function(err, results){

       return reject(err);
     return resolve(results);

function expandChart( callback ){
var queryString = “g.V().hasLabel(accident).inE(involvedIn).outV().hasLabel(vehicle)”;
gremlinQuery(queryString, {accident: "accident", involvedIn: "involved in", vehicle: "vehicle"})
     // Print the result here
     // Create the KeyLines items from the returned items
     fromTitanToKeyLines( items, callback );

Option B – REST Endpoint

If you are planning to use HTTP calls to the REST Endpoint, you can find instructions in our full guide. See the link at the end of this post to download a copy.

Step 5: Load the data into KeyLines

The final step is to run some code that submits a Gremlin query to load your Titan data into the KeyLines chart. This would look like this:

	function fromTitanToKeyLines(items, callback) {

 var klItems = [];
 $.each(items, function (i, item){
   var klItem;
   if(item._type === ‘vertex’){
     klItem = createNode(item);
   } else {
     klItem = createLink(item);

  // now load it with a nice animation
 chart.expand(klItems, {tidy: true, animate: true}, callback);

And that’s it! By this point, you should see a KeyLines chart pulling data from your Titan database.

Visualize your Titan 1.0 graph database

Our getting started tutorial provides step-by-step instructions on how to build a visualization component for your Titan Graph Database, using the KeyLines SDK.

Subscribe to our newsletter

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