d3sparql.js を使ってみた

d3sparql.js とは

SPARQLのクエリを書くだけで、指定したSPARQLエンドポイントのデータをD3.jsで可視化することができるライブラリです。

• デモサイト
• ソースコード

インストール

いまのところnpmがないようなので、githubから直接持ってきます。

ダウンロード

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

依存しているライブラリはD3.js の第3版です。最近D3.jsの第4版がリリースされましたがここでは第3版で試します。ライブラリの読み込みは以下だけです。

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を利用しています。