1. Michael Luggen, Adrian Gschwend, Bernhard Anrig,
Philippe Cudré-Maurox, Firenze 2015
Uduvudu
a Graph-Aware and
Adaptive UI Engine for
Linked Data

2. 16th of May 2015
at only 1600m elevation!

3. Was Leonardo da Vinci an early master of
visualisation techniques?
3

4. 4

6. 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

8. 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

9. 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

10. 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

11. 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

12. 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

13. Demo
UDUVUDU - DBpedia Viewer
http://dbpedia.exascale.info
LOD events eXplorer
http://explorer.nexacenter.org
13

14. 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

15. SPARQL
Graph File
App. Logic
Matcher
Renderer
Device
Templates
Context
Denitions
User
Language

16. 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.

17. 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

18. 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

19. 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

20. 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

21. Template I
uvsb:address
a
uv:Template
;
uv:abstractTemplate
uvsat:address
;
uv:device
'desktop'
;
uv:template
'…'.
21

22. 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

23. 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

24. 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

25. 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

26. –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

27. 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

29. 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

30. 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