visualization of linked data
TRANSCRIPT
![Page 1: Visualization of Linked Data](https://reader035.vdocument.in/reader035/viewer/2022062420/55ce1438bb61ebde488b489b/html5/thumbnails/1.jpg)
Visualizationof Linked Data
Giuseppe FutiaNexa Center for Internet and Society, Politecnico di Torino (DAUIN), Italy
International Summer School On Open andCollaborative Governance – July 2015
![Page 2: Visualization of Linked Data](https://reader035.vdocument.in/reader035/viewer/2022062420/55ce1438bb61ebde488b489b/html5/thumbnails/2.jpg)
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)
![Page 3: Visualization of Linked Data](https://reader035.vdocument.in/reader035/viewer/2022062420/55ce1438bb61ebde488b489b/html5/thumbnails/3.jpg)
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
![Page 4: Visualization of Linked Data](https://reader035.vdocument.in/reader035/viewer/2022062420/55ce1438bb61ebde488b489b/html5/thumbnails/4.jpg)
RDF Data Model
15/04/23 Visualization of Linked Data 4
![Page 5: Visualization of Linked Data](https://reader035.vdocument.in/reader035/viewer/2022062420/55ce1438bb61ebde488b489b/html5/thumbnails/5.jpg)
Linked Data Cloud Diagram1014 datasets
Government: 183(18.05%)
15/04/23 Visualization of Linked Data 5
![Page 6: Visualization of Linked Data](https://reader035.vdocument.in/reader035/viewer/2022062420/55ce1438bb61ebde488b489b/html5/thumbnails/6.jpg)
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
![Page 7: Visualization of Linked Data](https://reader035.vdocument.in/reader035/viewer/2022062420/55ce1438bb61ebde488b489b/html5/thumbnails/7.jpg)
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
![Page 8: Visualization of Linked Data](https://reader035.vdocument.in/reader035/viewer/2022062420/55ce1438bb61ebde488b489b/html5/thumbnails/8.jpg)
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
![Page 9: Visualization of Linked Data](https://reader035.vdocument.in/reader035/viewer/2022062420/55ce1438bb61ebde488b489b/html5/thumbnails/9.jpg)
London 2012 Olympicsfrom the BBC
«The interrelation between the concepts drives the navigation of the website»
![Page 10: Visualization of Linked Data](https://reader035.vdocument.in/reader035/viewer/2022062420/55ce1438bb61ebde488b489b/html5/thumbnails/10.jpg)
LD Visualization is acomplex task
The UI creation process is split in multiple roles
15/04/23 Visualization of Linked Data 10
![Page 11: Visualization of Linked Data](https://reader035.vdocument.in/reader035/viewer/2022062420/55ce1438bb61ebde488b489b/html5/thumbnails/11.jpg)
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
![Page 12: Visualization of Linked Data](https://reader035.vdocument.in/reader035/viewer/2022062420/55ce1438bb61ebde488b489b/html5/thumbnails/12.jpg)
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
![Page 13: Visualization of Linked Data](https://reader035.vdocument.in/reader035/viewer/2022062420/55ce1438bb61ebde488b489b/html5/thumbnails/13.jpg)
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
![Page 14: Visualization of Linked Data](https://reader035.vdocument.in/reader035/viewer/2022062420/55ce1438bb61ebde488b489b/html5/thumbnails/14.jpg)
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
![Page 15: Visualization of Linked Data](https://reader035.vdocument.in/reader035/viewer/2022062420/55ce1438bb61ebde488b489b/html5/thumbnails/15.jpg)
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
![Page 16: Visualization of Linked Data](https://reader035.vdocument.in/reader035/viewer/2022062420/55ce1438bb61ebde488b489b/html5/thumbnails/16.jpg)
Data Selector example
15/04/23 Visualization of Linked Data 16
![Page 17: Visualization of Linked Data](https://reader035.vdocument.in/reader035/viewer/2022062420/55ce1438bb61ebde488b489b/html5/thumbnails/17.jpg)
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
![Page 18: Visualization of Linked Data](https://reader035.vdocument.in/reader035/viewer/2022062420/55ce1438bb61ebde488b489b/html5/thumbnails/18.jpg)
Matchers.ttl Examples of predicate and combine matchers
15/04/23 Visualization of Linked Data 18
![Page 19: Visualization of Linked Data](https://reader035.vdocument.in/reader035/viewer/2022062420/55ce1438bb61ebde488b489b/html5/thumbnails/19.jpg)
Matchers From a graph structure….
15/04/23 Visualization of Linked Data 19
![Page 20: Visualization of Linked Data](https://reader035.vdocument.in/reader035/viewer/2022062420/55ce1438bb61ebde488b489b/html5/thumbnails/20.jpg)
Matchers
15/04/23 Visualization of Linked Data 20
…to a tree structure
![Page 21: Visualization of Linked Data](https://reader035.vdocument.in/reader035/viewer/2022062420/55ce1438bb61ebde488b489b/html5/thumbnails/21.jpg)
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
![Page 22: Visualization of Linked Data](https://reader035.vdocument.in/reader035/viewer/2022062420/55ce1438bb61ebde488b489b/html5/thumbnails/22.jpg)
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
![Page 23: Visualization of Linked Data](https://reader035.vdocument.in/reader035/viewer/2022062420/55ce1438bb61ebde488b489b/html5/thumbnails/23.jpg)
UI Creation Process with Uduvudu
Overview of the architecture with the
main components15/04/23 Visualization of Linked Data 23
![Page 24: Visualization of Linked Data](https://reader035.vdocument.in/reader035/viewer/2022062420/55ce1438bb61ebde488b489b/html5/thumbnails/24.jpg)
DEMO
![Page 25: Visualization of Linked Data](https://reader035.vdocument.in/reader035/viewer/2022062420/55ce1438bb61ebde488b489b/html5/thumbnails/25.jpg)
Thank you!
GitHub repositoryhttps://github.com/giuseppefutia