Monday, December 22, 2008

Hyperbolic Tree Visualization

Ever since I first read about the Javascript Information Visualization (JIT) toolkit, a javascript library that renders hyperbolic tree's and other visualizations directly inside HTML (canvas element), I've wanted to try and integrate that functionality with some jOWL reasoning.
I finally found some time to do that.
Turns out integrating jOWL data with the JIT Hyperbolic tree visualization is a walk in the park. I had the basic example up and running in less than an hour.
Not in the least thanks to JIT library itself and the great documentation on the site.

The result is a quite cool ontology view. It's a nice gimmick, but for most purposes, a regular jOWL treeview will provide a better oversight in my opinion. It should be fairly easy to expand and smoothen out the functionality of that demo. Linking the visualization to existing jOWL components should only require a few lines of code.
I did not put the effort in that for the moment, as I am currently working on a bigger jOWL-related project.

You can see the demo at: HyperBolic Tree demo, it is best viewed in Firefox or Safari, due to Internet Explorer's refusal to adopt the canvas tag (although it will work on Internet Explorer as well, but slower).

Wednesday, October 15, 2008

HTML Templating and OWL data visualisation

One of the challenges of building a dynamic HTML page that works with OWL-DL data has been how to visualize OWL data without knowing in advance what the data will be about.
For any given owl:Class you do not know in advance which properties will be defined, whether it has children, or whether it will have a description (rdfs:comment) or not, or if any terms (rdfs:label) are assigned to it in any given language. You could write custom code for each application, but that will not get us very far and will be very cumbersome.

Much better is to have some sort of dynamic templating system that allows us to fill in the blanks, and I have been looking for something like that ever since I started coding jOWL. From jOWL (5.1) 6.0 on, the User Interface extensions contain a new component called owl_propertyLens. Luckily I didn't have to invent the wheel all by myself. To create this owl_propertylens functionality I found some inspiration in both the
Fresnel abstract box model (created by the MIT - and used in for example the Simile - Exhibit project) and the mjt templating language (MetaWeb Technologies - freebase).

The first implementation was a based on a couple of ideas inspired by the Fresnel display vocabulary for RDF. But, in order to allow templating of SPARQL-DL queries, I had to make a more hybrid approach, so that the various parameters of a query can integrated with our HTML. The result is I think a quite flexible templating system, specifically tailored towards OWL-DL syntax. As a matter of fact most of the visualisation can be specified by modifying the HTML (no javascript options required). An example page that really needed a templating system like this is the jOWL generic Browser page, a page intended to visualize any ontology loaded with the Ubiquity - Firefox Command I wrote recently.

Basics of an owl_propertyLens

A first thing to mention is that I decided to make use of custom data attributes (actually one kind only: data-jowl). This might seem strange to some, but apparently custom data attributes will make it as a new feature for HTML 5. Attributes of the form 'data-...' are valid HTML5. So basically I'm just being a little ahead of time.

