Visualizing an OrientDB Graph Database with KeyLines

Transcription

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. If you require more information we recommend contacting us to discuss your project.

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 - Relational databases - Other NoSQL data stores - 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, 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 query languages. Browser-based KeyLines is a browser-based technology. End users do not need to 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 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 Install the OrientDB graph database as a server running on port This should be automatic, but you can test the configuration is correct by navigating to the following URL in Chrome or Firefox: This should give you a login page for the GracefulDeadConcerts database. You should be able to call a REST interface running at 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 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> <!-- Load the KeyLines file --> <script src="keylines.js" type="text/javascript"></script> <!-- Other libraries we want to use, e.g. jquery --> <script src="jquery.js" type="text/javascript"></script> </head> <body> <!-- This is the HTML element that will be used to render the KeyLines component --> <div id="chartid" style="width: 400px; height: 300px;" ></div>

6 <!-- This is the actual code to load KeyLines in the page --> <script> // 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 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: ' +baseurl+encodeuricomponent(query), // Remember to set the type to JSONP to avoid CORS issues datatype: 'jsonp', contenttype: 'application/json' ).done(callback); There are two things taking place in this query.

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; function getnodelabel(node, type){

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 return link;

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. Navigation tools Automatic layout options KeyLines Chart KeyLines generated SQL queries All aspects of your application can be altered. Any KeyLines functionality ( can be integrated and all visual styling can be customized to your requirements.

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: For a free 21 day trial, visit