使用 lodlive 可视化 D2R rdf 数据

Question

我致力于发布链接数据。

并且我使用 D2R 从关系数据库发布数据。

现在，我需要将这些数据可视化，所以我想使用lodlive脚本。

我从https://github.com/withjam/ml-lodlive#dataset

获得了项目源代码

我用这段代码来做到这一点，但没有成功！

<!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>

而rdf数据是

@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> .

Answer 1

我可以使用这个 HTML 页面来做到这一点：

<!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>

并创建了一个配置文件 "profile.example.js"，它声明端点是 http://localhost:1111/sparql

使用 lodlive 可视化 D2R rdf 数据

Visualizing D2R rdf data using lodlive

javascript

rdf

data-visualization

linked-data

d2rq