Graph-Visualization

In the branch named “QuickAdd” you can find a new component which visualizes a graph based structure. It based on few libraries: Raphael, Graph Dracula, jQuery and jQuery SVG Plugin. In the course of this page the component and their parts will be described. Additional you get an overview how to wrote own stuff on top of that or extend the existing code. Enjoy!

_Warning: This component is under heady development so functions, files or whatever can be changed from today to tomorrow._

Before we start

There must be an executable Ontowiki installation. If you havent it you can check this. The database backend is indifferent, MySQL or Virtuoso are usable. At this point the Ontowiki installation is accessible via http://localhost/myow and the files are in */opt/lampp/htdocs/myow*. If your paths differ please modify the posted ones.

Raphael is the heart of this component. It draws the SVG elements like circles, ellipses or paths. It uses SVG for non IE browsers and VML for IE.

Dracula Graph Library is build on top of Raphael and provides an easier way for creating graph based visualizations. As Raphael draws many kinds of SVG elements like diagrams, plots and charts, Dracula is specialized on graphs.

jQuery’s SVG Plugin is build on top of jQuery which is used in Ontowiki too. This plugin provides a fancy way for accessing SVG elements using jQuery’s $().

The PHP classes are

WeightedGraph.php

WeightedEdge.php

Node.php

In general you only need WeightedGraph class. It provides all related stuff for creating and maintain a graph structure. It allows you to import an Erfurt-SPARQL-Result into the WeightedGraph structure, implements Iterator interface so you can interate over it in a standardized way and additional it provides functions for weighted statements and publish them as drawable SVG elements.

To introduce iowaViz

Its build on top of dracula. There are to Javascript files which are provides different functionality:

iowaviz/scripts/iowaViz.js

iowaviz/scripts/iowaViz.events.js

The iowaViz.js provides base functionality. Following a short function overview:

Following code setting main settings of the later drawing graph. *drawingArea* is the name of the div container which later contains the SVG elements. It has a *width* and *height* too. *Threshold* is important if you would like to weight your statements.

For example data we questioning the knowledge base selecting few triples. After that we import them into our graph instance. The graph convert array elements into edges and nodes. For more information please look at function *add* and *addResultSetArray* in WeightedGraph.php.

The content of div container named *statistic_panel* is unimportant for this demonstration. It only contains tools for setting up a new model and show few information about the nodes.

Following code contains a div container which will be named as the drawingAreaName was set in the guiAction before. The Javascript section contains only three functions. *getInitJS* wrote dracula init code and setting up iowaViz object. The function toGraphDraculaJsCode convert saved edges and nodes in graph instance into SVG elements, but nothing will be drawed at this point! Not before the function getDrawJS is executed the graph will be drawed in the div container.

At this point you have learn how to create a graph, put data into it and drawing SVG elements. But theres more to come. In the file *iowaviz/scripts/iowaViz.events.js* you found Javascript events which will be executed after special user actions.

is the toggle one. After a click on a node it gets a new CSS class named *iV_node_click* and in div container *current_node_name* the about attribute value will be shown. If you click on the same node again the CSS class and about value will be removed from the div.

Here you can put any events you know from jQuery. With jQuery’s SVG Plugin its possible to use them for SVG too.