Visualizationof Linked Data

Giuseppe FutiaNexa Center for Internet and Society, Politecnico di Torino (DAUIN), Italy

International Summer School On Open andCollaborative Governance – July 2015

Agenda

15/04/23 Visualization of Linked Data 2

• Linked Data (LD) principles

• LD User Interface (UI) creation process

• Uduvudu: a graph-aware and adaptive UI engine

• Different approaches to visualization (with examples)

Linked Data principles1. Use URIs as names for things

2. Use HTTP URIs so that people can look up those names

3. When someone looks up a URI, provide useful information, using the standards (RDF, SPARQL)

4. Include links to other URIs, so that they can discover more things

15/04/23 Visualization of Linked Data 3

RDF Data Model

15/04/23 Visualization of Linked Data 4

Linked Data Cloud Diagram1014 datasets

Government: 183(18.05%)

15/04/23 Visualization of Linked Data 5

Complementary Approaches

• Building interfaces to easily navigate or summarize large quantities of data

• Selecting and individually rendering key values from the data

15/04/23 Visualization of Linked Data 6

Complementary Approaches

• Building interfaces to easily navigate or summarize large quantities of data

• Selecting and individually rendering key values from the data

15/04/23 Visualization of Linked Data 7

Why rendering key values? (IMHO)

•We have to exploit the intelligence of the graph in the backend of our applications (e.g., in a search engine)

•Any kind of visualization should support the understanding and the dimension of data(not the dimension of the graph)

15/04/23 Visualization of Linked Data 8

London 2012 Olympicsfrom the BBC

«The interrelation between the concepts drives the navigation of the website»

LD Visualization is acomplex task

The UI creation process is split in multiple roles

15/04/23 Visualization of Linked Data 10

Advantages (i)

• Clear separation of roles: better repartition of work and increased autonomy for the experts

• Iterative development process: new elements can be added to each task without blocking the other tasks

15/04/23 Visualization of Linke Data 11

Advantages (ii)

• Highly reusable outcome: structures and templates can be reused and adapted later to another context, data, or application

• Zero-input fallback: any valid Linked Data provided can be rendered without any additional processing

15/04/23 Visualization of Linke Data 12

Tree Vs Graph

«When you show a typical developer RDF, where they have previously been used to simple JSON or XML structures, they find the format confusing, and hard to code with. This is primarily because the data is a graph, and graphs don’t fit well with the tree structures of JSON and XML»- David Rogers, Senior Technical Architect in BBC Future Media

15/04/23 Visualization of Linked Data 13

Uduvudu

• A flexible and open-source engine to visualize LD developed in the context of Fusepool P3 project

• It is written in JavaScript and run in the browser natively (https://github.com/uduvudu/uduvudu)

15/04/23 Visualization of Linked Data 14

Main components (i)• Data Selector:

– It takes a superset of information that need to be shown as input

– It trims data to a graph containing exactly the data that needs to be rendered

– Tipically carried out by a LD specialist

15/04/23 Visualization of Linked Data 15

Data Selector example

15/04/23 Visualization of Linked Data 16

Main components (ii)• Structure Matcher:

– It takes a graph and one or several corresponding known structures (matchers) from a catalogue as input and returns a tree structure as output

– This new tree structure has at least one point to a template from the Renderer component

15/04/23 Visualization of Linked Data 17

Matchers.ttl Examples of predicate and combine matchers

15/04/23 Visualization of Linked Data 18

Matchers From a graph structure….

15/04/23 Visualization of Linked Data 19

Matchers

15/04/23 Visualization of Linked Data 20

…to a tree structure

Main components (iii)• Adaptative Renderer:

– It takes as input the tree structure given by the matcher and the provided template to finally render the output

– The templates are written in HTML/JavaScript and access the tree structure through escaped variable definitions

15/04/23 Visualization of Linked Data 21

Provided template for Adaptative Renderer

Data structured in a tree object are accessed inside the variable blocks <%- %>

15/04/23 Visualization of Linked Data 22

UI Creation Process with Uduvudu

Overview of the architecture with the

main components15/04/23 Visualization of Linked Data 23

DEMO

Thank you!

Mailgiuseppe.futia@polito.it

GitHub repositoryhttps://github.com/giuseppefutia