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 . in the internal data structures. This enables the renderer @prefix vcard: . 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).