Michael Luggen, Adrian Gschwend, Bernhard Anrig,
Philippe Cudré-Maurox, Firenze 2015
Uduvudu
a Graph-Aware and
Adaptive UI...
16th of May 2015

at only 1600m elevation!
Was Leonardo da Vinci an early master of
visualisation techniques?
3
4
Visualisation as a Tool
Sure, Leonardo da Vinci was an exceptional
creator of all kind of visualisations.
But much more he...
Uduvudu a Graph-Aware and Adaptive UI Engine for Linked Data
Uduvudu exploits the semantic and structured
nature of Linked...
Why another Framework?a.k.a. Motivation
We found ourselves reinventing the wheel
while using Linked Data in the Presentati...
Differentiation
Uduvudu is NOT a visualisation toolkit, it can not
draw graphs (e.g. bar charts) neither maps.
Uduvudu is ...
Requirements I
Maximize the reusability of templates by
design.
A template, thus a designer, has a defined set
of facts to ...
Requirements II
Make use of the inherent semantic structure
(ontologies) and keep the structure intact.
Handle language tr...
Demo
UDUVUDU - DBpedia Viewer
http://dbpedia.exascale.info
LOD events eXplorer
http://explorer.nexacenter.org
13
System Overview
A separate application logic prepares
the data which shall be shown to the
user. The data is provided as a...
SPARQL
Graph File
App. Logic
Matcher
Renderer
Device
Templates
Context
Denitions
User
Language
Basic Types of Matchers
Predicate Matcher

Simple matching by predicates with the resource
either in subject or object pos...
555555555555
http://example.com/me/corkyhttp://example.com/me/corkyhttp://example.com/me/corky
http://example.com/me/corky...
Matcher Algorithm
If a start resource is provided.

Beginning from a given start resource we
follow the available matchers...
Matcher
<#depiction>	
  a	
  uv:PredicateMatcher	
  ;	
  
	
  	
  	
  	
  uv:matcherName	
  "fullname"	
  ;	
  
	
  	
  	
...
SPARQL
Graph File
App. Logic
Matcher
Renderer
Device
Templates
Context
Denitions
User
Language
addressaddressaddress
locat...
Template I
uvsb:address	
  a	
  uv:Template	
  ;	
  
	
  	
  	
  	
  uv:abstractTemplate	
  uvsat:address	
  ;

	
  	
  	
...
Template II
<div>	
  
	
  	
  	
  	
  <span	
  class="glyphicon	
  glyphicon-­‐envelope"	
  
	
  	
  	
  	
  	
  	
  	
  	...
Template: Variables
23
Usage Description Example
Delimiters
<%- %> Output variable HTML-escaped. <%- label.u %>
<%= %> Out...
Related Work
24
Uduvudu Callimachus Balloon Syn. Fresnel Exhibit LESS
Level of
Template
Subgraph Application JS Selector S...
Future Work
Optimize implementation for more speed and
introduce reactivity.
Create a sort of “baked” templates which are
...
–Leonardo da Vinci
“Art is never finished, only abandoned.”
fin
www.uduvudu.org
reusability, defined set of facts, separation...
WebComponents http://www.w3.org/TR/components-intro/
Uduvudu will be provided as a WebComponent:
<uduvudu	
  styles=“http:...
