I working on publishing linked data.
and I used D2R to publish data from relational database.
Now, I need to visualize these data, so I wanted to use lodlive script.
I got the project source code from https://github.com/withjam/ml-lodlive#dataset
I used this code to do that, but it didn't work!
<!DOCTYPE html>
<html style="width: 100%; height: 100%">
<head>
<title>LodLive Testing</title>
<link rel="stylesheet" href="dist/ml-lodlive.all.css">
</head>
<body style="width: 100%; height: 100%">
<div id="graph" style="width: 100%; height: 100%"></div>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="dist/ml-lodlive.complete.js"></script>
<script src="js/profile/profile.example.js"></script>
<script>
MyProfileObject.connection['http:'].endpoint = 'http://localhost:1111/sparql'; // to use the out-of-the-box MarkLogic SPARQL support
MyProfileObject.connection['http:'].accepts = 'application/sparql-results+json'; // for regular XHR requests be sure to add this header to receive json response
MyProfileObject.endpoints.jsonp = false; // depending on if you are using jsonp
MyProfileObject.endpoints.all = ''; // and additional query params you wish to include in every request
'use strict';
jQuery('#graph').lodlive({ profile: MyProfileObject, firstUri: 'http://localhost:1111/data/organization/2', ignoreBnodes: true }); // 'http://dbpedia.org/resource/Philadelphia_Flyers'
</script>
</body>
</html>
while the rdf data is
@prefix unio: <http://tishreen.edu.sy/UniversityOntology.owl#> .
@prefix xhtml: <http://www.w3.org/1999/xhtml/vocab/#> .
@prefix d2rq: <http://www.wiwiss.fu-berlin.de/suhl/bizer/D2RQ/0.1#> .
@prefix org: <http://www.w3.org/ns/org#> .
@prefix geonames: <http://www.geonames.org/ontology#> .
@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#> .
@prefix prvTypes: <http://purl.org/net/provenance/types#> .
@prefix event: <http://purl.org/NET/c4dm/event.owl#> .
@prefix map: <http://localhost:1111/resource/#> .
@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
@prefix dc: <http://purl.org/dc/terms/> .
@prefix prv: <http://purl.org/net/provenance/ns#> .
@prefix db: <http://localhost:1111/resource/> .
@prefix foaf: <http://xmlns.com/foaf/0.1/> .
@prefix sp: <http://spinrdf.org/sp#> .
@prefix void: <http://rdfs.org/ns/void#> .
@prefix teach: <http://linkedscience.org/teach/ns#> .
@prefix vcard: <http://www.w3.org/2006/vcard/ns#> .
@prefix bibo: <http://purl.org/ontology/bibo/> .
@prefix owl: <http://www.w3.org/2002/07/owl#> .
@prefix xsd: <http://www.w3.org/2001/XMLSchema#> .
@prefix aiiso: <http://purl.org/vocab/aiiso/schema#> .
@prefix vocab: <http://localhost:1111/resource/vocab/> .
@prefix doap: <http://usefulinc.com/ns/doap#> .
<http://localhost:1111/resource/organization/3>
a aiiso:College , <http://dbpedia.org/ontology/College> , foaf:Organization , owl:Thing , org:Organization ;
rdfs:comment "about" ;
rdfs:isDefinedBy <http://localhost:1111/data/organization/3> ;
rdfs:label "كلية الهندسة المدنية" ;
aiiso:part_of <http://localhost:1111/resource/organization/1> ;
geonames:locatedIn <http://sws.geonames.org/7635195/> ;
vcard:email "info@tishreen.edu.sy" ;
vcard:telephone "041555888" ;
org:identifier "5564" ;
org:purpose "purpose" ;
org:subOrganizationOf
<http://localhost:1111/resource/organization/1> ;
foaf:logo "http://url" ;
foaf:page <http://localhost:1111/page/organization/3> ;
foaf:phone "041222555" .
<http://localhost:1111/data/organization/3>
a foaf:Document , prv:DataItem ;
rdfs:label "RDF Description of كلية الهندسة المدنية" ;
dc:date "2017-10-26T20:08:47.974Z"^^xsd:dateTime ;
prv:containedBy <http://localhost:1111/dataset> ;
void:inDataset <http://localhost:1111/dataset> ;
foaf:primaryTopic <http://localhost:1111/resource/organization/3> .
I could do that using this HTML page:
<!DOCTYPE html>
<html style="width: 100%; height: 100%">
<head>
<title>LodLive Testing</title>
<link rel="stylesheet" href="dist/ml-lodlive.all.css">
</head>
<body style="width: 100%; height: 100%">
<div id="graph" style="width: 100%; height: 100%"></div>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="dist/ml-lodlive.complete.js"></script>
<script src="js/profile/profile.example.js"></script>
<script>
'use strict';
jQuery('#graph').lodlive({ profile: ExampleProfile, firstUri: 'http://localhost:1111/data/organization/2', ignoreBnodes: true });
</script>
</body>
</html>
and created a profile file "profile.example.js" which declares that the endpoint is http://localhost:1111/sparql