Exemple d’interaction Web basée sur une ontologie simple

Dans le cadre de nos travaux, nous avons identifié plusieurs ontologies sur lesquelles un mode de visualisation utile est l’affichage d’un arbre de concepts. En fait, dans beaucoup d’ontologies ou même d’ensemble de triplets RDF, une ‘vue’ possible est de traverser les données dans un parcours arborescent. Nous allons en voir un exemple qui préserve les liens ‘sémantiques’ d’origine.

Nous allons voir que cela est faisable avec quelques transformations et un peu de code simple.

Pour avancer sur cette idée, nous avons choisi l’ontologie de Bloom que nous avons créée dans le cadre du projet ILOT (voir cet article). Dans son état actuel, il s’agit principalement d’un thésaurus, qui aurait pu être représenté en SKOS, mais, qui, pour des raisons liées au déroulement du projet ILOT, a été réalisée sous forme d’une ontologie OWL, exploitant une partie du vocabulaire de SKOS. Clairement, il s’agit d’un arbre composant un vocabulaire avec des concepts/mots généraux et une hiérarchie de mots limitant le champs du concept. L’ontologie est disponible ici.

Pour l’affichage Web d’un arbre, nous avons rapidement identifié la librairie javascript d3.js comme étant fiable et facilement adaptable,offrant diverses possibilités pour l’affichage de données arborescentes.

d3.js offre des fonctionnalités intéressantes pour charger des données décrites dans une structure json et les afficher. Pour cela, on va partir d’un modèle d’affichage d’arbre avec un fonctionnement par défaut de l’objet tree, qui suppose une structure bien définie de l’objet json, mais qui repose sur des méthodes que l’on peut redéfinir. En première approche, il suffit de redéfinir deux méthodes:

• children, qui partant d’un nœud renvoie une table de ses fils directs,
• une fonction qui renvoie le label à afficher pour un nœud donné.

Nous y reviendrons une fois générée la structure JSON que nous allons utiliser.

 Transformer l’ontologie OWL en JSON-LD

Notre ontologie de Bloom peut-être facilement transformée en JSON-LD avec l’outil RDF-Translator. Il s’agit d’un outil en ligne, dont les sources sont disponibles, qui permet de convertir des fichiers d’une représentation de triplets RDF dans une autre. Il faut donner le format d’entrée -ici RDF/XML- et le format de sortie -ici JSON-LD.

JSON-LD est une récente spécification du W3C pour représenter en JSON des données RDF d’une façon organisée pour faciliter l’échange de données entre applications et entre sites web. Un prochain billet vous en dira plus sur JSON-LD.

Une fois récupéré le fichier json-ld, nous allons le rendre un peu plus facilement manipulable en javascript en y ajoutant un contexte. Un contexte est une sorte de série de templates ajouté au début du fichier, qui simplifient la présentation et l’exploitation dans du code en préservant le contenu. Pour cela, j’ai utilisé ‘json-ld playground‘ qui m’a permis d’ajouter le petit contexte ci-dessous au fichier json-ld précédemment généré:

{
    "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/frscol/FrBloom/Bloom_Taxonomy"
    },
    "scopeNote": {
      "@id": "http://www.w3.org/2004/02/skos/core#scopeNote",
      "@type": "http://www.w3.org/2001/XMLSchema#anyURI"
    }
  }

qui permet par exemple que la portion de json-ld suivante:

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

prenne, via le filtre du contexte, la représentation suivante:

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

ce qui est plus commode à manipuler. Le fichier JSON-LD que nous utilisons ensuite est ici.

 Affichage avec 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 nôtres:

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

Les points de suspension remplacent une fonction passée en paramètre et qui exploite les données json lues à partir du chemin qui constitue le premier paramètre.

Directement, cela ne donne rien. Comme évoqué plus haut, il faut indiquer à la fonction comment trouver la racine de l’arbre qui nous intéresse:

  flare["@id"] = "http://givingsense.eu/frscol/FrBloom/Bloom_Taxonomy";

où on donne l’id du nœud qui devra être cherché dans la fonction qui trouve les fils d’un nœud:

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;
          };

Cette fonction est assez simple et évidemment dépendante des données fournies en entrée. Elle est appelée récursivement sur les nœuds fils et les fils des fils et ainsi de suite.

Une fois définie, elle est utilisée comme paramètre de la structure d’affichage de l’arbre:

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

Un peu plus loin, on trouve le morceau de code qui insère le texte dans l’arbre et on modifie la fonction qui trouve le label associé à chaque nœud:

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

Le résultat est visible ici.

Si vous regardez dans un debugger -par exemple, avec les outils de développement intégrés à Chrome-l’objet d que vous récupérez sur un clic souris dans l’arbre, vous verrez que cet objet est directement issu de la structure de l’ontologie d’origine; en particulier, il contient un champs « @id » dont la valeur est l’URI de l’élément de l’ontologie associé à l’élément cliqué dans l’arbre; par exemple:

@id: "http://givingsense.eu/frscol/FrBloom/abstract"

Ainsi, à peu de frais, vous avez une interface utilisateur ‘sémantique’: elle est prête pour établir des liens avec le reste du merveilleux monde des données liées et du web sémantique.