About: Fribourg
An Entity of Type : municipality, from Named Graph : http://dbpedia.org, within Data Space : dbpedia.org
F...
Fribourg
Fribourg (French pronunciation: [fʁibuʁ]; Arpitan:
Fribôrg/Friboua, IPA: [fʁibwa] ; German: Freiburg
or Freiburg ...
LDOW2015 - Uduvudu: a Graph-Aware and Adaptive UI Engine for Linked Data
LDOW2015 - Uduvudu: a Graph-Aware and Adaptive UI Engine for Linked Data
LDOW2015 - Uduvudu: a Graph-Aware and Adaptive UI Engine for Linked Data
Nächste SlideShare
Wird geladen in …5
×

LDOW2015 - Uduvudu: a Graph-Aware and Adaptive UI Engine for Linked Data

1.862 Aufrufe

Veröffentlicht am

Uduvudu exploits the semantic and structured nature of Linked Data to generate the best possible representation for a human based on a catalog of available Matchers and Templates. Matchers and Templates are designed that they can be build through an intuitive editor interface.

Veröffentlicht in: Daten & Analysen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

LDOW2015 - Uduvudu: a Graph-Aware and Adaptive UI Engine for Linked Data

  1. 1. Michael Luggen, Adrian Gschwend, Bernhard Anrig, Philippe Cudré-Maurox, Firenze 2015 Uduvudu a Graph-Aware and Adaptive UI Engine for Linked Data
  2. 2. 16th of May 2015
 at only 1600m elevation!
  3. 3. Was Leonardo da Vinci an early master of visualisation techniques? 3
  4. 4. 4
  5. 5. Visualisation as a Tool Sure, Leonardo da Vinci was an exceptional creator of all kind of visualisations. But much more he was able to use his visualisations with an amazing ingenuity as a tool to transmit knowledge to his fellows — tell stories still read today. 6
  6. 6. Uduvudu a Graph-Aware and Adaptive UI Engine for Linked Data Uduvudu exploits the semantic and structured nature of Linked Data to generate the best possible representation for a human based on a catalog of available Matchers and Templates. ! Matchers and Templates are designed that they can be build through an intuitive editor interface. 8
  7. 7. Why another Framework?a.k.a. Motivation We found ourselves reinventing the wheel while using Linked Data in the Presentation Layer. There are tons of great tools creating amazing visualisations on top of Linked Data. But to tell a story we needed to write use case specific code over and over. 9
  8. 8. Differentiation Uduvudu is NOT a visualisation toolkit, it can not draw graphs (e.g. bar charts) neither maps. Uduvudu is NOT a Linked Data Explorer, or Browser. (Though you can build excellent ones with it.) Uduvudu is NOT a Linked Data selector, gatherer or enhancer. 10
  9. 9. Requirements I Maximize the reusability of templates by design. A template, thus a designer, has a defined set of facts to consume. Clear separation of concerns for all involved parties. 11
  10. 10. Requirements II Make use of the inherent semantic structure (ontologies) and keep the structure intact. Handle language transparently, but provide access to all available languages. Render on flexible context aware templates. 12
  11. 11. Demo UDUVUDU - DBpedia Viewer http://dbpedia.exascale.info LOD events eXplorer http://explorer.nexacenter.org 13
  12. 12. System Overview A separate application logic prepares the data which shall be shown to the user. The data is provided as a RDF Graph to Uduvudu with a start resource. In a first step the graph and the matchers are combined to cover the maximum by abstract templates. In a second step a template is chosen, taking into account the user context (device, language, use case) to render the data. 14 SPARQL Graph File App. Logic Matcher Renderer Device Templates Context Denitions User Language
  13. 13. SPARQL Graph File App. Logic Matcher Renderer Device Templates Context Denitions User Language
  14. 14. Basic Types of Matchers Predicate Matcher
 Simple matching by predicates with the resource either in subject or object position. Combine Matcher
 Combines multiple matchers, also Combine Matchers itself, which creates hierarchical matchers. Link Matcher
 Follows a predicate to another URI. 16 The architecture allows to plug-in additional matchers.
  15. 15. 555555555555 http://example.com/me/corkyhttp://example.com/me/corkyhttp://example.com/me/corky http://example.com/me/corky#telephonehttp://example.com/me/corky#telephonehttp://example.com/me/corky#telephone http://example.com/me/corky#addresshttp://example.com/me/corky#addresshttp://example.com/me/corky#address mailto:corky@example.commailto:corky@example.commailto:corky@example.com AustraliaAustraliaAustralia WonderCityWonderCityWonderCity 111 Lake Drive111 Lake Drive111 Lake Drive tel:+61755555555tel:+61755555555tel:+61755555555 Corky CrystalCorky CrystalCorky Crystal CorksCorksCorks vcard:hasTelephone vc ard:hasAddress vcard:hasEmail vcard:country-name vcard:locality vcard:postal-codevcard:street-address vcard:hasValue vcard:fn vcard:nickname addressaddressaddress location_linklocation_linklocation_link akaakaaka vcard:fnvcard:fnvcard:fn vcard:nicknamevcard:nicknamevcard:nickname locationlocationlocation citycitycity vcard:street-addressvcard:street-addressvcard:street-address vcard:localityvcard:localityvcard:locality vcard:postal-codevcard:postal-codevcard:postal-code vcard:country-namevcard:country-namevcard:country-name vcard:hasAddress Predicate Matcher
 Combine Matcher
 Link Matcher

  16. 16. Matcher Algorithm If a start resource is provided.
 Beginning from a given start resource we follow the available matchers and chose the sub-graph which covers the most triples. Else we explore all resources,
 and add the biggest found sub-graph to a set, remove the covered triples from the input graph and start over until all triples are covered. 18
  17. 17. Matcher <#depiction>  a  uv:PredicateMatcher  ;          uv:matcherName  "fullname"  ;          uv:predicate  vcard:fn  ;          uv:abstractTemplate  uvsat:text  .   ! <#combine_aka>  a  uv:CombineMatcher  ;          uv:combineIds  "fullname",  "nickname"  ;          uv:matcherName  "aka"  ;          uv:abstractTemplate  uvsat:aka  .   ! <#combine_address>  a  uv:CombineMatcher  ;          uv:combineIds  "aka",  "location_link"  ;          uv:matcherName  "address"  ;          uv:abstractTemplate  uvsat:address  . 19
  18. 18. SPARQL Graph File App. Logic Matcher Renderer Device Templates Context Denitions User Language addressaddressaddress location_linklocation_linklocation_link akaakaaka vcard:fnvcard:fnvcard:fn vcard:nicknamevcard:nicknamevcard:nickname locationlocationlocation citycitycity vcard:street-addressvcard:street-addressvcard:street-address vcard:localityvcard:localityvcard:locality vcard:postal-codevcard:postal-codevcard:postal-code vcard:country-namevcard:country-namevcard:country-name vcard:hasAddress
  19. 19. Template I uvsb:address  a  uv:Template  ;          uv:abstractTemplate  uvsat:address  ;
        uv:device  'desktop'  ;          uv:template  '…'. 21
  20. 20. Template II <div>          <span  class="glyphicon  glyphicon-­‐envelope"                    style="font-­‐size:48px;  float:left;                    margin:  0  15px  0  10px;">          </span>          <div>          <b><%-­‐address.aka.fn.u%></b>          [aka  <%-­‐address.aka.nickname.u%>]<br>          <%  template(address.location_link.0.location)  %>          <%  print(address.location_link.0.location.                          city.country-­‐name.u.toUpperCase())  %>          </div>   </div> 22
  21. 21. Template: Variables 23 Usage Description Example Delimiters <%- %> Output variable HTML-escaped. <%- label.u %> <%= %> Output variable non-escaped. <%= html_desc.u %> <% %> Execute JavaScript: Use print() for output. <% print(label.u.toUpperCase()) %> Variables label.u Literal in context language. <%- label.u %> label.l.en Literal in specific language (lang tag). <%- label.u.ja %> city.label.u Literal deeper in matched structure. <%- city.label.u %> template(city.label) Rendered template for sub element. <%- template(city.label) %> Table 2: Overview of the most important template commands available. lates. This is shown in Figure 10, where the rdf:label gets ombined with a pre-existing rdf:abstract template to form new head template. Fribourg(Q36378) [ edit ] capital of the canton of Fribourg in Switzerland [ edit ] FreiburgAlso known as: [ edit ] Item Discussion Read View history Search Main page Community portal English Create account Log in
  22. 22. Related Work 24 Uduvudu Callimachus Balloon Syn. Fresnel Exhibit LESS Level of Template Subgraph Application JS Selector Subgraph Subgraph Projection Description of Template under- score.js RDFa Template s Handlebar Fresnel Formats Exhibit Lenses Smarty Recursive Use of Template Y N N Y N N Context Awareness Y N N N N N Separation of Concerns Y N Y Y N Y Editor Y Y N N N Y
  23. 23. Future Work Optimize implementation for more speed and introduce reactivity. Create a sort of “baked” templates which are optimized for a data source. Automatic or semi-automatic generation of templates. Extension of the editor for more functionality. Build a user platform where styles can be shared. 25
  24. 24. –Leonardo da Vinci “Art is never finished, only abandoned.” fin www.uduvudu.org reusability, defined set of facts, separation of concerns, use of inherent structure, language, context aware templates
  25. 25. WebComponents http://www.w3.org/TR/components-intro/ Uduvudu will be provided as a WebComponent: <uduvudu  styles=“http://..”>     …triples…   </uduvudu>   ! Uduvudu can use WebComponents inside its Templates. 27
  26. 26. About: Fribourg An Entity of Type : municipality, from Named Graph : http://dbpedia.org, within Data Space : dbpedia.org Fribourg is the capital of the Swiss canton of Fribourg and the district of Sarine. It is located on both sides of the river Saane/Sarine, on the Swiss plateau, and is an important economic, administrative and educational center on the cultural border between German and French Switzerland. Its Old City, one of the best maintained in Switzerland, sits on a small rocky hill above the valley of the Sarine. Property Value dbpedia-owl:PopulatedPlace/areaTotal 9.32 dbpedia-owl:abstract Fribourg is the capital of the Swiss canton of Fribourg and the district of Sarine. It is located on both sides of the river Saane/Sarine, on the Swiss plateau, and is an important economic, administrative and educational center on the cultural border between German and French Switzerland. Its Old City, one of the best maintained in Switzerland, sits on a small rocky hill above the valley of the Sarine. Freiburg ist eine Schweizer Stadt und Hauptort des Saanebezirks sowie des Kantons Freiburg. Zur Unterscheidung von Freiburg im Breisgau wird gelegentlich der Zusatz im Üechtland oder im Üchtland (kurz i. Ü. ) verwendet. Freiburg, beidseits der Saane im Schweizer Mittelland gelegen, ist ein wichtiges Wirtschafts-, Verwaltungs- und Bildungszentrum mit zweisprachiger Universität an der Kulturgrenze zwischen deutscher und französischer Schweiz. Sie besitzt eine der am besten erhaltenen und grössten zusammenhängenden historischen Altstädte der Schweiz auf einem schmalen Felssporn über dem Tal der Saane. Fribourg est une ville et une commune suisse du canton de Fribourg, sur la Sarine. C'est la capitale du canton de Fribourg et le chef-lieu du district de la Sarine. Fribourg est une ville bilingue, avec un cinquième de la population germanophone. Elle est située de chaque côté de la Sarine sur le plateau suisse à la frontière culturelle entre la Suisse alémanique et romande. Elle est un important centre économique, administratif et éducatif et comprend une Université. Elle est placée sous le patronage de saint Nicolas de Myre, de sainte Barbe et de sainte Catherine d'Alexandrie. Fribourg fait partie du périmètre de l'AGGLO Fribourg - Freiburg. dbpedia-owl:areaTotal 9320000.000000 (xsd:double) dbpedia-owl:canton dbpedia:Canton_of_Fribourg dbpedia-owl:country dbpedia:Switzerland dbpedia-owl:district dbpedia:Sarine_District dbpedia-owl:elevation 610.000000 (xsd:double) dbpedia-owl:maximumElevation 702.000000 (xsd:double) dbpedia-owl:municipalityCode 2196 dbpedia-owl:neighboringMunicipality dbpedia:Granges-Paccot dbpedia:Pierrafortscha dbpedia:St._Ursen dbpedia:Givisiez dbpedia:Marly,_Fribourg dbpedia:Düdingen dbpedia:Villars-sur-Glâne dbpedia:Tafers dbpedia-owl:postalCode 1700 dbpedia-owl:thumbnail http://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Panorama_Fribourg_107.JPG/200px-Panorama_Fribourg_107.JPG
  27. 27. Fribourg Fribourg (French pronunciation: [fʁibuʁ]; Arpitan: Fribôrg/Friboua, IPA: [fʁibwa] ; German: Freiburg or Freiburg im Üechtland, Swiss German pronunciation: [ˈfrib̥ʊrɡ]; Italian: Friburgo or Friborgo) is the capital of the Swiss canton of Fribourg and the district of Sarine. It is located on both sides of the river Saane/Sarine, on the Swiss plateau, and is an important economic, administrative and educational center on the cultural border between German and French Switzerland (Romandy). www.ville-fribourg.ch Elevation: 610.0 m Area: 9.32 km Temperatures per Month Temperatures in °C/month: Average Low, Daily Mean, Average High Humidity per Month Fribourg/Freiburg 2 Report a map errorMap data ©2015 Google Terms of Use

×