Start a KeyLines trial

To follow this tutorial, you’ll need a KeyLines evaluation account.

Request a trial account

What is the DataStax Enterprise (DSE) Graph?

It’s a graph feature that adds a collection of graph tools to the powerful Cassandra backend. It was launched with DataStax Enterprise 5.0.

DSE Graph is a scale-out OLTP graph database that manages complex and highly connected data. It is designed for enterprise cloud applications that need a high performance back-end that can handle very large volumes of complex and evolving graph data. It also delivers continuous uptime and predictable performance. It is great at discovering commonalities and anomalies among dynamic and constantly changing datasets.

DSE Graph uses TinkerPop3 and Gremlin, so existing open source Titan database applications should migrate relatively seamlessly. The DSE Graph bundle comes with the Gremlin Server and Console, so you don’t need to download them separately.

You can read our guide on migrating from TinkerPop2 to TinkerPop3 here.

Before you start migrating, you must start the DSE Graph server. For more information, see DataStax’s documentation here.

Visualization Architecture

KeyLines is a database agnostic visualization solution. The graph format of DSE Graph makes it a particularly suitable back-end option. The architecture of a DSE Graph visualization application built with KeyLines looks like this:

The standard architecture of a KeyLines-DSE Graph visualization application
The standard architecture of a KeyLines-DSE Graph visualization application

The simplest way to visualize the DSE Graph with KeyLines is using the bundled TinkerPop interface. In this scenario the KeyLines files are hosted on a web server and presented to users in the web browser.

Every time a user interacts with nodes and links on their KeyLines chart, they query the DSE Graph database. Queries are sent to TinkerPop using WebSockets, and data is returned as JSON objects for KeyLines to visualize.

How to visualize the DSE Graph

Step 1: Configure the DSE Graph & loading data

Configure your DSE Graph and then load your data. For details on how to do this, see the DataStax documentation.

Step 2: Connect to the Gremlin Server

By default, the Gremlin server uses the WebSocket channel. This makes it ideal for real-time or data streaming scenarios, but as it has a custom sub-protocol, it is unlikely to work in its default state.

Drivers already exist for many different languages. There’s a client library for JavaScript and NodeJS called gremlin-javascript. It uses new ES2015/ES6 features including JavaScript Promises (better flow control) and template strings (for easier-to-read Gremlin query generation).

To use the gremlin-javascript library in your browser, follow their instructions first, and then include the resulting gremlin.js file in the HTML page.

<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>

In the app file, create an alias:

  { aliases:
    { g: ‘test.g’

Connect to the Gremlin server and start the WebSocket channel:

var client = gremlin.createClient();

Use a function to send Gremlin queries to the DSE Graph:

function gremlinQuery(query, params){
 return new Promise( function(resolve, reject){
   client.execute(query, params, function(err, results){
       return reject(err);
     return resolve(results);
// This line needs to be edited to suit your specific Gremlin query
gremlinQuery(“g.V().has(‘name’, name)”, {name: ‘Joe’})
   // Print the result here
   // Create the KeyLines items from the returned items
   fromDSEToKeyLines( items, callback );

Step 3: Parse the results into KeyLines’ JSON format

To display our graph, KeyLines needs the data in its own JSON format. We can write a fromDSEtoKeyLines function to create a JSON object of nodes and links that KeyLines can recognize:

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

Step 4: Load the graph in KeyLines

The final step is to load the data in our KeyLines chart:

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

And that’s it! You’ll see a KeyLines chart that can pull data from your Datastax DSE Graph database.

Next steps: Extending the UI

Go to the KeyLines SDK site and click the Demos tab. In the Integrations section, select the DataStax Integration demo. It shows KeyLines running with DataStax on the back-end. To see the application’s code to help you get started with your project, click View Source Code.

The KeyLines-DataStax integration sample demo, available to download from the KeyLines SDK website.
The KeyLines-DataStax integration sample demo, available to download from the KeyLines SDK website.

Using the demo, and KeyLines’ fully documented API, as your starting point you can start creating tools to help your users explore and understand the data in their own DSE Graph databases.

Accessing the KeyLines SDK site

Complete this form to request an evaluation account for the KeyLines SDK website.

From the blog

Solving distributed graph problems with DataStax

We caught up with Denise Gosnell, Senior Manager and Head of Global Graph Practice at DataStax, to talk about graph challenges, graph visualization, and what the future holds.

A night at the Oscars with KeyLines and Stardog

This blog post shows how quick and easy it is to integrate Stardog with KeyLines using Academy Awards data.

Visualizing TED Talks data with Memgraph

Find out how to integrate the KeyLines graph visualization toolkit with the Memgraph database, our latest technology alliance partner.

Visit the blog