The Linked Data movement with the aims of publishing and interconnecting machine readable data has originated in the last decade. Although the set of (open) data sources is rapidly growing, the visualization of information in this 'Web of Data' is still at a very early stage, which is primary due to the strong learning curve of semantic technologies. This paper describes an approach to visualize data 'ready-to-go' by configuration that enables Web developers and designers to build useful applications on top of the 'Web of Data'. We provide a visualization tool as a JavaScript Library, which makes it simple to aggregate Linked Data and design templates. The tool provides a way to accomplish this purely on the client using existing Web technologies, like JavaScript MVC Frameworks with data binding and JSON-LD. Based on a usability test, an evaluation is carried out by potential users, such as Web developers and semantic Web experts.
After efficiently encouraging the publication and linking of open datasets in a
standardized way, the Linked Data (LD) research community is now facing the
problem of creating meaningful applications on top of the Linked Open Data
(LOD) Cloud. As Heath discussed in [
In this paper we will refer to two different types of Web developers: Semantic Web experts are developers having had experience with SW and advanced technologies like RDF or SPARQL. In contrast, non-expert developers do not have any relation to SW, but do know how to build Web applications with e.g. PHP, Java, JavaScript. There are already different ways to create LD visualizations. The approach presented in this paper, however, also enables non-semanticexperts to work with Linked Open Data. 2
visuaLOD - a Linked Data View Builder Different resources need different UIs, e.g. a person could be displayed with a profile page, whereas a place should be displayed with a map. Depending on type, properties and source, presentation and actions may differ. In our demo5, we present a simple movie mashup application visualizing movie details and starring actors. Information about the actors, e.g. their birth places (geonames), can be explored by following links to other datasets. To provide a flexible visualization tool, we elaborated simple configuration and abstraction of complex data structures as basic requirements. Browser
AngularJS + JSON-LD
Views + Templates visuaLOD HTTP / Linked Data Principles
Linked Data Cloud Following the nature of Linked Data, the entry point of visuaLOD applications is a single LD resource. Taking this as a starting point, we follow dedicated links to fetch the part of the graph necessary for the information representation. We call the graph of resources and relations, needed to sufficiently visualize a ’thing’ a ’Resource Description Graph’ (RDG). RDGs are defined in so-called RDG views that include constraints (if a RDG is used for a specific resource), data mapping (how a graph is represented on client side) and a template (how a RDG is displayed).
The data mapping is managed with a JSON-LD Context. JSON-LD6 is a lightweight LD serialization format based on JSON. Any RDF representation of a LD resource can be transferred into JSON-LD and vice versa. All defined properties in this context can be used in the template. The process, described in Figure 3, retrieves RDF data for the starting resource and maps it to the AngularJS model. It applies RDG views by validating their constraint part against the RDF data, fetches the additional resources and nests them into the model object. In AngularJS, the view is a projection of the model through the HTML template, so the templates are rendered in parallel. 3
A usability test was completed by six potential users: one SW expert and five Web developers with no prior knowledge of SW. Every user understood the given assignment and purpose of visuaLOD. The tool provides simple usage, but when Start getResource(URI)
gets LD from URI => resource data => JS model JS model
+ views loadViews() gets JSON con' g
check constraints true false nestResource() uses fetch with context to extend JS model renderViews()
HTML-Template model / view data-binding false last view? true
Stop it comes to defining the JSON-LD Context the five non-semantic-Web-experts had difficulties. Feedback received from the SW expert suggests an easier usage to define the context. For example, visuaLOD could determine automatically if a property is a URI or a literal. The README7 could be extended by screenshots and better examples on how to use visuaLOD. 4
Fresnel8 is a browser-independent presentation vocabulary for RDF. The main
concept consists of two parts: Lenses and Formats. Lenses specify which
properties of RDF resources are shown while formats indicate how to format content
selected by lenses [
LODSPeaKr9 is a framework to create LD applications. It recommends to discover the data of the defined SPARQL endpoint, which means it is not suitable for all LD sources.
LESS [
The KiWi project [
All approaches introduced in the course of this chapter differ from the presented JS visualization tool: visuaLOD is purely browser-based. A server-side configuration is not required. Beyond JSON-LD works with any Linked Data server (e.g. RDF/XML can be converted to this serialization format).
This paper has sought to introduce a new approach to visualize Linked Data fully client-side. With visuaLOD, we presented a LD visualization tool that enables even non-semantic Web experts to build LD visualizations. To extend visuaLOD to a generic Linked Data Browser, we will provide a JS bookmarklet. It could be possible to allow the creation and storage of RDG views in an open accessible view store. In addition, future work could focus on the following aspects: – Multi-language support: Detect the browsers language and show the endusers available texts in their language. – Update: Not only read, but update LD resources using the advantages of data-binding and e.g. SPARQL update10. – View/Template builder: Create a UI for building views. View-Changes could automatically show how a visualization will look like.