This page is from our blog archive
You may still find this page interesting, but there is more relevant and up-to-date blog content available, including a tutorial on integrating Titan with KeyLines.
Visualizing your Titan graph database: An update
Following TinkerPop’s emergence from the Apache Incubator program with TinkerPop3, the Titan team has released v1.0 of their graph database:
- TinkerPop3 is the latest major reincarnation of the graph project, 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/titan.sh start Forking Cassandra... Running `nodetool statusthrift`... OK (returned exit status 0 and printed string "running"). Forking Elasticsearch... Connecting to Elasticsearch (127.0.0.1:9300).... OK (connected to 127.0.0.1:9300). Forking Gremlin-Server... Connecting to Gremlin-Server (127.0.0.1:8182)..... OK (connected to 127.0.0.1:8182). Run gremlin.sh to connect.
Once Titan has started, start your Gremlin console and enter…
$ ./bin/gremlin.sh \,,,/ (o o) -----oOOo-(3)-oOOo----- plugin activated: aurelius.titan plugin activated: tinkerpop.server plugin activated: tinkerpop.utilities plugin activated: tinkerpop.hadoop plugin activated: tinkerpop.tinkergraph gremlin>
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/127.0.0.1:8182 gremlin> :> graph.io(graphson()).readGraph('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:
- Shutdown Titan
$ ./bin/titan.sh stop
- Edit the configuration file
// Use vim or any other editor you like $ vim ./conf/gremlin-server/gremlin-server.yaml
- Change the channelizer value from WebSocketChannelizer to HttpChannellizer
- Save and exit
- Restart Titan
$ ./bin/titan.sh 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:
- 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.
- Include the gremlin.js file in your HTML page, just before your app.js file:
<script src="js/keylines.js" type="text/javascript" </script>// Put the gremlin.js file here just before your app code<script src="js/gremlin.js" type="text/javascript"></script><script src="js/app.js" type="text/javascript"></script>
- Setup the Gremlin Server client on top of your app code:
var client = gremlin.createClient();
- 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){ if(err){ 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"}) .then(function(items){ // Print the result here console.log(items); // 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); } klItems.push(klItem); }); // 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.
Looking to visualize other types of graph data?
Our integrations section and graph databases data visualization page are great places to start.