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();
        tree.addListener(navbar);
        navbar.addListener(tree);

      var cc = jOWL.permalink() || jOWL("Entity"); 
          tree.propertyChange(cc);
          tree.broadcast(cc);
          
      //switch between treeview & navbar
      toggleView($(':radio:checked').val());
      $(':radio').change(function(){toggleView($(this).val());});

      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="">
          Treeview:
        <input type="radio" checked="checked" value="onttree" name="visualisation"/>
          Navigation Bar:
        <input type="radio" value="ontnav" name="visualisation"/>
        </form>
        
        <div id="onttree" class="ontologyTree">
        </div>
        
        <div id="ontnav" class="ontologyNav" style="display:none">
        </div>
</div>

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.

Standard

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s