Visualizing an OrientDB Graph Database with KeyLines

(1)

Visualizing an OrientDB Graph Database with KeyLines

Visualizing an OrientDB Graph Database with KeyLines 1!

Introduction 2!

What is a graph database? 2!

What is OrientDB? 2!

Why visualize OrientDB? 3!

Visualization Architecture 4!

Benefits of the KeyLines/OrientDB architecture 4!

Getting started with KeyLines 5!

Connecting your OrientDB database to KeyLines 5!

Embed KeyLines in a web page 5!

Querying your OrientDB database 7!

Parse the result into KeyLines’ JSON format 8!

Layout the graph 10!

Customize your chart 10!

Example: An OrientDB / KeyLines demo 11!

More information 13!

Who should read this white paper? This white paper is aimed at:

• Project managers and non-technical staff looking for a detailed introduction to visualizing data from an OrientDB graph database with KeyLines.

• Developers and technical staff seeking a non-technical introduction to visualizing data from an OrientDB graph database with KeyLines.

(2)

Introduction

What is a graph database?

A graph database is a type of NoSQL data store that has been optimized for highly connected data. They provide an efficient way to store graph data and are popular back-end options for applications built using the KeyLines network visualization toolkit.

Storing connected data in a flat tabular format is time and resource intensive. A graph database overcomes this limitation by storing and querying data in a graph format, i.e. as a collection of objects and relationships – usually called nodes and edges – and properties. When data is modeled in this way, we are able to traverse the graph, using a query, to obtain answers to certain questions.

You can read more about different kinds of data stores on our website:

• Graph databases - http://keylines.com/graph-databases-data-visualization • Relational databases - http://keylines.com/visualizing-relational-databases • Other NoSQL data stores - http://keylines.com/visualizing-nosql-database

What is OrientDB?

OrientDB is a document-graph database, meaning it has full native graph capabilities coupled with features normally only found in document databases. The OrientDB engine supports Graph, Document, Key/Value, and Object models, so you can use OrientDB as a replacement for a product in any of these categories. However the main reason why users choose

OrientDB is its ability to act as a true Multi-Model DBMS by combining all the features of the four models into one. A variety of different licenses are available, ranging from a free open source option to an enterprise subscription.

(3)

The OrientDB graph database includes its own graph query language (an extension of SQL), a developer workbench environment and a basic visualization tool known as the OrientDB Studio:

Figure 1: The OrientDB Studio Graph Editor, a tool for developers to visualize their data schema

Some of the reasons to choose OrientDB include: • Robustness – all transactions are fully ACID

• Multi Model DBMS – combining all the features of the four NoSQL models into one

Why visualize OrientDB?

" See patterns more clearly – the human brain can recognize and decode patterns visually much faster.

" Explore your data – visualization allows users to explore and traverse the database and gain a more meaningful understanding of their data.

" Answer questions – users can leverage visual analysis techniques (automatic layouts, filtering, SNA, the time bar, etc.) to enhance their understanding of data in their OrientDB database.

(4)

Visualization Architecture

KeyLines is a database agnostic visualization solution, but the graph format of OrientDB makes it a particularly suitable back-end option.

The architecture of an OrientDB visualization application built with KeyLines looks like this:

1. The user accesses a KeyLines chart in their web browser. Each event performed, e.g. a click, right-click, hover, etc., raises a query to the OrientDB database.

2. KeyLines raises this query as a jQuery AJAX request, which is natively translated into an OrientDB SQL query.

3. OrientDB returns the required data as a JSON object.

4. KeyLines renders the JSON data in the browser, using the HTML5 Canvas element or a Flash fallback.

Benefits of the KeyLines/OrientDB architecture

Speed – The exact speed depends on the volume of elements being called to the chart, 1.

but visualizing an OrientDB database with KeyLines is fast, even with hundreds of nodes.

Visual querying – KeyLines users can intuitively explore their data without learning any 2.

