Web (PHP, Javascript)

Ontology visualisation: jOWL

jOWL is a JQuery based framework visualising .owl files. It is extremely easy to use. And because it is JQuery-based the syntax is very concise.

This is an example of initialising the Javascript side of things:

    $(document).ready(function() {
      if ($.browser.msie) console = { log : function(msg, rest){$('body').append($('<div/>').text(msg+'  '));}};
      // gdp code
      jOWL.load( "MyFile.owl", function() {
        var tree = $('#onttree').owl_treeview({addChildren: true, isStatic: true });
        var navbar = $('#ontnav').owl_navbar();

      var cc = jOWL.permalink() || jOWL("Entity"); 
      //switch between treeview & navbar

      function toggleView(id){
        switch (id)
        case 'ontnav': $('#ontnav').show(); $('#onttree').hide(); break;
        case 'onttree': $('#ontnav').hide(); $('#onttree').show(); break;     

      }, {} );

All we are doing here loading the MyFile.owl and creating 2 interchangeable views for it: ‘onttree’ and ‘ontnav’. These views will be connected through the listeners. So a change in one is reflected in the other.

Then you need to actually add the HTML elements:

<div id="ontologyPane" class="ontologyPane">
        <form id="viewcontrol" action="">
        <input type="radio" checked="checked" value="onttree" name="visualisation"/>
          Navigation Bar:
        <input type="radio" value="ontnav" name="visualisation"/>
        <div id="onttree" class="ontologyTree">
        <div id="ontnav" class="ontologyNav" style="display:none">

And you have 2 interchangeable panes displaying the structure of your ontology. There is much more to the jOWL framework. But even this simple demonstration gives a taste of its possibilities.

This example is based on the source of http://jowl.ontologyonline.org/documentation.html.


One thought on “Ontology visualisation: jOWL

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s