Uduvudu: a Graph-Aware and Adaptive
UI Engine for Linked Data
Michael Luggen Adrian Gschwend
eXascale Infolab Division of Computer Science
University of Fribourg Bern U. of Applied Sciences
Fribourg—Switzerland Biel—Switzerland
Bernhard Anrig Philippe Cudré-Mauroux
Division of Computer Science eXascale Infolab
Bern U. of Applied Sciences University of Fribourg
Biel—Switzerland Fribourg—Switzerland
ABSTRACT a UI is a singularly tedious task. We identify those two is-
Creating good User Interfaces (UIs) to render Linked Data sues as important barriers precluding the broader adoption
visually is a complex task, often involving both UI and of Linked Data formats in the industry. Note that we make
Linked Data specialists. The resulting solutions are typi- a difference between Linked Data visualization—where the
cally application-dependent and difficult to adapt or reuse goal is to build interfaces to easily navigate or summarize
in a different context. To tackle this problem, we propose large quantities of data, and Linked Data rendering—where
Uduvudu, a flexible, open-source engine to visualize Linked the goal is to select and individually render key values from
Data. Our engine is built in JavaScript and runs in the the data. We specifically target the latter problem in this
browser natively. Non-specialist users can use Uduvudu to work, and propose a framework to easily create Linked Data
describe recurring subgraph patterns occurring in their data. UIs.
They can then flexibly and automatically extract, transform,
and visually render such patterns in multiple ways depend- Our framework, called Uduvudu, considerably speeds up the
ing of the usage context. Uduvudu is intuitive, flexible, and development of Linked Data UIs by streamlining the data
efficient and makes it possible to jump-start the development extraction, transformation, and rendering process through
of complex user interfaces based on Linked Data without the an explicit workflow. It allows several types of experts in-
need of data specialists. cluding data specialists, user interface experts, and graph-
ical designers, to efficiently collaborate to produce the UI.
Keywords Our framework is furthermore flexible, in the sense that it
Templating, Visualization, User Interface, Development can render any valid RDF data irrespective of its schema or
Process, Linked Data, RDF missing values, and produces reusable UIs and patterns that
can be applied to different contexts and data.
1. INTRODUCTION We introduce a UI Creation process which enables teams
Companies are progressively adopting Linked Data in their to share the work of building good user interfaces. To sup-
internal IT ecosystems. As a result, they are increasingly in- port this process, we contribute an architecture dedicated to
terested to leverage Linked Data to build better User Inter- Linked Data. By creating an intermediate tree representa-
faces (UIs), both for their employees and for their customers. tion (Figure 5), extracted from the input graph (Figure 4) to
Ideally, there should be as little information loss as possible build the resulting visualization (Figure 6), our architecture
when exporting the Linked Data to the UI. Often, however, ensures the reuse of templates.
Linked Data is transformed into less expressive data formats
that are then rendered in a simplistic fashion in the inter- The rest of this paper is structured as follows. We start by
face. The exported Linked Data typically looses some of reviewing related work in the fields of Linked Data visualiza-
its structure, its semantics and/or some of its links. Ulti- tion and rendering in Section 2. Then, we give an overview
mately, it becomes impossible to use the representation in of the UI creation process we designed for our framework in
the interface to write data back into the graph. Also, hand- Section 3. We introduce our framework architecture and its
ling arbitrary Linked Data in order to render it properly in components in Section 4. Finally, we discuss a series of uses-
cases for which Uduvudu was successfully used in Section 6,
before concluding in Section 7.
2. RELATED WORK
There is a multitude of visualization approaches discussed in
the scientific literature. Below, we provide an overview on
the available frameworks focusing on the presentation layer
Copyright is held by the author/owner(s). WWW2015 Workshop: Linked
Data on the Web (LDOW2015). of Linked Data. We also discuss the well-known Fresnel
framework and how it compares to Uduvudu.
Uduvudu Callimachus Balloon Syn. Fresnel Exhibit LESS
Level of Template Subgraph Application JS Selector Subgraph Subgraph Projection
Description of T. underscore.js RDFa Templates Handlebars Fresnel Formats Exhibit Lenses Smarty
Recursive Use of T. 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
Table 1: Comparison of frameworks on their template capabilities.
Most of the related work focused so far on the exploration (with street, city, and country values) can for instance be
and visualization of Linked Data. The focus of many sys- quite different from an address containing only the country
tems is hence either on how to effectively explore large quan- or city name. Other researchers have also struggled with
tities of Linked Data, or on how to compactly aggregate large this limitation of Fresnel [5].
data to visualize it. Less attention has been given to the case
where a data publisher already knows exactly which parts Through a mechanism called lenses, users can define which
of the data he/she wants to publish. properties have to be selected in an RDF graph. The user
has to specify which lenses shall be used for which graph as
Table 1 summarizes how Uduvudu’s template capabilities well as to indicate all the corresponding properties. From
compare to existing systems. As the table indicates, Udu- our perspective, the selection of which information is to be
vudu is, to the best of our knowledge, the only framework rendered should be part of the application logic instead, e.g.,
allowing the flexible description and recursive use of context- by providing a declarative representation (e.g., a SPARQL
aware templates to visualize Linked Data (more on those query) of the targeted data upfront.
topics in Section 4). In addition, Uduvudu imposes a strict
separation of concerns (see Section 3) w.r.t. the data selec- The formatting step in Fresnel uses Formats to do simple
tion, the matching of available templates and the rendering string manipulations and Cascading Style Sheets to describe
based on the context. Finally, it features a full-fledged and the rendering. While this approach makes it possible to
intuitive editor, presented in more detail in Section 5. create fairly complex renderings, it is also in our opinion
intimidating for the designers, who most often do not have
2.1 Overview a deep understanding of the OWL syntax. Also, it is not
Brunetti et al. [4] recently introduced the Formal Linked possible to inject or attach transformation code to create
Data Visualization Model. The framework identifies a vi- complex renderings and visualizations. Finally, the output
sual processing pipeline composed of three main components generation step of Fresnel is using the prepared information
(Analyzer, Visualization Transform and Visualizer). The from the formatting step to render the visualization. Hence,
last two steps of the architecture match our own approach it it not possible to change the representation based on the
(their first step being out of scope for this work). Their context, which is a very important requirement in practice
approach analyze Linked Data structures with the goal of and has been one of the original ideas behind the Semantic
choosing the possible visualizations. Our implementation Web [3]. We think that the context of the presentation layer
has been partly influenced by this approach, with the impor- should be incorporated into the framework itself, and that
tant difference that the goal of Uduvudu is not necessary to is should support the developers in their task of creating
aggregate data for visualization, but rather to create a flex- adaptive user interfaces.
ible framework to render specific portions of Linked Data.
Their paper also gives an extensive overview of the different 2.3 Template-Based Presentation
visualization libraries used in the Linked Data context. In [7], Khalili et al. present an extensive overview of how
user interfaces relate to ontologies. In this work, we do not
2.2 Fresnel focus on the creation, completion or interaction with ontolo-
Fresnel [8] is a well-known approach in the field of RDF visu- gies. Instead, our focus lies on the rendering of Linked Data.
alization and presentation. Fresnel was originally designed Furthermore, our framework does not even require a valid
to create common styles for the description of classes in RDF ontology or schema to begin with.
browsers. Because of this, it inherently assumes that an on-
tology is present in the system in order to visualize the data. The use of templates for presentation of semantic data was
Fresnel allows to specify in a detailed manner how to render introduced through Lens Templates in Exhibit [6]. They
data value properties. Creating more elaborate visual rep- allow to create complex HTML structures that are familiar
resentations is however often complex, since the framework to web designers. Because Exhibit uses a sub model of RDF
never was intended for such jobs. which is defined as JSON structures, there was no need to
tackle potentially cyclic graph structures. The templates
We experienced further problems when working with Fres- in Exhibit are coupled to the application (defined in html),
nel. First, ontologies typically do not provide a way to indi- which requires some interaction with the developer in order
cate if an attribute might be optional. While this is expected to be reused.
for RDF data processing, this poses problems at the presen-
tation layer where it is crucial to know precisely which in- Templates used to render RDF data directly were introduced
formation is available. The rendering of a complete address through LESS [1], which also partially removes the need of
ontologies to create RDF visualizations. Based on a use-case In addition, the ability of Uduvudu to flexibly combine tem-
defined through a SPARQL query, a template is mapped to plates to create bigger structures makes it possible to adapt
render the output. The authors use an extended version of a the presentation according to the availability of data facts.
Web template language (Smarty) to then render the results.
In addition, they propose a repository of templates which 3. LINKED DATA UI CREATION PRO-
can be reused.
CESS
Both frameworks allow to recursively include other tem- In order to tackle the challenges described above, we adapt a
plates. Uduvudu enforces the possibility of creating fine- process workflow to streamline the creation of UIs for Linked
grained templates at all levels, without requiring any on- Data. Our process is driven by three different actors:
tology or schema beforehand. We think that the poten-
tial reuse of these smaller templates is higher than coarser-
grained mechanisms. The data expert is the person (or group) having knowl-
edge on the Linked Data that needs to be rendered.
Callimachus [2] provides a full-stack solution allowing The UX specialist is the user experience person (or
to build complete applications. As a part of the stack, group) knowing how to best transform and restructure
a template-based mechanism to create RDFa templates the data for the application at hand.
is introduced. These templates are highly-coupled to
the applications at hand. This differs to Uduvudu The graphical designer, finally, is the person (or group)
where templates are matched to the data at hand while specialized in creating effective visual renderings of
Callimachus fetches the necessary data to fill a template data structures.
(through creating a SPARQL request).
Balloon Synopsis [9] is an RDF Browser framework where Those three roles might be assumed by the same person
templates are coupled with JavaScript functions to discover in small settings, but will typically be assumed by distinct
matching data structures. In Uduvudu, the matching part is persons in larger companies. Our UI creation process is
decoupled from the templates. Furthermore, no knowledge given in Figure 1. The overall process can be summarized
of any programming language is required when matching as follows:
structures. Finally, Uduvudu is designed as an engine to
render general UIs, where a RDF browser might be one of
its use-cases but not the sole focus. • First, the data expert gathers and exports the data
that needs to be rendered.
Our framework extends the aforementioned approaches in
several ways, most prominently by the automatic selection • The selected data is then passed to the UX specialist,
of the templates based on the input data, by the creation who restructures it for rendering purposes.
of a more flexible rendering process, and by templates that • Finally, the graphical designer takes the various data
can match incomplete data. structures built by the UX designer and builds the vi-
sual rendering of the data.
Data Expert UX Specialist Designer User
Asks for needed
data fields.
SPARQL
Assembles graph
Graph File
App. Logic G Zero-input fallback
Creates matchers M1
F
Designs Templates T1
S
Missing information
detected.
Iterative development
Figure 1: The UI creation process is split in multiple roles.
The Linked Data UI creation process we propose has a num-
ber of distinct advantages, including: SPARQL
Graph File
App. Logic
Clear separation of roles: involving the data expert—or
the other specialists—throughout the entire process G: RDF Graph representing
can be very costly in practice [4]. Instead, our pro- User Interface Screen
cess introduces a clear separation between the tasks R: Set of Start Resource URIs
undertaken by the different specialists, resulting in a ? ?
better repartition of work and in increased autonomy ?
Definitions
for the experts. Matcher M1: ? ?
Iterative development process: new elements can be
? ?
added to each task without blocking the other tasks.
F: Ordered Forest of Structures
That way, the experts can iterate on their own design with references to Template Sets
autonomously without consulting the other experts.
?
?
Templates
Highly reusable outcome: as the the three tasks are ?
Renderer T1:
partially decoupled, all the individual pieces of data,
?-?
Context
data, or application flexibly. S: String of Serialized Output
Desktop
Zero-input fallback: any valid Linked Data provided by Mobile, Français
Device
the data specialist can be rendered without any ad- Desktop, User22, Deutsch
ditional processing from the UX specialist or from the
graphical designer (in that case, the data is simply ren-
dered as lists of strings displayed at the bottom of the
rendering). Language
4. ARCHITECTURE User
The architecture we adopted for our framework was directly
based on the creation pipeline described above, as well as Figure 2: Overview of the Uduvudu architecture with the
on a series of prerequisites we elicited from data experts, main components Matcher and Renderer.
UX specialists and graphical designers. It is composed of
three main components: the selector choosing the input, the
matcher which discovers known structures in the selected in- Handle language transparently, until needed specifical-
put, and the renderer which incorporates the visualization ly: specific languages add a level of complexity to every
context to render. Figure 2 gives an overview of our ar- application. Hence, we feel that for our process, if lit-
chitecture. We start below by introducing the prerequisites erals are available in multiple languages, only the one
of our architecture, before giving some detail on each of its matching the context language should be presented,
three main components. while still keeping the possibility to fine-tune and con-
trol the language if necessary depending on the appli-
4.1 Pre-requisites cation at hand (e.g., showing multiple languages).
Through our own experience and interviews with Linked Maximize the dynamic composition of information:
Data specialists, UX experts and graphical designers, we our goal is not to come up with highly-complex
came up with a set of pre-requisites for our architectures: renderings composed of thousands of distinct
elements. Rather, we target usual business interfaces
composed of a few dozens elements at a time
Never show URIs to non-technical end-users: They are maximum. Hence, our goal is not to come up with
systematically confused when confronted to data URIs a highly-optimized and scalable rendering engine
displayed in a graphical interface. While data URIs but rather to propose a dynamic composition model
are essential to uniquely identify entities and proper- where Linked Data and templates can by dynamically
ties on the Web of data, they should not be used in recycled and integrated in order to create the final
mundane graphical interfaces where plain literals and rendering.
labels should be preferred.
Leverage the extracted data structure for the render-
ing: the way data is extracted from the original data
typically follows long deliberations and some decision 4.2 The Data Selector
process. We think that the resulting structures should We now turn to the description of the three main compo-
be leveraged as much as possible for the creation of the nents of our architecture. First, we start with the Data
final user interface. Selector, which decides which data that will be transformed
and rendered. Based on the use-case at hand, one needs to The matcher takes as input an input graph G and one or
select and combine the relevant Linked Data from one or several corresponding known structures from its catalogue
several sources. The decision on which part to select from and returns as output a tree structure (see Algorithm 1)
the available data sources is typically an internal process, with at least one pointer to a rendering structure from the
which is outside the scope of the present paper. Renderer (see below Section 4.4). The output is split into
a set of multiple tree-structured sub-graphs with additional
Any selector which supports classical Linked Data input, information about the template and a precedence number.
e.g., through a SPARQL query, an RDF/XML dump or All input data is eventually consumed through this process.
triples serialized in one or several text files can be used.
Uduvudu does not expect any inherent structure from the At this step, we like to mention that a pointer pointing back
data (though it must be well-formed), which does not need to the input graph is attached to the tree for every literal.
to comply to any specific ontology or structure at this stage. This makes it possible to provide a simple form of data lin-
Hence, the selector takes as input a superset of all informa- eage, as well as to create applications which can write back
tions that need to be shown to the end-user, and trim them to the input graph.
to an input graph G containing exactly the information that
needs to be rendered. This step is typically carried out by a During this process, all information is treated equally except
data specialist. Figure 3 gives a simple example input graph identical properties available in multiple languages. To pro-
corresponding to Figure 4. vide language information in a transparent manner, the lit-
erals which are provided in multiple languages are grouped
@base . component to select the correct language based on the con-
text, without analyzing the graph again in more detail.
a vcard:Individual;
vcard:fn "Corky Crystal";
vcard:hasAddress ;
vcard:hasTelephone ;
Catalogue of Matchers (Known Structures). We adopt
vcard:nickname "Corks". a simple yet generic way to match RDF subgraphs and to
generate trees. To initiate the matching process, providing
a vcard:Home, a vcard:Voice; an entry point in the RDF data is preferable. This start re-
vcard:hasValue "tel:+61755555555". source is a URI which denotes the node in the graph which
will be used to begin the matching process. If no start re-
a vcard:Home; source is provided, the matcher falls back to try all nodes
vcard:country-name "Australia"; available to start the matching. Even though it is more flex-
vcard:locality "WonderCity"; ible, this fall back approach needs more processing power
vcard:postal-code "5555"; compared to the former.
vcard:street-address "111 Lake Drive".
The matching process is implemented as a guided graph
traversal. Based on the current start resource, all match-
Figure 3: G: an input RDF graph serialized using the Turtle
ing functions which are able to proceed through a predicate
format
edge to the next node are listed. The set of functions which
incorporates the highest amount of nodes is selected to be
4.3 Structure Matcher added to the set of trees. After this step, the matched nodes
The second component in our architecture, the Structure are deleted from the input graph and the same procedure
Matcher, holds a catalogue M of known structures (match- starts over on the remaining nodes. The current solution is
ers) and tries to match parts of this catalogue onto the input based on three types of matching functions:
graph G.
The catalogue contains on one hand custom matchers that Data: Graph G, Start Resource URIs S, Matcher
describe dedicated processings for specific data patterns, and Functions M1
predefined matchers on the other hand that act as a fall-back Result: Forest with References to Template Sets F
solution in case no custom matcher can be matched to some Function Matcher()
node in the input graph. Figure 7 gives an example of a foreach Matcher Function M1 do
structure matcher. Process G with Function;
if Result then Add to Proposals P ;
The custom structures in the catalogue are typically pro-
end
vided by the UX specialist. They are serialized as JSON
if Proposals P available then
structures in our implementation (see below), and can be
Find best P add to F ;
generated through a GUI or can be based on an RDF pro-
Delete Nodes covered by P from G;
cessor. In order to make the definitions in the catalogue
Call Matcher() with remaining G;
as reusable as possible, they are all built hierarchically as
else
tree structures. This gives the possibility to attach a tem-
Add remaining Nodes each as Tree to F ;
plate at every step and also to regroup already matched
end
data structures into bigger structures, without touching the
Algorithm 1: Matcher Algorithm
inner-working of the smaller structures.
list predicateMatchers:
Corky Crystal
mailto:corky@example.com vcard_fn
Corks il vcard_nickname
ma
:h asE vcard_postal-code uu
V alue
e ard rd:has
am
v ca
vcard:fn
vc tel:+61755555555 vcard_street-address
ck n
lep h o ne
asTe
vcard:ni
http://example.com/me/corky#telephone vcard_country-name
rd:h
v ca vcard_locality
http://example.com/me/corky list combineMatchers:
vc vcard_address as "address"
ess 111 Lake Drive
addr
ar
eet- [’vcard_locationLink’,’vcard_nameCombine’]
d:h
rd :str locality
asA
: vcard_location as "location"
vca vcard stal-code WonderCity
:po
d
vcard untry-nam [’vcard_cityLine’,’vcard_street-address’]
dres
co e
vcard: 5555 vcard_cityLine as "city"
s
Australia [’vcard_locality’,’vcard_postal-code’,
http://example.com/me/corky#address ’vcard_country-name’]
vcard_nameCombine as "aka"
[’vcard_fn’,’vcard_nickname’]
Figure 4: G: An example input graph.
(based on http://www.w3.org/TR/vcard-rdf/) list linkMatchers:
vcard_locationLink as "location_link"
on
[’vcard_location’]
vcard:fn
aka
vcard:nickname vcard:locality Figure 7: An example structure matcher with three different
matching definitions: vcard : ID of matcher, <*>: Predi-
vcard:postal-code cate matched, [’*’, ... ] : Referred IDs, ”*”: Variable Name
address
city vcard:country-name
:hasA ddres
vcard s
location_link
New or more specific matcher type can be created or de-
location vcard:street-address rived from the above matchers whenever necessary. As an
example, we recently created a SchemaMatcher. It can in-
Figure 5: F : After the matching, the example tree structure corporated RDF classes in the graph traversal in order to
which can be mapped on a template. attach templates based on specific ontologies.
4.4 Adaptive Renderer
✉
Corky Crystal [aka Corks]
111 Lake Drive
The adaptive renderer takes as input the tree structure given
WonderCity 5555 AUSTRALIA by the matcher (F , see for instance Figure 5), the available
context variables (language, user, device) and the provided
templates (T , see for instance Figure 8) to finally render
Figure 6: S: Final visualization after the rendering by a tem-
the output. The templates are written in HTML and access
plate T , including the context.
the tree structure through escaped variable definitions (see
Table 2 for details).
PredicateMatcher: this matching function only considers Before the input is combined with the template, the
a predicate to match and a direction for the traversal; structure is prepared by a language subcomponent, which
this can be illustrated through either one of these se- determines—based on the language context—which literals
lecting SPARQL statements: to use.
{ ?O.} or
{S? .} For each template pointer, multiple templates can be avail-
able. When no specific template is specified, a combination
CombineMatcher: sets of triples are often regrouped in of the deepest underlying templates available in the hierar-
the datasets, e.g., for an address, which can consist of chy will be combined together. The templates in the deeper
a locality, a zip code, a street, and so on. This match- levels of the hierarchy will be chained in place. As a set
ing function matches such sets by combining multiple of simple fallback templates are defined for all literals, it
functions (PredicateMatchers or other functions). is hence assured that all provided data will be rendered at
least in its simplest form.
LinkMatcher: this matching function supports simple
navigation inside an RDF graph. It allows to hop The different templates have different flags attached denot-
from a start resource to another URI, which is then ing the context in which they have been prepared. It is the
defined as a new start resource. For this function duty of the renderer to decide which is the best suitable tem-
also, it is possible, like for the PredicateMatcher, to plate for the context at hand. The different flags describing
specify if the resource URI is in the subject or object the contexts can be on the input / output (device), the use-
position. case, the targeted user, or the language. Those flags allow to
pre-processing of the input graph needs to be provided by
the application logic.
<%-address.aka.fn.u%> 5. EDITOR
[aka <%-address.aka.nickname.u%>]
Our framework also supports a simple yet intuitive and pow-
<%-address.location_link.0.location.street-address.u%>
erful editor. As it is possible to render an output at any
<%-address.location_link.0.location.city.locality.u%> time, the editor is simply based on the results incorporating
<%-address.location_link.0.location.city.postal-code.u%> the available templates. Matchers and their corresponding
<%print(address.location_link.0.location.
templates can be added iteratively to create templates for
city.country-name.u.toUpperCase())%>
bigger structures.
label: i e + label: i e +
Friburgo (Suiza)
edit
フリブール
label: i e + label: i e +
Фрибур Friburgo (Svizzera) Creates a basic predicate matcher.
Figure 8: T1 : The template used to render our example. label:
Fribourg
i e + label:
弗⾥里堡
i e +
matcher
Predicate:
This example deliberately does not reuse deeper templates. label: i e + label: i e +
http://www.w3.org/2000/01/rdf-schema#label
Freiburg im Üechtland Friburgo (Suíça)
The variables that are structured in a tree object, are ac- label: i e + label: i e + Matcher
Name:
Fribourg (Suisse) Fryburg (miasto w Szwajcarii)
cessed inside the variable blocks (denoted through <%- and label: i e + point: i e +
label
Template
Variable:
%>.) Fribourg (stad) 46.8 7.15
title
lat: i e + long: i e +
46.799999237060546875 7.1500000953674316406
Order
:
name: i e + 100000
Fribourg/Freiburg
easily change the rendering based on the context provided. comment: i e + template
Freiburg (französisch Fribourg [fʀiˈbuʀ], schweizerdeutsch [ˈfribʊrg], frankoprovenzalisch
Template
ID
:
Friboua?/i) ist eine Schweizer Stadt und Hauptort des Saanebezirks sowie des Kantons
Freiburg. h1_title
Context information is not always guaranteed to be avail- comment:
Fribourg (French pronunciation: [fʁibuʁ]; Arpitan: Fribôrg/Friboua, IPA: [fʁibwa] ; German:
i e +
<%-title.u%>
Freiburg or Freiburg im Üechtland, Swiss German pronunciation: [ˈfrib̥ʊrɡ]; Italian: Friburgo or
able. The output device and language are usually the most 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,
readily available types of context information, typically fol- administrative and educational center on the cultural border between German and French
Switzerland (Romandy).
Add Matcher & Template
lowed by the user at hand. The decision on which template comment:
Friburgo (em francês: Fribourg; em alemão: Freiburg) é uma comuna suíça do cantão de
i e +
Friburgo às margens do rio Saarne ou Sarine. Em alemão, ela carrega também o nome de
to use is solved by giving the output device the highest pri- Freiburg im Uechtland para distingui-la dos outros Friburgos (notadamente a cidade alemã de
Freiburg im Breisgau). O nome completo em francês Fribourg en Nuithonie é pouco
ority and enforcing it if available. The remaining available Figure 9: Rendering of http://dbpedia.org/page/Fribourg
conhecido.Com cerca de 36 544 habitantes, estende-se por uma área de 9,32 km², de
densidade populacional de 3 921 hab/km².
context variables are used to find the best match within the with no templates defined (left), in edit mode with rdf:label
comment: i e +
Fryburg (fr. Fribourg, niem. Freiburg im Üechtland lub Freiburg, ret. Friburg, wł. Friburgo) –
available templates. The template with the most matching staged (right).
miasto w Szwajcarii nad rzeką Sarine, stolica kantonu Fryburg.Fryburg leży na styku dwóch
wielkich regionów etnicznych i językowych w Szwajcarii, których granicę wyznacza tu Sarine.
Wiele miejscowości leżących nad tą rzeką poniżej Fryburga posiada podwójne nazwy: na
flags is chosen by the system. If there is still some ambigu- lewym brzegu francuskie, a na prawym niemieckie.
i e + i e +
comment:
ity, the priority is set as follows: Use-case, user, and finally Fribourg
フリブール（フランス語：Fribourg、標準ドイツ語：Freiburg im Üechtland 、スイスアレマン
edit
語：Fryburg im Üechtland）は、スイスのフリブール州に属する基礎⾃自治体（コミューン） 。
language. ドイツ語名でフライブルク（正式名はフライブルク イム ユヒトラント）と呼ばれることも
Fribourg (French pronunciation: [fʁibuʁ]; Arpitan: Fribôrg/Friboua,
あるが、「フライブルク」という名の都市はドイツ IPA: [fʁibwa] ; German:i e +
バーデン＝ヴュルテンベルク州のフライ
Combine multiple matchers to a new matcher.
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
は区別のためもあり、主にフランス語名でフリブールと呼ばれる。⼈人⼝口は約3万6千⼈人（2003 matcher
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 Matcher
Name:
4.5 Extensibility Switzerland
comment: (Romandy). Its Old City, one of the best maintained in Switzerland, sits on a small
rocky hill (Duits:
Fribourg above the valleyim
Freiburg of Üechtland
the Sarine./ Frans: Fribourg / Reto-Romaans: Friburg / Latijn:
Friburgum Nuithonum) is de hoofdstad van het gelijknamige Zwitserse kanton Fribourg. De stad
i e + head
i e + lat: i e + Template
Variable:
point:
We mentioned in the introduction that our architecture was ligt in het district Sarine (Duits: Saane) op de Frans-Duitse
46.8
in de7.15
taalgrens, is officieel tweetalig, maar
46.799999237060546875
praktijk voornamelijk franstalig. De naam betekent Vrije burcht. head
designed to be highly extensible. In the short introduction long:
comment:
7.1500000953674316406
i e + name:
Fribourg/Freiburg
弗⾥里堡是瑞⼠士弗⾥里堡州的⾸首府，它的法語名是弗⾥里堡（Fribourg），德語名是弗萊堡
i i e e ++ Order
:
of the architecture, we saw how the behavior of the pipeline （Freiburg）。⾯面積9.32平⽅方公⾥里，⼈人⼝口33418（2006年12⽉月31⽇日）。弗⾥里堡位于瑞⼠士德語區和
comment:
法語區的交界處，63.6%的⼈人說法語，21.2%的⼈人說德語，3.8%的⼈人說意⼤大利語。
Freiburg (französisch Fribourg [fʀiˈbuʀ], schweizerdeutsch [ˈfribʊrg], frankoprovenzalisch
i e +
100000
tpl_6.label tpl_6.abstract
can be extended by adding new matcher definitions and, ac- Friboua?/i)
comment: ist eine Schweizer Stadt und Hauptort des Saanebezirks sowie des Kantons i e +
Freiburg.
Friburgo (en francés Fribourg/Fribourg en Nuithonie, en alemán Freiburg/Freiburg im Üechtland,
en italiano Friburgo y en romanche Friburg) es una pequeña ciudad de Suiza occidental, capital
template
cordingly, template definitions. For the template definitions, comment: i e +
del cantón de Friburgo y del distrito de Sarine. Friburgo es una de las tres ciudades bilingües
Fribourg
Template
ID
:
de Suiza,(French pronunciation:
unas 21.000 personas[fʁibuʁ]; Arpitan: mientras
hablan francés, Fribôrg/Friboua,
que unasIPA: [fʁibwa]
8.300 ; German:
hablan alemán. Se
the system can be extended dynamically, as multiple tem- Freiburg
ubica enorla Freiburg im Üechtland,
región llamada Swiss German pronunciation: [ˈfrib̥ʊrɡ]; Italian: Friburgo or
Üechtland.
Friborgo) is the capital of the Swiss canton of Fribourg and the district of Sarine. It is located on
head
both sides of the river Saane/Sarine, on the Swiss plateau, and is an important economic,i e +
comment:
plates can be defined for the context variables per matcher administrative and educational
Фрибу́ р (фр. Fribourg)
Switzerland (Romandy).
столица кантона
или Фра́center
йбургon the Freiburg)
(нем. cultural border between
— город German
на западе
Фрибур.Город многоязычен: около 58 % населения говорят по-
and French
Швейцарии,
<%=head.label.u%>
<%=template(head.abstract)%>
definition. Thus, by adding new templates for new kinds of французски, 22 % — по-немецки, 5 % — по-итальянски. При населении в 37 200 человек
comment:
(2007) свыше 10 000 — студенты здешнего университета.Святые покровители города —
Friburgo
i e +
Николай(em francês: Fribourg;
Чудотворец em alemão:
и Екатерина Freiburg) é uma comuna suíça do cantão de
Александрийская.
devices or for new users or user groups, the behavior can Friburgo às margens do rio Saarne ou Sarine. Em alemão, ela carrega também o nome de
Freiburg
comment: im Uechtland para distingui-la dos outros Friburgos (notadamente a cidade alemã de +
i e Add Matcher & Template
Freiburg
Fribourg im(enBreisgau).
allemand O nome completo emfribourgeois
francês Fribourg en Nuithonie é pouco
also be dynamically adapted based on the context. conhecido.Com
commune suissecerca
densidade
: Freiburg,
de 36 de
du canton
en patois
544Fribourg,
habitantes,
sur estende-se
: Friboua
por uma
la Sarine. C'est
Friboua ) est
área dedu9,32
le chef-lieu
une ville et une
km²,de
canton deFribourg
et celui du populacional de 3 921 hab/km².
district de la Sarine.Fribourg est une ville bilingue, avec près d'un cinquième de la
population germanophone. Elle est située de chaque côté de la Sarine sur le plateau suisse à la
Figure 10: The same interface as in Figure 9 after the defi-
comment:
frontière culturelle entre la Suisse alémanique et romande.
Fryburg (fr. Fribourg, niem. Freiburg im Üechtland lub Freiburg, ret. Friburg, wł. Friburgo) –
i e +
On the source code level, it is possible to extend the different miasto
comment:w Szwajcarii nad rzeką Sarine, stolica kantonu Fryburg.Fryburg leży na styku dwóch
nition of a matcher and a template respectively for rdf:label
wielkich regionów etnicznych i językowych w Szwajcarii, których granicę wyznacza tu
i e +
Sarine.
Friburgo o Friborgo (francese: Fribourg o Fribourg en Nuithonie; tedesco: Freiburg o Freiburg im
types of matchers by providing new matcher factories. A Wiele miejscowości
Üechtland; romancio:
brzegu
leżących
Friburg)nad
francuskie, a na
tą rzeką
è una
prawym
poniżej
città della Fryburga
Svizzera
and rdf:abstract. Further a new combine matcher merging
lewym niemieckie.
posiada podwójne
occidentale, nazwy:
capitale del na
canton
Friburgo. È al centro della regione storica della Nuitonia.Friburgo è una delle poche città bilingui
della Svizzera, infatti si parla sia francese (circa 21.250 abitanti) che tedesco (circa 8.300). La
matcher factory gets initialized according to the matcher comment:
religione prevalente è il cattolicesimo.
the mentioned is staged.
フリブール（フランス語：Fribourg、標準ドイツ語：Freiburg im Üechtland 、スイスアレマン
i e +
languages: im Üechtland）は、スイスのフリブール州に属する基礎⾃自治体（コミューン）
語：Fryburg i 。e +
definitions that in turn populate the tree which is handed ドイツ語名でフライブルク（正式名はフライブルク
French
あるが、「フライブルク」という名の都市はドイツ バーデン＝ヴュルテンベルク州のフライ
i e + languages:
イム
German ユヒトラント）と呼ばれることも
to the renderer. ブルク（正式名はフライブルク
mayHumidity: イム ブライスガウ）など各地に存在することから、⽇日本で
i e + decHumidity:
は区別のためもあり、主にフランス語名でフリブールと呼ばれる。⼈人⼝口は約3万6千⼈人（2003
i e +
Figure 9 shows on the left-hand side one resource
72.799999999999997158
年）。
86.900000000000005684
junHumidity: i e + febHumidity: i e +
(http://dbpedia.org/resource/Fribourg) rendered using the
comment:
71.5 81.599999999999994316
Fribourg (Duits: Freiburg im Üechtland / Frans: Fribourg / Reto-Romaans: Friburg / Latijn:
i e +
4.6 Limitations Friburgum Nuithonum) is de hoofdstad van
Sarine
78.099999999999994316 (Duits: Saane)
i ehet+gelijknamige
simple fallback template rendering. On the right-hand side,
sepHumidity:
ligt in het district op de Frans-Duitse
Zwitserse kanton Fribourg. Dei stad
octHumidity:
taalgrens, is
84.299999999999997158
in de praktijk voornamelijk franstalig. De naam betekent Vrije burcht.
officieel tweetalig,
e +
maar
Uduvudu does not enable laypersons to create stunning a first predicate matcher (rdf:label ) is already staged; by
janHumidity:
comment:
86.700000000000002842
i e + marHumidity:
75.200000000000002842
i
i e +
e +
弗⾥里堡是瑞⼠士弗⾥里堡州的⾸首府，它的法語名是弗⾥里堡（Fribourg），德語名是弗萊堡
visualizations through predefined off-the-shelf templates. simply clicking on the + icon (shown in edit mode only),
（Freiburg）。⾯面積9.32平⽅方公⾥里，⼈人⼝口33418（2006年12⽉月31⽇日）。弗⾥里堡位于瑞⼠士德語區和
i e +
法語區的交界處，63.6%的⼈人說法語，21.2%的⼈人說德語，3.8%的⼈人說意⼤大利語。
i e +
Rather, it provides a holistic framework for developers, the template was changed to render the literal as an HTML
comment: i e +
Friburgo (en francés Fribourg/Fribourg en Nuithonie, en alemán Freiburg/Freiburg im Üechtland,
which in turn have the possibility to delegate data domain, title.
en italiano Friburgo y en romanche Friburg) es una pequeña ciudad de Suiza occidental, capital
del cantón de Friburgo y del distrito de Sarine. Friburgo es una de las tres ciudades bilingües
de Suiza, unas 21.000 personas hablan francés, mientras que unas 8.300 hablan alemán. Se
UX and design tasks to the respective experts. ubica en la región llamada Üechtland.
Through the same mechanism (using the + icon), templates
comment:
Фрибу́ р (фр. Fribourg) или Фра́ йбург (нем. Freiburg) — город на западе Швейцарии,
i e +
столица кантона Фрибур.Город многоязычен: около 58 % населения говорят по-
Furthermore, the framework proposes no functionality to can be combined together to create more expressive tem-
французски, 22 % — по-немецки, 5 % — по-итальянски. При населении в 37 200 человек
(2007) свыше 10 000 — студенты здешнего университета.Святые покровители города —
Николай Чудотворец и Екатерина Александрийская.
comment: i e +
Fribourg (en allemand : Freiburg, en patois fribourgeois : Friboua Friboua ) est une ville et une
commune suisse du canton de Fribourg, sur la Sarine. C'est le chef-lieu du canton de Fribourg
et celui du district de la Sarine.Fribourg est une ville bilingue, avec près d'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.
comment: i e +
Friburgo o Friborgo (francese: Fribourg o Fribourg en Nuithonie; tedesco: Freiburg o Freiburg im
Üechtland; romancio: Friburg) è una città della Svizzera occidentale, capitale del canton
Friburgo. È al centro della regione storica della Nuitonia.Friburgo è una delle poche città bilingui
della Svizzera, infatti si parla sia francese (circa 21.250 abitanti) che tedesco (circa 8.300). La
religione prevalente è il cattolicesimo.
languages: i e + languages: i e +
French German
mayHumidity: i e + decHumidity: i e +
72.799999999999997158 86.900000000000005684
junHumidity: i e + febHumidity: i e +
71.5 81.599999999999994316
sepHumidity: i e + octHumidity: i e +
78.099999999999994316 84.299999999999997158
janHumidity: i e + marHumidity: i e +
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 %>
abel.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.
English Create account Log in
plates. This is shown in Figure 10, where the rdf:label gets
Item Discussion Read View history Search
combined with a pre-existing rdf:abstract template to form
a new head template. Fribourg (Q36378) [ edit ]
capital of the canton of Fribourg in Switzerland [ edit ]
Main page
Also known as: Freiburg [ edit ]
Community portal
In the staged example, the template of the abstract is reused Project chat
Create a new item In other languages Statements Wikipedia pages linked to this item Wikiquote pages linked to this item
(<%-template(head.abstract)%>), while the variable of the Item by title
Recent changes
Wikisource pages linked to this item Wikivoyage pages linked to this item Wikimedia Commons page linked to this item
Random item
rdf:label is accessed directly (<%-head.label.u%>). Help
Donate
In other languages
Freiburg im Üechtland [ edit ]
Language select
Deutsch
English
Schweizer Stadt und Hauptort des Kantons Freiburg [ edit ]
A more advanced editor allows users to define multiple tem- Select
Tools Fribourg [ edit ]
plates for different contexts like different devices or lan- What links here
Related changes
français
ville de Suisse et chef-lieu du canton de Fribourg [ edit ]
guages. The matchers and templates created in the editor Special pages
Printable version
Permanent link Frybùrg im Üechtland [ edit ]
can be persisted in a public or private triple store. It is also Page information
Cite this page
Alemannisch
enter description in Alemannisch [ save | cancel ]
possible to mix-in multiple matchers and template sources, Statements
which allows distinct users to create or adapt the templates topic's main portal Portal:Fribourg [ edit ]
to their own needs. 0 references
[ add reference ]
[ add ]
6. CURRENT DEPLOYMENTS country Switzerland [ edit ]
We now turn to the description of two current deployments Figure 11: Wikidata interface regarding Fribourg. 0 references
of our system. We start below by describing how we used (fetched from https://www.wikidata.org/wiki/Q36378) [ add reference ]
[ add ]
Uduvudu to build a user-friendly DBpedia front-end. Then,
we review how we used it in the context of a large-scale instance of municipality of Switzerland [ edit ]
About: Fribourg
project to render heterogeneous pieces of RDF data. 0 references
An Entity of Type : municipality, from Named Graph : http://dbpedia.org, within Data Space : dbpedia.org [ add reference ]
capital [ edit ]
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
6.1 DBpedia Frontend important economic, administrative and educational center on the cultural
Switzerland, sits on a small rocky hill above the valley of the Sarine.
Property Value
border between German and French Switzerland. Its Old City, one of the best maintained in
0 references
[ add reference ]
As a proof of concept, we used our framework to build a user- dbpedia-owl:PopulatedPlace/areaTotal
dbpedia-owl:abstract
9.32
cantonal capital of Switzerland [ edit ]
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
friendly DBpedia front-end. A live deployment of our front- border between German 0and references
French Switzerland. Its Old City, one of the best maintained in Switzerland, sits on a small rocky
hill above the valley of the Sarine. [ add reference ]
Freiburg ist eine Schweizer Stadt und Hauptort des Saanebezirks sowie des Kantons Freiburg. Zur Unterscheidung von
end is available at http://dbpedia.exascale.info. The Freiburg im Breisgau wird gelegentlich der Zusatz im Üechtland oder im Üchtland (kurz i. Ü. ) verwendet. Freiburg, beidseits
der Saane im Schweizer Mittelland
college town gelegen, ist ein wichtiges Wirtschafts-, Verwaltungs-
[ edit ] und Bildungszentrum mit
zweisprachiger Universität an der Kulturgrenze zwischen deutscher und französischer Schweiz. Sie besitzt eine der am
front-end takes as input an address describing a Wikipedia besten erhaltenen und grössten zusammenhängenden historischen Altstädte der Schweiz auf einem schmalen Felssporn über
dem Tal der Saane. 1 reference
Fribourg est une ville et une commune suisse du canton de Fribourg, sur la Sarine. C'est la capitale du canton de Fribourg et
article. Typically, the rendering of DBpedia articles are opti- le chef-lieu du district de la Sarine. Fribourg est une ville bilingue, avec un cinquième de la population germanophone. Elle est
[ addla] Suisse alémanique et romande. Elle
située de chaque côté de la Sarine sur le plateau suisse à la frontière culturelle entre
est un important centre économique, administratif et éducatif et comprend une Université. Elle est placée sous le patronage
mized for engineers who need to explore the available data. 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
type of administrative - Freiburg. municipality of Switzerland
entity [ edit ]
In Figure 12, we provide as an example a rather techni- dbpedia-owl:areaTotal
dbpedia-owl:canton
9320000.000000 (xsd:double)
dbpedia:Canton_of_Fribourg 0 references
dbpedia-owl:country dbpedia:Switzerland
cal rendering of all information about the City of Fribourg. dbpedia-owl:district
dbpedia-owl:elevation
dbpedia:Sarine_District
610.000000 (xsd:double)
[ add reference ]
WikiData provides a similar interface for their graph struc- dbpedia-owl:maximumElevation
dbpedia-owl:municipalityCode
702.000000 (xsd:double)
2196
dbpedia-owl:neighboringMunicipality dbpedia:Granges-Paccot
ture (see Figure 11). dbpedia:Pierrafortscha
dbpedia:St._Ursen
dbpedia:Givisiez
dbpedia:Marly,_Fribourg
dbpedia:Düdingen
dbpedia:Villars-sur-Glâne
Both interfaces are optimized for the exploration or mainte- dbpedia-owl:postalCode
dbpedia:Tafers
1700
nance of the underlying data itself. dbpedia-owl:thumbnail
dbpedia-owl:twinCity
http://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Panorama_Fribourg_107.JPG/200px-Panorama_Fribourg_107.JPG
dbpedia:Rueil-Malmaison
dbpedia-owl:wikiPageExternalLink http://www.villastjean.com
http://www.markstravelnotes.com/europe/switzerland/canton_fribourg/fribourg/places_of_interest/cathedral_of_saint_nicholas/
http://www.ville-fribourg.ch
The result obtained using our framework is shown in Figure Figure 12: DBpedia interface regarding Fribourg.
dbpedia-owl:wikiPageID
http://www.fotogalerien.ch/index.php?gallery=180&lang=2
164065 (xsd:integer)
13. The main two differences with the other visualizations (fetched from http://dbpedia.org/page/Fribourg)
dbpedia-owl:wikiPageInLinkCount
dbpedia-owl:wikiPageOutLinkCount
701 (xsd:integer)
240 (xsd:integer)
dbpedia-owl:wikiPageRevisionID 543927868 (xsd:integer)
dbpprop:aprHighC 13.600000 (xsd:double)
are i) the more user-friendly (and less technical) rendering dbpprop:aprHumidity
dbpprop:aprLowC
72.500000 (xsd:double)
2.900000 (xsd:double)
and ii) the reuse of the rendering definitions (matcher and dbpprop:aprMeanC 8 (xsd:integer)
dbpprop:aprPrecipitationDays 10.700000 (xsd:double)
templates) for other datasets. rendering, we prepared a set of matchers and templates in
dbpprop:aprPrecipitationMm
dbpprop:aprSnowCm
84 (xsd:integer)
2.400000 (xsd:double)
the context of cities, or populated places in general. The
dbpprop:aprSnowDays
dbpprop:area
0.900000 (xsd:double)
9.320000 (xsd:double)
This use-case deployment shows how rendering information templates provided show different kinds of renderings and
dbpprop:augHighC
dbpprop:augHumidity
24.100000 (xsd:double)
72.400000 (xsd:double)
about a complex instance, like the city of Fribourg, can be visualizations. Let us discuss the different template types
dbpprop:augLowC
dbpprop:augMeanC
12.300000 (xsd:double)
17.700000 (xsd:double)
dbpprop:augPrecipitationDays 10.500000 (xsd:double)
made in an expressive and yet inexpensive process. For this built based on our generic architecture shown in Figure 13.
dbpprop:augPrecipitationMm
dbpprop:augSnowCm
117 (xsd:integer)
0 (xsd:integer)
dbpprop:augSnowDays 0 (xsd:integer)
dbpprop:canton Fribourg
dbpprop:date August 2010
dbpprop:decHighC 4.300000 (xsd:double)
dbpprop:decHumidity 86.900000 (xsd:double)
dbpprop:decLowC -1.900000 (xsd:double)
dbpprop:decMeanC 0.900000 (xsd:double)
dbpprop:decPrecipitationDays 10.300000 (xsd:double)
dbpprop:decPrecipitationMm 72 (xsd:integer)
dbpprop:decSnowCm 12.800000 (xsd:double)
dbpprop:decSnowDays 3.100000 (xsd:double)
dbpprop:district dbpedia:Sarine_District
dbpprop:elevation 610 (xsd:integer)
dbpprop:febHighC 5.400000 (xsd:double)
This proof of concept application shows UDUVUDU rendering entries from DBpedia. It
further makes uses of linked data fragments, rdf-ext and also bootstrap and typeaheadjs.
Please start searching for an entry in DBpedia by typing at least 3 letters. To confirm your
decision select a proposition in the list.
Fribourg en
rendered in all cases.
Fribourg Map of Location: Coordinates that are attached to an in-
Fribourg (French pronunciation: [fʁibuʁ]; Arpitan: stance are shown using a map widget. To initialize the
Fribôrg/Friboua, IPA: [fʁibwa] ; German: Freiburg
or Freiburg im Üechtland, Swiss German widget, some JavaScript code gets injected on the fly.
pronunciation: [ˈfrib̥ʊrɡ]; Italian: Friburgo or
Friborgo) is the capital of the Swiss canton of Graphs of Humidity and Temperatures: The average
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
mean, high and low temperature as well as the humid-
center on the cultural border between German and French Switzerland (Romandy). ity per month are attached to the main instance as a
¤ www.ville-fribourg.ch Ì Elevation: 610.0 m Fribourg/Freiburg set of 12 properties. They get combined by matcher
Ì Area: 9.32 km2
and rendered by a template which loads a charting li-
brary.
Below the templates, we then see the list of non-matched
properties. Each of them is internally represented as a tree
with only one leaf. The rendering of such simple trees is de-
fined by the built-in templates. By overriding this template,
it is also possible to customize the fall-back representations.
Furthermore, it is possible—on the base of those fall-back
Map data ©2015 Google Terms of Use Report a map error
templates—to create different implementations of user in-
terfaces which help in defining new matcher and template
Temperatures per Month definitions.
6.2 Fusepool
Within the EU research project Fusepool1 , a Uduvudu
component is used to render particular data views selected
by the user in a dashboard. Fusepool integrates multiple,
potentially large data sources using RDF as their data
model. Example data sources used in this context are
Temperatures in °C/month: Average Low, Daily Mean, Average High patents, Pubmed articles or user-contributed datasets like
logs of parliamentary discussions or collections of beers and
breweries. Among other things, Fusepool applies natural
Humidity per Month language processing on plain text content to extract
entities, which can then be used for more specific search
queries.
Fusepool provides a basic user interface, which makes it pos-
sible to support faceted search on top of the data. Based on
the search results, the user might want to read the detailed
content of a particular patent, pubmed article or specific
Humidity in %/month
1
http://www.fusepool.eu/
Abstract
Figure 13: Rendering of http://dbpedia.org/page/Fribourg
withFribourg
more elaborate templates defined. Available at
(French pronunciation: [fʁibuʁ]; Arpitan: Fribôrg/Friboua, IPA: [fʁibwa] ; German: Device
http://dbpedia.exascale.info
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 Entities Documents (1890) Classify: Label prediction: Preview
Sarine. It is located on both sides of the river Saane/Sarine, on the Swiss plateau, and is
CognitiveAgent
an important economic, administrative and educational center on the cultural border Device for cooling a motor in a climate control Electromagnetic
SIEMENS AG (14) system
relay
The bigger part of the rendering about Fribourg is made by
between German and French Switzerland (Romandy). Its Old City, one of the best SIEMENS AKTIENGESELLSCHAFT (7) A conduit for providing air flow ©
maintained in Switzerland, sits on a small rocky hill above the valley of the Sarine. BOSCH GMBH ROBERT (6) from an air conditioning housing (44) to a motor (28) http://creativecommons.org/publicdomain/zero/1.0/
mapping the information structure about a city. There are ROBERT BOSCH GMBH (6)
for driving a climate control system air blower (26) is
disclosed. The blower (26) is located in the air An electromagnet includes a plate-like yoke,
conditioning housing (44). The air conditioning motor shaped like L, with a curved surface portion,
fourNeighboring
generic templates used to generate the figure:
municipalities Categories
SIEMENS, GERHARD (9)
SIEMENS GERHARD (7)
(28) includes a motor …
a rectangular iron core connected to said
yoke and wound by a coil, an armature
Labels:
rotatably and pivotally supported by one end
Facet types Add label
Düdingen 1157 establishments Document (45) B2Document (3)
of said yoke, said armature being driven by
said coil and coupling device for coupling
Givisiez Canton of Fribourg A1Document (676) A2Document (309) said yoke with said iron core by spin press-
POURING DEVICE fitting.
Picture with Title and Abstract: The first template
Granges-Paccot Cantonal capitals of A3Document (276)
PatentPublication (1845)
A4Document (105)
Entity (1845)
DISPOSITIF VERSEUR POURING DEVICE
AUSGIESSVORRICHTUNG
kindCode:
Marly, Fribourg Switzerland A3
extracts the picture and the labels of the entity, and
Pierrafortscha Cities in Switzerland
B1Document (470) Labels:
Add label
identifier:
GrantedPatent (478) EP-1009008-A3
creates a rendering with both elements integrated
St. Ursen Cultural property of national issued:
Tafers significance in the canton of
(with the title overlapping the picture). Furthermore, Electromagnetic relay
2013-07-11T10:45:55Z
countryOfFiling:
Villars-sur-Glâne Fribourg
An electromagnet includes a
plate-like yoke, shaped like L, with a curved surface
portion, a rectangular iron core connected to said dateOfPublication:
yoke and wound by a coil, an armature rotatably and 2001-05-02
the picture. Imperial free cities pivotally supported by one end of said yoke, said
armature being driven by said … publicationNumber:
Municipalities of the canton of Labels:
1009008
Fribourg generatedAtTime:
Selected Facts: Elevation, Area and the Website of the University towns
Add label
selected city are put together in a small facts box. Each
ofWikipedia
the facts could also be rendered independently. This Figure 14: Fusepool dashboard where Uduvudu is used in
ID: 164065
means that the maximum of all available elements are the right-hand panel.
Revision: 602735683
Show remaining literals
Show remaining links
beer. This particular selection is then shown using Udu- sense, where the implementation is built on data flow archi-
vudu. In the example shown in Figure 14, the title, ab- tectures. Reactivity can be directly achieved in our frame-
stract, and license properties have a matcher and template work by re-submitting the input graph to Uduvudu on every
provided. The rest of the data properties are still presented change. Using networked-clients and the ability of Uduvudu
in a generic way. If new data types are added to Fusepool, to propagate changes made through the visual rendering of
one just needs to provide specific matchers and templates the data directly back to the data itself, one could build
to make sure Fusepool can then render the new data in a exciting new applications leveraging reactivity, where the
useful way. Besides providing the matcher and template, graph representation on the client-side propagates updates
no interaction with a programmer who is familiar with the to the data server, which in turn automatically updates all
Fusepool code base is necessary. Both the matcher and the other user interfaces.
template can be stored in RDF as well as in the Fusepool
graph store. 8. ACKNOWLEDGMENTS
We thank the teams in Fribourg and Biel for many fruitful
7. CONCLUSIONS discussions; special mentions go to Bart van Leeuwen, Pascal
In this paper, we presented Uduvudu, a graph-aware, flex- Mainini and Thomas Bergwinkl for their contributions to the
ible and user-friendly UI Engine for Linked Data. Based architecture and development of Uduvudu. Uduvudu was
on user input, Uduvudu captures and transforms inherent partly funded by the EU Framework Program for Innovation
features of graph-structured data, which are then leveraged under grant 296192.
in the data-driven UI renderings. We described the uniquer
features of our system, its architecture, and two of its recent 9. REFERENCES
deployments. By offering multiple ways of defining exten- [1] Auer, S., Doehring, R., and Dietzold, S. LESS -
sions based on a few basic templates, our solution is kept template-based syndication and presentation of linked
both user-friendly and generic enough to solve a wide vari- data. In The Semantic Web: Research and
ety of use-cases when rendering Linked Data. As the match- Applications, L. Aroyo, G. Antoniou, E. Hyvönen, A. t.
ers and their accompanying template definitions are tailored Teije, H. Stuckenschmidt, L. Cabral, and T. Tudorache,
to data structures and not to a particular UI use-case, the Eds., no. 6089 in Lecture Notes in Computer Science.
probability of reusing parts of the rendering definitions can Springer Berlin Heidelberg, Jan. 2010, pp. 211–224.
be increased. [2] Battle, S., Wood, D., Leigh, J., and Ruth, L. The
Callimachus Project: RDFa as a Web Template
Furthermore, our architecture takes into account the fact Language. In COLD (2012).
that such rendering projects often involve multiple parties. [3] Berners-Lee, T., Hendler, J., and Lassila, O. The
The clear separation of tasks during the UI creation process semantic web. Scientific american 284, 5 (2001), 28–37.
and the possibility to work on the sub-tasks independently [4] Brunetti, J. M., Auer, S., Garcı́a, R., Klı́mek, J.,
allows more agile workflows. and Nečaský, M. Formal linked data visualization
model. In Proceedings of International Conference on
One of the main features of the architecture we propose is the Information Integration and Web-based Applications &
ability to easily create context-aware renderings. Inherent Services (New York, NY, USA, 2013), IIWAS ’13,
support is given in order to optimize UIs for different devices, ACM, p. 309:309–309:318.
users, or languages. This functionality is mostly transparent [5] Hannes Gassert, and Andreas Harth. From graph
to the developers and can also be leveraged after a context- to GUI: displaying RDF data from the web with arago.
insensitive solution is provided. Tech. rep., Digital Enterprise Research Institute, 2005.
[6] Huynh, D. F., Karger, D. R., and Miller, R. C.
We provide an open-source implementation of our architec-
Exhibit: Lightweight structured data publishing. In
ture as a complete framework on http://www.uduvudu.org/.
Proceedings of the 16th International Conference on
The resulting system runs in a browser directly. For further
World Wide Web (New York, NY, USA, 2007), WWW
implementation details, please refer to the provided website.
’07, ACM, p. 737–746.
We discussed two applications leveraging our implementa-
tion. The DBpedia front-end shows how our framework can [7] Khalili, A., and Auer, S. User interfaces for
be used to provide all kinds of rendering modalities. This semantic authoring of textual content: A systematic
was done either by leveraging the templates themselves or literature review. Web Semantics: Science, Services and
by injecting rendering libraries through the template system. Agents on the World Wide Web 22 (Oct. 2013), 1–18.
In the context of the Fusepool application, our system was [8] Pietriga, E., Bizer, C., Karger, D., and Lee, R.
used to create the rendering of various heterogeneous pieces Fresnel: A browser-independent presentation
of data. The main requirement for this application was the vocabulary for RDF. In The Semantic Web - ISWC
ability to adapt the presentation layer without extending the 2006, I. Cruz, S. Decker, D. Allemang, C. Preist,
application code. D. Schwabe, P. Mika, M. Uschold, and L. M. Aroyo,
Eds., no. 4273 in Lecture Notes in Computer Science.
Finally, we note that for certain applications it might be Springer Berlin Heidelberg, Jan. 2006, pp. 158–171.
necessary to dynamically update the user interface based on [9] Schlegel, K., Weißgerber, T., Stegmaier, F.,
changes made to the underlying Linked Data itself. This Granitzer, M., and Kosch, H. Balloon Synopsis: A
dynamic update of the presentation layer can be realized jQuery plugin to easily integrate the Semantic Web in a
on top of the pipeline approach of Uduvudu. We can ap- website. CEUR Workshop Proceedings 1268 (Oct.
ply the paradigm known as reactive programming in that 2014).