query languages.

Browser-based – KeyLines is a browser-based technology. End users do not need to 3.

install any software or plugins before they get started. Also, as graphics are rendered client side, the required bandwidth is reduced and dedicated visualization servers are not required.

(5)

Getting started with KeyLines

To login to the KeyLines SDK, you will need a free evaluation account – available from http://keylines.com/try-keylines.

Connecting your OrientDB database to KeyLines

Below we’ve summarized the generic steps that are involved to connect an OrientDB graph database to KeyLines.

Download the OrientDB server files. These are all available from 1.

http://orientdb.com/download/.

Install the OrientDB graph database as a server running on port 2480. 2.

This should be automatic, but you can test the configuration is correct by navigating to the following URL in Chrome or Firefox: http://localhost:2480/.

This should give you a login page for the GracefulDeadConcerts database. You should be able to call a REST interface running at http://

3.

localhost:2480/query/<database-name>/sql/. This is how KeyLines submits SQL queries, and how it receives the results as a JSON file.

Click on the “Import a public database” (the orange cloud icon on the top right), then 4.

fill the first two fields with “admin”, “admin” (the default administration credentials) and download the “VehicleHistoryGraph” database.

Embed KeyLines in a web page

Once you have access to the KeyLines SDK and have installed your instance of OrientDB, you can embed a KeyLines chart into your webpage. The below assumes you are using an HTML5 Canvas compatible browser, and only need our JavaScript files.

The HTML code below is 1) loading a webpage, and 2) creating a KeyLines chart object.

<!DOCTYPE html> <html>

<head>

<body>

(6)

// This will store a reference to our KeyLines chart object

var myChart;

// wait until the fonts are loaded to start

$(window).load(function () {

// Set the path for the assets

KeyLines.setCanvasPaths(‘assets/’);

//load the component: specify where (id) and the callback

KeyLines.create('chartID', chartReady); });

function chartReady (err, chart) {

// Store a reference to the KeyLines chart object

myChart = chart;

// start with a Make query: let's start from the Porsche node handleRequests('Make', 'name="Porsche"', function (items){

// Now load the data in KeyLines

chart.load({type: 'LinkChart', items: items}, layout); });

}

function handleRequests(type, criteria, callback){

// The first query retrieve the links from a given node

var query = “select expand(unionAll(bothE(),both())) from “+type + “ where “+criteria;

// Call the OrientDB HTTP endpoint and fetch all the edges

callSQL(query, function (edges) {

// Transform from the OrientDB format to the KeyLines one

var links = makeKeyLinesItems(edges);

// Edges have only the ids of the vertices

var ids = [];

$.each(edges.result, function (i, edge){ if(edge.in && edge.out){

ids.push(edge.in, edge.out); }

(7)

});

// produce a new query to retrieve vertices info

query = “select from V where @rid in [“+(ids.join(','))+”]”;

// Now ask for the vertices information

callSQL(query, function (vertices){

// now we can style the vertices too with KeyLines

var items = links.concat(makeKeyLinesItems(vertices));

// everything done now, return the control to the callback!

callback(items); });

}); }

… more here (see below) …

</script> </body>

</html>

Querying your OrientDB database

Now we have a KeyLines chart, we need to raise AJAX SQL queries to retrieve data from our OrientDB database. For our own convenience we can create a function to send AJAX requests to the HTTP endpoint:

function callSQL(query, callback) {

// Put here the credentials for your OrientDB instance

// We have nothing to write so reading-only permissions are enough

var credentials = ‘reader:reader’;

// This is the default URL for a local instance

var baseURL = “localhost:2480/query/VehicleHistoryGraph/sql/'; $.ajax({

type: 'GET',

// Make all the bits together here for the full URL

url: 'http://’+credentials+’@’+baseURL+encodeURIComponent(query), // Remember to set the type to JSONP to avoid CORS issues

dataType: 'jsonp',

contentType: 'application/json' })

