You use a GraphAppearance if you want to show your linked data in a graphical way: like a network. The great benefit of the Graph appearance, is that you can navigate through your linked data: you can expand a resource to include all it’s incomming and outgoing relations!

The graph appearance show all triples in your result set as a node-edge-node graph. Every node resembles a particular resource, every edge resembles a particular property. If there are more than 10 edges for a particular property(type), the edges will be aggregated to one node. This mitigates the risk that the graph becomes unreadable. If you want, you can expand this aggregated node, but be aware that expanding an aggregated node will result a a lot of extra nodes!

Graph appearance

The graph appearance ONLY works if a subject is present in the http-request. You could use one of the following approaches:

Approach Example Description
URI-dereferencing http://localhost:8080/id/person/JohnDoe You use this pattern if you want a Graph appearance on the “default” page for a resource, and you “own” the resource (e.g.: the domain of the resource is the same as the domain of your theatre). You probably want to combine this with a content appearance.
Foreign resources http://localhost:8080/resource?subject=http://dbpedia.org/resource/Amersfoort You use this pattern if you want a Graph apperance on the “default” page for a resource, but the resource URI is some external URI.
Special page http://localhost:8080/query/graphical?subject=http://localhost:8080/id/person/JohnDoe You use this pattern if you want a special Graph appearance, but the page differs from the “default” page.

The query you specify for the graph appearance will be executed every time you “expand” a resource that is already displayed on the page. The <@SUBJECT@> value will change to the resource you want to expand.

Tweaking the appearance

The appearance of each row can be changed with the elmo:fragment statement:

Example

The first example creates a very simple graph appearance, showing every outgoing relations of a resource

@prefix elmo: <http://bp4mc2.org/elmo/def#>.
@prefix xhtml: <http://www.w3.org/1999/xhtml/vocab#>.
@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#>.
@prefix stage: <http://localhost:8080/stage#>. 
stage:GraphAppearanceSimple	a	elmo:Part;
	elmo:appearance elmo:GraphAppearance;
	elmo:query '''
		construct {
			<@SUBJECT@> rdfs:label ?subjectlabel.

			<@SUBJECT@> ?torelation ?toperson.
			?toperson rdfs:label ?topersonlabel.
		}
		where {
			{
				<@SUBJECT@> rdfs:label ?subjectlabel.
			}
			UNION
			{
				<@SUBJECT@> ?torelation ?toperson.
				?toperson rdfs:label ?topersonlabel.
			}
		}
	''';
.

The second example enhances the first one, and includes also all incomming relations.

@prefix elmo: <http://bp4mc2.org/elmo/def#>.
@prefix xhtml: <http://www.w3.org/1999/xhtml/vocab#>.
@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#>.
@prefix stage: <http://localhost:8080/stage#>. 
stage:GraphAppearanceSimple	a	elmo:Part;
	elmo:appearance elmo:GraphAppearance;
	elmo:query '''
		construct {
			<@SUBJECT@> rdfs:label ?subjectlabel.

			<@SUBJECT@> ?torelation ?toperson.
			?toperson rdfs:label ?topersonlabel.

			?fromperson ?fromrelation <@SUBJECT@>.
			?fromperson rdfs:label ?frompersonlabel.
		}
		where {
			{
				<@SUBJECT@> rdfs:label ?subjectlabel.
			}
			UNION
			{
				<@SUBJECT@> ?torelation ?toperson.
				?toperson rdfs:label ?topersonlabel.
			}
			UNION
			{
				?fromperson ?fromrelation <@SUBJECT@>.
				?fromperson rdfs:label ?frompersonlabel.
			}
	''';
.

The third example enhances the second one, and includes a legend. It shows how you can add colors to enhance the visualization.

@prefix elmo: <http://bp4mc2.org/elmo/def#>.
@prefix xhtml: <http://www.w3.org/1999/xhtml/vocab#>.
@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#>.
@prefix stage: <http://localhost:8080/stage#>. 
stage:GraphAppearanceSimple	a	elmo:Part;
	elmo:appearance elmo:GraphAppearance;
	elmo:fragment [
		elmo:applies-to "Concept";
		html:stylesheet '''
			fill: red;
			fill-opacity: .3;
			stroke: #666;
		''';
	];
	elmo:fragment [
		elmo:applies-to "Class";
		html:stylesheet '''
			fill: blue;
			fill-opacity: .3;
			stroke: #666;
		''';
	];
	elmo:query '''
		construct {
			<@SUBJECT@> rdfs:label ?subjectlabel.
			<@SUBJECT@> elmo:style ?subjecttype.

			<@SUBJECT@> ?torelation ?toperson.
			?toperson rdfs:label ?topersonlabel.
			?toperson elmo:style ?topersonstyle.

			?fromperson ?fromrelation <@SUBJECT@>.
			?fromperson rdfs:label ?frompersonlabel.
			?fromperson elmo:style ?frompersontype.
			
			skos:Concept elmo:name "Concept".
			owl:Class elmo:name "Class".
		}
		where {
			{
				<@SUBJECT@> rdfs:label ?subjectlabel.
				<@SUBJECT@> rdf:type ?subjecttype.
			}
			UNION
			{
				<@SUBJECT@> ?torelation ?toperson.
				?toperson rdfs:label ?topersonlabel.
				?toperson rdf:type ?topersontype.
			}
			UNION
			{
				?fromperson ?fromrelation <@SUBJECT@>.
				?fromperson rdfs:label ?frompersonlabel.
				?fromperson rdf:type ?frompersontype.
			}
	''';
.