d3sparql.js란?

SPARQL 쿼리만 작성하면 지정된 SPARQL 엔드포인트의 데이터를 D3.js에서 시각화할 수 있는 라이브러리입니다.

데모 사이트

소스 코드

설치

지금은 npm이 없기 때문에 github에서 직접 가져옵니다.

다운로드

$ git clone https://github.com/ktym/d3sparql

의존하는 라이브러리는 D3.js의 세 번째 버전입니다. 최근 D3.js의 네 번째 버전이 출시되었지만 여기에서는 세 번째 버전에서 시도합니다. 라이브러리 로드는 다음과 같습니다.

JavaScript 라이브러리

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="d3sparql.js"></script>

소스 코드 안에 들어 있는 .html 파일군이 샘플입니다. 각각 폼 입력의 내용이 되었으므로 d3sparql-barchart.html을 JS만으로 다시 작성해 보았습니다.

다음은 DBpedia에서 도도부현의 면적을 막대 그래프로 표시하는 예입니다.

쿼리 예

  var endpoint = "http://dbpedia.org/sparql";
  var sparql = "PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#> " +
    "PREFIX yago: <http://dbpedia.org/class/yago/> " +
    "PREFIX dbpedia-owl: <http://dbpedia.org/ontology/> " +
    "SELECT ?pref ?area " +
    "WHERE {" +
    "  ?s a yago:PrefecturesOfJapan ; " +
    "  rdfs:label ?pref ; " +
    "  dbpedia-owl:areaTotal ?area_total . " +
    "  FILTER (lang(?pref) = 'en') " +
    "  BIND ((?area_total / 1000 / 1000) AS ?area) " +
    "} " +
    "ORDER BY DESC(?area)";

  d3sparql.query(endpoint, sparql, function(json) {
    var config = {
      "label_x": "Prefecture",
      "label_y": "Area",
      "var_x": "pref",
      "var_y": "area",
      "width":  700,
      "height": 300,
      "margin":  80,
      "selector": "#result"
    }
    d3sparql.barchart(json, config);
   });

d3sparql.query()가 실제로 쿼리 던지는 곳입니다. 필요한 매개변수는 SPARQL 엔드포인트 및 SPARQL 쿼리와 쿼리 결과를 처리하는 콜백 함수입니다. "var_x"와 "var_y"의 값에 SPARQL의 SELECT에서 지정한 변수 이름을 할당합니다.



SPARQL의 쿼리를 작성하는 것만으로 시각화할 수 있으므로 꽤 간편하게 사용할 수 있습니다. 그 밖에 어떻게 할 수 있을까는 데모를 보면 좋다고 생각합니다.

유사한 라이브러리는 sgvizler입니다. 여기는 주로 Google Chart를 사용합니다.