Anton V.
Projects and blogs
Semantic Web
RDF
RDF graphs

RDF graphs

TL;DR

Visualizing RDF graphs is useful when you need to present your RDF data, highlight specific patterns, understand its structure, or debug it. To see it in action, you can play with the example RDF graph visualization below or automatically create one for your own RDF data.

Introduction

The Resource Description Framework (RDF) provides a unique way to capture/represent information. In this model, the information is built up from subject–predicate–object triples, each acting as a statement/fact that connects the subject and the object through the predicate.

RDF is used in a variety of applications, including the Semantic Web, knowledge graphs, data integration, and data exchange/interchange. It is really good for highly interconnected data such as social networks and the Internet of Things (IoT) device networks.

RDF datasets are graphs

Here's an example of a small RDF dataset expressed in the Turtle syntax:

@prefix ex: <http://example.org/> .
@prefix foaf: <http://xmlns.com/foaf/0.1/> .

ex:John foaf:knows ex:Mary .
ex:Mary foaf:knows ex:Tom .

This dataset consists of two facts: John knows Mary and Mary knows Tom. Intuitively, the dataset represents a social network (a graph) involving three people/resources who are connected to each other through two foaf:knows relationship.

Visualizing RDF graphs and building the demo

The graph "feature" of RDF makes it a natural fit for visual presentation and exploration. Even if you draw them by hand, RDF graphs are very helpful when you want to demo your data or highlight specific patterns.

With this in mind, I went on to explore the ways to visualize RDF graphs automatically and in the end, built the prototype of an RDF graph visualization tool (see below).

In the demo below, I'm using the N3.js library for parsing the input Turtle and d3-force for running force simulations to lay out the graph. The graph algorithm runs in a web worker to keep the UI responsive. You can use cooperative gestures to pan and zoom the graph.

Demo: RDF graph visualization tool

RDF data (Turtle)

@base <http://example.org/> .
@prefix foaf: <http://xmlns.com/foaf/0.1/> .
@prefix wd: <http://www.wikidata.org/entity/> .

# Alice, Bob, and Carol
<alice> a foaf:Person ;
  foaf:name "Alice" .
<bob> a foaf:Person ;
  foaf:name "Bob" .
<carol> a foaf:Person ;
  foaf:name "Carol" .

# Alice knows Bob and Carol
<alice> foaf:knows <bob> .
<bob> foaf:knows <alice> .
<alice> foaf:knows <carol> .
<carol> foaf:knows <alice> .

# Alice watched two movies
<alice> <watched> wd:Q44578 . # Titanic
<alice> <watched> wd:Q488655 . # Groundhog Day

# Bob watched three movies
<bob> <watched> wd:Q36479 . # The Lion King
<bob> <watched> wd:Q83495 . # The Matrix
<bob> <watched> wd:Q91540 . # Back to the Future

# Carol watched one movie
<carol> <watched> wd:Q44578 . # Titanic
1
@base <http://example.org/> .
2
@prefix foaf: <http://xmlns.com/foaf/0.1/> .
3
@prefix wd: <http://www.wikidata.org/entity/> .
4

5
# Alice, Bob, and Carol
6
<alice> a foaf:Person ;
7
  foaf:name "Alice" .
8
<bob> a foaf:Person ;
9
  foaf:name "Bob" .
10
<carol> a foaf:Person ;
11
  foaf:name "Carol" .
12

13
# Alice knows Bob and Carol
14
<alice> foaf:knows <bob> .
15
<bob> foaf:knows <alice> .
16
<alice> foaf:knows <carol> .
17
<carol> foaf:knows <alice> .
18

19
# Alice watched two movies
20
<alice> <watched> wd:Q44578 . # Titanic
21
<alice> <watched> wd:Q488655 . # Groundhog Day
22

23
# Bob watched three movies
24
<bob> <watched> wd:Q36479 . # The Lion King
25
<bob> <watched> wd:Q83495 . # The Matrix
26
<bob> <watched> wd:Q91540 . # Back to the Future
27

28
# Carol watched one movie
29
<carol> <watched> wd:Q44578 . # Titanic
30

The RDF dataset to visualize.

Show rdf:type edges

Show literals

Graph

Use ⌘ + scroll (ctrl + scroll) to zoom the graph

Use two fingers to move the graph