The 'abstract box model' uses three kinds of boxes:

  1. The topmost is the resourcebox, it is the HTML that surrounds one given resource, and contains several properties. This is the element you call .owl_propertyLens() on, it should contain the attribute class="resourcebox" and preferably a data-jowl attribute with value specifying the expected type of resource:

    <div class="resourcebox" data-jowl="owl:Class">

  2. Inside the resourcebox you declare propertyboxes: these are the html fragments that encapsulate (surround) a given kind of 'property', in the broad sense of the word. If the 'property' is unavailable then the propertybox will be hidden from view. A propertybox should contain the attribute class="propertybox".
    <div class="propertybox">...</div>

  3. The third and smallest boxes are what can be considered 'valueboxes'. In order to avoid too much nested HTML elements, valueboxes can co-locate with their propertybox elements. They are identified by the data-jowl attribute, for which it's value specifies the kind of result that is expected. A propertybox can contain at max one data-jowl specification.
    Currently the supported values are:

    • term (showing all available rdfs:label's for an ontology element)
    • rdf:ID (the identifier of the element)
    • rdfs:label (a representation name for the element)
    • rdfs:comment (descriptions for the element)
    • SPARQL-DL queries (syntax: sparql-dl + ":" + abstract SPARQL-DL query)
    • permalink: create a permalink for the element
    • rdfs:range and rdfs:domain: for properties, the range or domain
    • owl:disjointWith : disjoints specified on the element.

    For each matching result to a property the data-jowl element (valuebox) will be duplicated.

Valueboxes and examples

From the MJT templating language I borrowed the idea of text substitution. This means that inside a 'valuebox' you designate the parameters to be shown by having an element with text equal to parameter surrounded by curly brackets and prefixed with a dollar sign. That is particularly useful for SPARQL-DL statements. Examples:

  1. Simplest propertylens syntax:
    <div class="propertybox" data-jowl="rdfs:label">${rdfs:label}</div>

  2. Another way of defining a propertybox:
    <div class="propertybox" data-jowl="rdf:ID">ID = <span>${rdf:ID}</span></div>

  3. More complex example, new <li> elements are created for each term present. If no terms are present, then this entire section will not display.
    <div class="propertybox">
    <li data-jowl="term">${term}</li>

  4. SPARQL-DL example: to add the current resource as a parameter: use the data-jowl value of the resourcebox in the abstract syntax as in the example below:

    <div class="propertybox">
    Direct children:
    <div data-jowl="sparql-dl:DirectSubClassOf(?c, owl:Class)">${?c}</div>

  5. SPARQL-DL example with multiple parameters to show:

    <div class="propertybox" data-jowl="sparql-dl:PropertyValue(owl:Class, ?p, ?t)">
    <span>${?p}</span><span>: </span><span>${?t}</span>

Feeding an ontology element to the owl_propertyLens

Like any other UI component, there are two ways to update the template with an ontology element.

var lens = $('#some_element').owl_propertyLens();

  1. propertyChange: pass the owl element inside the propertyChange function:

  2. By listening to another component, such as a treeview (automatic updates):

See the jOWL demo's for some examples.

Additional (optional) Javascript parameters

The templating system should be flexible enough to meet most needs. But there may be cases where you need a little extra control. This can be achieved by feeding some additional options with the owl_propertyLens function.

  • onUpdate: a function that will be called each time the template has been updated with a new ontology element.

  • onChange: allows you to specify what should happen with elements referencing a given kind of ontology element (owl:Class, owl:Thing, ..) inside the lens. This allows for example to set up a tooltip that will be displayed each time an owl:Thing reference inside the lens is hovered over. See the jOWL generic Browser page for an example.

  • tooltip = true: removes the lens from the document, to be used as a tooltip within other components.

  • specific data-jowl values: see the jOWL generic Browser page for examples.

    • split: if multiple results are present, then this string will additionally be used to separate results (example: ', ').

    • "a parameter": a function that can be specified for any of the bracketed parameters (example: rdfs:comment) in the template. The function gives access to the specific HTML elements for this parameter.


I don't know about your opinion, but this system seems quite flexible, not in the least thanks to the SPARQL-DL support. It serves it's purpose in many different situations (see Demo's) and so far I have been very happy with the implementation.

Many, but not all jOWL Demo's have been updated, a task for the weeks to come.


Wednesday, September 24, 2008

Ubiquity, OWL-DL file accessibility and jOWL

If you are like me, and often browse to web in search of OWL-DL ontologies, then you have probably wished that there was an easier way to look at these files than just observing the raw OWL syntax.
I'm proud to announce a Ubiquity plugin that allows you to browse any OWL-DL file on the web with jOWL, the semantic javascript library I am developing, no matter where it is hosted.

I had been thinking on writing a Firefox plugin for quite some time for this purpose, even wrote some initial code, as this would be a great application for jOWL. But then came along the amazing Ubiquity.

About Ubiquity

Ubiquity is a Mozilla Experiment that is in two ways incredibly impressive:

  • It allows you to give natural language commands to the browser. Examples include 'map brussels', 'weather paris' or 'email this to {somebody}'

  • It allows you to basically mash up the entire web, avoiding the confinement of one domain only with it comes to looking at data.

The Mozilla blog post is quite instructive on what Ubiquity is about, I suggest you read it if you are not familiar with it yet.

About the jOWL Extension script to Ubiquity

As it turned out, writing the command was pretty straightforward. It is also very small in size (3KB only). Basically it feeds the OWL-DL document to a generic jOWL-Browser page I have set up. This browser page does all the heavy (jOWL) work, so even users unaware of javascript can use jOWL to browse OWL-DL files. Any issues and goodies are due to the jOWL library (which I continue to improve). The jOWL browser page contains the latest additions to the jOWL library (HTML templating and SPARQL-DL). I plan to write about and release a version update containing this functionality in the coming weeks.

Installing the functionality (Firefox Only)

  1. Get/Install the Ubiquity Natural Language commands extension from Mozilla

  2. Install the small (3 KB) script that enables the 'view_ontology' command by going to this page

  3. Go to a published OWL-DL file (examples below), open ubiquity and choose view_ontology

Tested Ontologies

The Ontologies must be expressed in OWL-DL.

If you encounter any issues, post to the Discussion group and I'll make sure to take them into account and update the functionality progressively. One thing I noticed already is that, if it is your first visit to the jOWL Browser page, the page can load empty. I'm looking into it, but the problem should be resolved by trying the same command once more on the OWL-DL file.

One more note, the viewer can also be used to peek at local OWL-DL files (for example if you are writing your own Ontology in OWL-DL syntax). Just load the file in Firefox and use the same Ubiquity command on it.

Hope you like it!

Wednesday, August 20, 2008

Cell Cycle Ontology hosted at

I'm proud to say that OntologyOnline now hosts the Cell Cycle Ontology.

The Cell Cycle Ontology is a wonderfully rich ontology (59.000 entries), focused around cell cycle proteins, genes and interactions. A great resource if you are dealing with biochemistry, biomedicines or any other related field.
Due to it's sheer size it has been problematic to get a good look at this ontology in the past, but not anymore. The version present at OntologyOnline is the composite ontology, collecting information on four different model organisms: Arabidopsis thaliana, Saccharomyces cerevisiae, Schizosaccharomyces pombe and Homo sapiens (us humans).

It extends to Gene Ontology (that we also host), so there is a little overlap, but if you want to jump into the fray a good place to start would be a search on Cell Cycle.

Monday, July 14, 2008

jOWL status update

I packaged the latest development version of jOWL into a 0.5 release, available at Google Code. jOWL is an AJAX/javascript extension to jQuery that I am developing. The jOWL library parses and reasons with OWL-DL documents. Supported browsers for this release are Internet Explorer 7 and Firefox 2 & 3.

This release is accompanied by several new and impressive demo's (in my humble opinion). These make use of the new functionalities that have been incorporated so far. Below are some important highlights.

Reasoning over Individuals: Demo 2: jOWL integration with Simile Exhibit

Simile Exhibit is an MIT project that allows complex data visualisations to be defined entirely on the client-side (javascripted). This means no server-side scripting is needed (no PHP, Ruby, JSP, ASP, ...) and no database access is required. In Exhibit, data is defined in a rich, but flat, JSON format.

The jOWL library is designed with similar ideas and goals in mind, but focuses on OWL semantics and vertical search instead. So on the one hand jOWL takes into account subsumption/inheritance, but on the other hand Exhibit has powerful visualisations. I believed it would be an interesting experiment to try and reconcile the two. The results of this labor can be seen at the jOWL - Exhibit demo page that has been set up. jOWL loads the OWL file, grabs all instances of the specified class (wine), grabs all restrictions (relations) applicable for these, and converts this into a JSON data format that Exhibit can read. Exhibit then takes care of the further visualisations and filtering.

The Exhibit results also hook back to some jOWL functionality, which allows visualisation of a little more supporting information. Clicking on Meursault in the below example (image) shows the ontological classification of this type of wine.

jOWL Exhibit Demo - screenshot

Ontology Browsing

One item on my todo list was to expand the tests and demo's to include more diverse types of OWL-DL files. Even though OWL-DL is a standard, there are alternative ways to express things. In general, ontology elements are uniquely referenced by the attribute 'rdf:ID'. It is however also possible to use external declarations only, by means of the 'rdf:about' attribute and external URI's. This has some particular benefits, most importantly the identity of the ontology elements always points to one and the same location, no matter the location of the OWL file, and therefore is common practice in building ontologies. The external URI should then declare the ontology elements as well at the specified location, but funnily enough this is often overseen. Previously jOWL only indexed elements referenced by 'rdf:ID', but this has now been expanded to also include elements only referenced through 'rdf:about'. The concrete result of this rewrite is that ontologies like the Basic Formal Ontology or the Ontology of Biomedical Investigations can now also be properly visualised with jOWL.

Another change is that the foundations for a new User Interface component are being drafted. This new component is meant to visualise descriptions, labels, disjoints, outgoing non-hierarchical relations, etc... The prototype (under development) can be seen for example in the BFO (Basic Formal Ontology) demo. Hand in hand with this component is the ability to use permalinks, links that allow you to externally reference a given owl:Class. Examples of the permalink functionality is also visible in that demo.

Documentation, and visualisation of RDFa embedded OWL syntax

Documentation was somewhat lacking in the past, but I put in an effort to create it. And even more, jOWL is used to visualize it. Initially I defined the documentation in an OWL-DL file. I kept that, now outdated, owl file accessible, because it demonstrates how to include HTML syntax in rdfs:comments (by wrapping in CDATA tags). But I decided to take another approach in the end with this documentation. Instead of loading an OWL-DL file, all the documentation resides in an html file, which is enriched with RDFa markup. The RDFa indicates which ontology classes exist, along with their descriptions ('rdfs:comments') and more. jOWL then extracts an OWL-DL file directly from this RDFa-enriched html page, and adapts the page to visualize it the jOWL way instead. Basically this is a real application to what I previously wrote in the blog post 'Embedding OWL syntax in HTML with RDFa'.

Some people may have doubts on this approach, and I must admit I haven't entirely made my mind up on the applicability of it as well. For one it is only suitable if the OWL syntax remains simple, as for example in the case of documentation, where hierarchical information (vertical representation of data) is enough. But it does come with some major advantages:

  • A big plus, just being practical: Content is accessible to search engine spiders and people who disable javascript. Ergo it solves the search engine access issues always seen with any other AJAX implementation.

  • It is much simpler & userfriendly than writing an OWL-DL file. Still requires some effort. But (in combination with jOWL) it seriously lowers adoption barrier for using OWL.

  • The flat representation of the documentation is hidden, and instead you the user is presented with a more dynamic/intelligent view on that data.

And finally: The link to this documentation, which serves as a demo on it's own.

Hope you enjoy the new demo's,


Tuesday, May 13, 2008

TreeView for jOWL

There is an update to the jOWL javascript library.
Version 0.2 contains:

  • A TreeView component (see jOWL page for a demo) in jOWL_UI.
  • Numerous code improvements.
Can be downloaded at the google project page for jOWL.

jOWL is a jQuery dependent javascript library that loads and reasons over OWL documents. See also the original Blog post on jOWL.

Tuesday, May 6, 2008

Server-side storage of OWL syntax.

One concern I have with jOWL, a javascript library I am maintaining that parses and reasons with OWL-RDFS documents, is it's scalability.

Scalability is, as we all know, of vital importance in a web setting. A potential drawback of the current jOWL javascript approach is that user is required to download the entire ontology before being able to do anything with it. This might be fine and sensible in the case of small sample ontologies such as the wine ontology (still 79kB) that has been used in previous semantic web demo's at ontology online. Sadly, it doesn't take much imagination to see that it could quickly become gruesome to load when we make things a little more interesting.

So it dawned on me that it would be great to have a more dynamic load mechanism, where you only request or get what you really need. And it just so happens that Ajax (web 2.0 technology), combined with javascript, is perfectly suited for that. So I have been working hard on creating some server side code that is able to respond to Ajax calls and send back pieces of OWL-DL syntax. The image below kind of explains what I wish to achieve.

At the same time I decided to rewrite the database code that allows me to store ontology information, and take a more xml-hybrid like approach. The limitation of the older code I have, is that it attempts to translate every aspect of OWL-RDF into a relational database table format, e.g. concrete row-column values. As I try to put the richer logic of OWL-DL into work, it becomes a real pain & huge overhead in coding to represent all intersections, unions or other advanced constructs in this format. You just can't seem to beat native OWL-XML syntax (Yeay for the OWL people).

The new approach I'm undertaking stores the full OWL syntax directly into the database. The database doesn't store the ontology in one bulky blob, but slices it up into small digestible units, each unit corresponding to one defined ontology object (e.g. an object referenced by a unique rdf:ID).
The only real modification to the native OWL syntax is a slight compression / reduction in verbosity. In addition, to allow (I hope) quick access some indexes are created (terms, etc).

For those interested, the very first results of this labor can be seen at the jOWL server test page I have set up. Be warned, it's primordial, it doesn't come with much explanation. There is also no concrete integration with jOWL just yet, that is for later, I guess I still have a long way to go.

You will be noticing that I'm also sticking to using the wine ontology as a benchmark. Not that I'm such a complete wine devotee (with all these wine related demo's I can see how people might come to think of it like that). But seeing that this ontology was originally used by the W3C to illustrate the different aspects of OWL (cfr. OWL language guide) and consequently, in testing out the syntax, I figured I might as well continue the tradition. Not sure how this will scale under somewhat heavier load, but those are problems for later :).

Thursday, March 6, 2008

Semantics in the wild: new jOWL wine Demo

I've prepared a more ambitious jOWL demo that shows off some of the reasoning capability. For the unacquainted, jOWL is a 'semantic' javascript library, under development by, with the intention to make OWL-RDFS files (see also the previous article on OWL) a little more accessible, and thereby bring web3.0 technology another step closer to the user.

The thing about the demo that cheers up the geek within is: there is absolute no server-side scripting involved and no database access is required, all the reasoning is taken care of by your own computer.
It's a great example on how added semantics might influence your future browsing experience. The visuals don't change (web2.0 got that packed to go for us), but the user experience could. There is suddenly some 'smartness' in browsing, and it is something one might quickly get accustomed to. Like all great technology, you should hardly notice it until it's gone, most of it happens under the hood.

I'm still polishing some of the details, and will continue to do so for quite some time, adding more features as we go, but the code is crossbrowser compatible (tested on Firefox and Internet explorer) and I wanted to share that with you.
Expect more demo's in the future as well.

Comments are possible at our discussion group.

Thursday, January 24, 2008

jOWL, a javascript library for traversing OWL-RDFS documents

I have started working on jOWL, a jQuery plugin for traversing OWL-RDFS documents. The ambitious intention is to deliver a script that smoothes out cross-browser issues between Firefox and Internet explorer when dealing with OWL syntax and at the same time greatly simplifies traversing OWL-RDFS documents. I'm using a mix of Xpath expressions and jQuery functionality to do so.

My main motivitation for writing this library is to see if I would be able to replicate the behaviour of the freebase-dependent wine widget in a manner that doesn't require database or complex server interactions (Imagine!). Just plain old HTML, some javascript and an OWL ontology file.

While it isn't release ready, the results look very promising and there is already quite some functionality to look at. Have a look at the simple Demo.

All it currently takes to deliver similar functionality is the following lines, it should bear no secrets if you are a little familiar with jQuery:

//load the owl file
jOWL.load('wine.xml', startDemo);

function startDemo(owl){
//Creates a panel to display individuals
var individuals = $('#individuals').owl_individuals(owl);

//Creates a panel to display class, child and parent relations
var navbar = $('#navbar').owl_navbar(owl);

//lets this component talk to the individuals panel

//Creates an autocomplete field, options to refine are possible
var autocomplete = $('#owlauto').owl_autocomplete(owl);

//lets the autocomplete field talk (provide input) to
the other components.

The plan is to extend this functionality further, while keeping syntax required to interact with the OWL-RDFS document as simple as possible. I intend to update this demo page with more examples and documentation as I progress further with this library. I'm currently testing it with the prototypical wine ontology, but plan to expand the test to other ontologies when the time is ripe.

Thursday, January 3, 2008

Semantic Annotation with RDFa: a simple experiment

This article will demonstrate an application for semantic annotation with RDFa. This is more or less a follow-up to our previous article 'Embedding OWL-RDFS syntax in XHTML with RDFa' If you need additional information on RDFa and semantic annotation: see that article.


The idea is to enrich the markup of certain sections of a webpage with an annotation, in such a way that computers can recognize it for what it is (semantic annotation, invisible to the user) and do something with it.
In this case, the goal was to return a set of language terms related to an annotation, either direct synonyms, or language terms from parents, or sources or targets of relations. The resulting procedure generates an ontological table of contents for that page focused around the given annotation and renders it directly within the original web page. In particular it adds a JQuery-enabled AJAX-script to the page that retrieves data from the OntologyOnline server and visualizes the results directly within the page you are browsing. It takes the form of an information box containing a clickable, ontological index of related terms occurring in the page plus a description (if present) for the given concept. This box can be dragged across the screen. The script also highlights the terms it found in a manner similar to google-search highlighting. The results can be discarded if no longer needed.

Figure 1: Information box on a semantic annotation, rendered directly within the annotated page.

It requires at least the following components:

  1. A web page containing a semantic RDFa annotation.

  2. The ability of the browser or a browser extension (Firefox - Operator plugin) to pick up the semantic annotation and, if the user desires to do so, trigger an AJAX call (a request for information).

  3. A service to which the AJAX call is directed ( service) and returns back useful (ontological) information about the annotated construct.

1. Semantic Annotation: RDFa markup

The idea is to mark up a section of a web page with a reference to an ontological class that describes what that section is about. We do this by using RDFa.
The RDFa markup makes use of the about attribute and the class attribute. This syntax is not entirely optimal as it does not really extract as correct OWL-DL syntax (and the class and about attributes should probably be switched around as well, but that does not visualize well in the plugin).
A combination with the instanceof attribute might be more appropriate (cfr rdfa primer: @instanceof) to declare what kind of ontology concept the given entry is an instance of, but this RDFa attribute is not yet supported by the current release of the Operator Plugin (see below), so for the time being we will have to stick with 'about'.

<div class="owl:Thing"
about="celltypeontology:immature+neutrophil">text section ...</div>

Figure 2: Embedding instance information by using the class & about attributes..

Also mind that it is always a good idea (but in this case not an absolute necessity) to declare the namespaces you used in the document as well:

= "">...

Figure 3: Including namespaces.

2. The Operator action script

The firefox extension Operator by Michael Kaply and Elias Torres recognizes RDFa in XHTML pages, and allows users to define custom actions (an Action User script) for these annotations that can be trigerred specifically by the person browsing the page.
We've created an Action User script for the Operator extension to firefox that makes an AJAX call to an ontologyonline JSONP service (see section below). This script can be downloaded at:

To set up the script:

  1. Get Firefox if you do not have it already.

  2. Install the Operator plugin.

  3. Download the Operator user script to your computer (Right-Click OntologyOnline_Operator.js, select save as).

  4. Browse to the Options section of the operator plugin, select user scripts tab, hit new, and select the script you downloaded above. Close options.

  5. Re-open options, select the actions tab, hit new, and select 'create a topic map - ontology online'. Close options.

  6. Restart the Browser.

  7. Browse to a semantically annotated page, the 'Resources' button should be highlighting, select the resource, and select the 'topic map' action that should be visible.
    Demo Pages:

Figure 4: The topic map action.

3. The Ontology Online service

We've set up a AJAX - JSONP service that returns term information on a semantic annotation, if the concept is known to the Ontology Online semantic database. If you wonder what JSONP is, JSONP is a technique that enables you to perform some AJAX calls (requests for data) cross domain, (e.g. hypothetically any web page can access the data), see Remote JSON for more information.

Some last remarks

In my opinion, this experiment also shows one of the advantages of using RDFa as opposed to using regular microformats. By using RDFa we do not impose content limits or restraints on an annotation, it is possible to use any semantic construct, as long as it is known to a ontology service like the Ontology Online Topicmap service.
The set-up has been kept simple deliberately, improvements can (and may in the future) be made on several accounts, but nevertheless I wanted to share this with you anyway.
Be aware that for large web documents the script may have some more computation work to do. I'm also hoping to come up with some more elaborate use-cases in the distant future.

Comment on this article: Discussion group.