Presented during The 3rd International Summer School On Open and Collaborative Governance (Monday, June 29 – Friday, July 3, 2015, Samos, Greece)

1. Visualization
of Linked Data
Giuseppe Futia
Nexa Center for Internet and Society, Politecnico di Torino
(DAUIN), Italy
International Summer School On Open and
Collaborative Governance – July 2015

2. Agenda
15/07/15 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)

3. Linked Data principles
1. 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/07/15 Visualization of Linked Data 3

4. RDF Data Model
15/07/15 Visualization of Linked Data 4

5. Linked Data Cloud Diagram
1014 datasets
Government: 183
(18.05%)
15/07/15 Visualization of Linked Data 5

6. Complementary Approaches
• Building interfaces to easily navigate or
summarize large quantities of data
• Selecting and individually rendering key
values from the data
15/07/15 Visualization of Linked Data 6

7. Complementary Approaches
• Building interfaces to easily navigate or
summarize large quantities of data
• Selecting and individually rendering key
values from the data
15/07/15 Visualization of Linked Data 7

8. 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/07/15 Visualization of Linked Data 8

9. London 2012 Olympics
from the BBC
«The interrelation
between the concepts
drives the navigation of the
website»

10. LD Visualization is a
complex task
The UI creation process is
split in multiple roles
15/07/15 Visualization of Linked Data 10

11. 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/07/15 Visualization of Linke Data 11

12. 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/07/15 Visualization of Linke Data 12

13. 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/07/15 Visualization of Linked Data 13

14. 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/07/15 Visualization of Linked Data 14

15. 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/07/15 Visualization of Linked Data 15

16. Data Selector example
15/07/15 Visualization of Linked Data 16

17. 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/07/15 Visualization of Linked Data 17

18. Matchers.ttl
Examples of predicate and
combine matchers
15/07/15 Visualization of Linked Data 18

19. Matchers From a graph structure….
15/07/15 Visualization of Linked Data 19

20. Matchers
15/07/15 Visualization of Linked Data 20
…to a tree structure

21. 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/07/15 Visualization of Linked Data 21

22. Provided template for
Adaptative Renderer
Data structured in a tree
object are accessed inside
the variable blocks <%- %>
15/07/15 Visualization of Linked Data 22

23. UI Creation Process with
Uduvudu
Overview of the
architecture with the
main components
15/07/15 Visualization of Linked Data 23

24. DEMO

25. Thank you!
Mail
giuseppe.futia@polito.it
GitHub repository
https://github.com/giuseppefutia