Web interaction based on a simple ontology

As part of our work, we identified several ontologies on which a useful visualization mode is a tree of concepts display. In fact, in many ontologies or even set of RDF triples, a ‘view’ through the data can be a tree. We will see an example that preserves semantic links.

We will see that this is doable with some automated transformations and some simple code.

To move forward on this idea, we chose our Bloom ontology that we created in the project ILOT (see this article). In its current state, it is primarily a thesaurus, which could be represented in SKOS, but which  is an OWL ontology -for reasons related to the conduct of the ILOT project was conducted-, using part of the SKOS vocabulary. Clearly, there is a vocabulary tree with  concepts/general words and words in a hierarchy, limiting the semantic of broader concepts. Our ontology is available here.

For Web visualization of a tree, we quickly identified the javascript library d3.js as reliable and highly customizable, offering various opportunities to display tree data.

d3.js offers features to load data described in json and display them. For this, we will start from a model with default operations on the tree structure, which requires a well-defined structure of the json object, but that is based on methods that can be redefined. At first glance, we must simply redefine two methods:

• children, starting from a node, returns a table of its direct sons,
• a function that returns the label to display for a given node.

But, before, we must generate the JSON structure that we will use.

Transforming OWL ontology to JSON-LD

Our ontology can be easily converted into JSON-LD with RDF-Translator. It s an online tool, whose sources are available, which allows you to convert files from one representation of RDF triples in another. We must give the input format -here RDF/XML- and the output format -here JSON-LD.

JSON-LD is a recent W3C specification for representing RDF triples with JSON, in an organized manner to facilitate the exchange of data between applications and between web sites. A future post will tell you more about JSON-LD.

Once copied the JSON-LD file, we will make it a little easier to handle it with javascript by adding a context (a context is something like a list of templates which, applied to the rest of the file simplify his presentation, but preserving the content). For this, I used  ‘json-ld playground‘ -a tool with samples and to tools to play with json-ld- which allowed me to add the little context below to the JSON-LD file previously generated:

{
    "subClassOf": "http://www.w3.org/2000/01/rdf-schema#subClassOf",
    "label": {
      "@id": "http://www.w3.org/2000/01/rdf-schema#label",
      "@container": "@language"
    },
    "prefLabel": {
      "@id": "http://www.w3.org/2004/02/skos/core#prefLabel",
      "@container": "@language"
    },
    "close": "http://www.w3.org/2004/02/skos/core#closeMatch",
    "bloom": {
      "@id": "http://givingsense.eu/2013/ontologies/pedagogy/ontobloom.owl#Bloom_Taxonomy"
    },
    "scopeNote": {
      "@id": "http://www.w3.org/2004/02/skos/core#scopeNote",
      "@type": "http://www.w3.org/2001/XMLSchema#anyURI"
    }
  }

allowing for example to transform the following portion of JSON-LD:

"http://www.w3.org/2004/02/skos/core#prefLabel": [
      {
        "@value": "detect",
        "@language": "en"
      },
      {
        "@value": "détecter ",
        "@language": "fr"
      }
    ],

into the next, thank’s to the ‘filter’ defined by the context:

"prefLabel": {
        "en": [
          "compter ",
          "reckon"
        ]
      }

which is more convenient to handle. The resulting JSON-LD file is here.

Displaying with d3

En partant de l’exemple ‘Indented Tree’ qui figure sur la page d’exemples d3, nous avons cherché comment exploiter une telle représentation avec notre fichier JSON-LD. La première étape est, bien sûr de remplacer les données utilisées dans l’exemple par les notres:

From the example ‘Indented Tree’ that appears on that page, we looked how to exploit such a representation with our JSON-LD file. The first step is of course to replace the data used in the example with ours:

d3.json("bloom/ontobloom.jsld", ...

The ellipsis replaces a function passed as a parameter which uses the data read from the json file with the given path.

Directly, it does not work. As mentioned above, you need to tell the function how to find the root of the tree that interests us:

flare["@id"] = "http://givingsense.eu/2013/ontologies/pedagogy/ontobloom.owl#Bloom_Taxonomy";

where we give the id of the node that should be found in the function that finds the son of a node:

childrenFinder = function(node) {
            var j=0;
            var children = new Array();
            var id = node["@id"];
            if (id!==undefined) {
              root["@graph"].forEach(function(n, i) {
                if (n.subClassOf!==undefined)
                if ("@id" in n.subClassOf)
                if (n.subClassOf["@id"]===id){
                    children[j] = n; j++;
                }
                }
              );    
            }
            return children;
          };

This function is quite simple and obviously dependent on input data. It is called recursively on the son of the node and the son of the son and so on.

Once defined, it is used as a parameter of the display method of the tree structure:

// surcharge de la méthode standard de recherche des fils
tree.children( childrenFinder)
// construction de la structure visuelle de l'arbre
tree.nodes(root);

We find then the piece of code that inserts the text in the tree; the function that gives the label associated with each node is changed:

nodeEnter.append("text")
      .attr("dy", 3.5)
      .attr("dx", 5.5)
      .text(function(d) { 
          var label = (d.label!==undefined?d.label.fr:"?");
          return label; 
        });

The result is shown here.

If you look in a debugger -for example, development tools integrated into Chrome- the object that you get on a mouse click in the tree, you see that this object is a direct result of the original structure of the ontology; it contains an “@ id” field  whose value is the URI of the element of the ontology associated with the clicked item in the tree, for example:

"@id": "http://givingsense.eu/2013/ontologies/pedagogy/ontobloom.owl#abstract"

So, at low cost, you have a user interface with semantic: it is ready to establish links with the rest of the wonderful world of linked open data and the semantic web.