.done(callback);

(8)

Firstly, ‘callSQL’ accepts a query parameter, which is the full SQL query we want to run. The “encodeURIComponent” is used to prevent encoding issues on the GET method used. Secondly, a callback function is called with a JSON response from our OrientDB HTTP endpoint.

Parse the result into KeyLines’ JSON format

Next we need to run a “makeKeyLinesItems” function to parse from OrientDB’s JSON format to KeyLines’ own format:

function makeKeyLinesItems(json){ var items = [];

$.each(json.result, function (i, item){ // check if it is a link

if(item.in && item.out){ items.push(makeLink(item)); } else { items.push(makeNode(item)); } }); return items; } function makeNode(item){

var baseType = item['@class'].toLowerCase();

var node = {

id: item['@rid'], type: 'node',

// get the label based on the type and content

t: getNodeLabel(item, baseType),

// get the icon based on the labels (needs some image assets)

u: getNodeIcon(item, baseType), e: baseType === 'make' ? 2 : 1.2,

// save the OrientDB item in case we need more info later

d: item };

// add the baseType as well

node.d.type = baseType;

return node; }

(9)

switch(type){ case 'transaction': return node.price + ' $'; case 'person': return node.fullName; case 'automobile':

return node.color + (node.convertible ? '\nConvertible' : ''); default:

return node.name; }

}

function getNodeIcon(item, type) { switch(type){

case 'transaction':

return 'icon/new/bank.png'; case 'person':

return item.gender === 'Female' ? 'icon/new/woman.png' : 'icon/new/man.png'; case 'automobile': return 'icon/new/vehicle.png'; case 'model': return 'icon/new/id-card.png'; default: return 'im/logos/'+item.name.toLowerCase()+'-logo.png'; } } function makeLink(item) {

var baseType = item['@class'].toLowerCase();

var isTransaction = /(sold|bought|purchased)/.test(baseType); var link = { id: item['@rid'], type: 'link', id1: item.in, id2: item.out, fc: 'rgba(52,52,52,0.9)',

// draw an arrow pointing to the edge direction

a2: true,

c: isTransaction ? 'rgb(127,205,187)' : 'rgb(0,153,255)', w: 2,

// save the item for future use

d: item };

(10)

}

Layout the graph

Now that the data has been parsed and loaded in KeyLines, we just need a layout. You can choose from the growing list of automatic layouts listed in the API.

In the current example we’re going to use the standard layout with a nice force-directed “spring” effect from the center of the canvas:

function layout(){

// Place the new items at the center of the screen

chart.zoom(‘fit’, {}, function(){ // Now layout nicely

chart.layout(); });

}

Customize your chart

The final part of the process is to customize your chart’s appearance, workflow and functionality.

KeyLines offers a huge range of different ways to customize your final application – far too many to outline them here! Instead we recommend taking a detailed look through the KeyLines SDK documentation, especially the API reference and sample demos.

(11)

Example: An OrientDB / KeyLines demo

This demo uses data from an OrientDB database about carmakers, models and people selling them, showing how users’ transaction history can be shown using a graph structure.

All aspects of your application can be altered. Any KeyLines functionality (http://keylines.com/features) can be integrated and all visual styling can be customized to your requirements.

KeyLines Chart Navigation tools Automatic layout options KeyLines generated SQL queries

(12)

Our OrientDB demo uses the double-click event to expand any node. KeyLines caches vast amounts of data in-memory, so expands do not have to call back to the OrientDB database each time.

Automated layouts can be easily applied. This example is the Structural layout, which groups nodes that have similar properties:

The following screenshot shows the network with a radial layout, which shows collections of nodes arranged in concentric circles:

(13)

A KeyLines chart can also be used to write back to the database. In this example, the user can right-click any node to view and submit a star rating.

More information

For more information about visualizing your OrientDB database with KeyLines, get in touch: http://keylines.com/contact