d3sparql.js !JavaScript による SPARQL 検索結果の可視化ライブラリ

Toshiaki Katayama <ktym@dbcls.jp> http://jp.linkedin.com/in/toshiakikatayama !Database Center for Life Science (DBCLS), Research Organization of Information and Systems (ROIS), Japan

!2015/5/30 @ 人工知能学会, 函館

ライフサイエンス統合データベースセンター

•生命科学のデータベースを整理統合して利活用を促進する技術開発

大学共同利用機関法人  情報・システム研究機構  •国立情報学研究所  •統計数理研究所  •国立極地研究所  •国立遺伝学研究所  •ライフサイエンス統合      データベースセンター

(DBCLS  千葉県・柏市)

オープンデータとセマンティック・ウェブ

• Linked Open Data ～ データのウェブ

• DBpediaや公共データなど、データを繋がる形で公開

!• Resource Description Framework (RDF)

•オントロジーによってメタデータを整備（データの意味付け）

!•既存の生命科学データベース、研究データは機械処理が困難

•データ形式がバラバラ…

•データの意味が作った人にしか分からない…

•遺伝子から疾患まで多種多様なデータが混在…

• → DBCLSでは生命科学DBのRDF化と支援技術開発

SPARQL～情報可視化までウェブ標準技術で完結

•データ解析のツールではデータの取得部分がトリッキー

• RDBのSQL検索、REST API、CSVやJSONなどから人手で加工etc.

• SPARQLでは遠隔の公開データを検索して同じ書式で取得可能

• AJAX → SPARQL (HTTP) → JSON !

•情報・知識・データ解析の結果を見える化

•検索結果として得られるデータは本質的には表形式 [key-value]

• JSONデータを統計処理し、適切な可視化により理解を容易に

• D3.jsなら、AJAXからJSONの可視化までをJavaScriptで完結

• HTTP, AJAX, SPARQL, JSON, JavaScript, HTML, CSS, SVG

(次点としてRのSPARQLライブラリもよいがウェブアプリ化したい)

•データ処理から可視化までを行う汎用的なJavaScriptライブラリ

D3.js : Data-Driven Document

スタンフォード大～  Mike  Bostockさんら  

•JSON,CSVなどのI/O  

•HTMLのDOM操作  

•SVGによる描画  •レイアウトやスケールなどのヘルパー関数  •インタラクティブ操作  Protovisの後継  

•BSDライセンスhttp://d3js.org/

d3sparql.js http://biohackathon.org/d3sparql

D3.jsによるSPARQL検索のAJAXコール

• SPARQL検索の結果をJSONで受け取る

• Accept: application/sparql-results+json

d3sparql.query  =  function(endpoint,  sparql,  callback)  {      var  url  =  endpoint  +  "?query="  +  encodeURIComponent(sparql)      var  mime  =  "application/sparql-­‐results+json"      d3.xhr(url,  mime,  function(request)  {          var  json  =  request.responseText          callback(JSON.parse(json))      })  }

D3.js  →  AJAX  →  SPARQL  →  JSON  →  D3.js

SPARQLエンドポイントのURLSPARQLクエリ

描画処理関数の呼び出し

•クマムシの生物系統樹をタクソノミーDBから検索

SPARQLによる木構造データの検索例

PREFIX  rdfs:  <http://www.w3.org/2000/01/rdf-­‐schema#>  PREFIX  up:  <http://purl.uniprot.org/core/>  SELECT  ?root_name  ?parent_name  ?child_name  WHERE  {      VALUES  ?root_name  {  "Tardigrada"  }      ?root  up:scientificName  ?root_name  .      ?child  rdfs:subClassOf+  ?root  .      ?child  rdfs:subClassOf  ?parent  .      ?child  up:scientificName  ?child_name  .      ?parent  up:scientificName  ?parent_name  .  }

真クマムシ類：ずんぐり型 (オニクマムシ・ヨコヅナクマムシなど)

異クマムシ類：装甲やトゲをもつ(トゲクマムシ)

中クマムシ類：幻のクマムシ(オンセンクマムシ)

クマムシさん

• SPARQLのSELECT文に対応する変数名が配列でheadに列挙

•変数名に対応する値がハッシュの配列でresultsに列挙

SPARQL 1.1 Query Results JSON Format

{  "head":  {  "link":  [],  "vars":  ["root_name",  "parent_name",  "child_name"]  },    "results":  {  "distinct":  false,  "ordered":  true,  "bindings":  [      {  "root_name":      {  "type":  "literal",  "value":  "root"  },          "parent_name":  {  "type":  "literal",  "value":  "root"  }  ,          "child_name":    {  "type":  "literal",  "value":  "child1"  }},      {  "root_name":      {  "type":  "literal",  "value":  "root"  },          "parent_name":  {  "type":  "literal",  "value":  "child1"  },          "child_name":    {  "type":  "literal",  "value":  "grand  child1"  }},      {  "root_name":      {  "type":  "literal",  "value":  "root"  },          "parent_name":  {  "type":  "literal",  "value":  "child1"  },          "child_name":    {  "type":  "literal",  "value":  "grand  child2"  }},      //  list  of  parent-­‐child  node  pairs  ...  ] }

樹形図を描くにはこれを木構造のオブジェクトにする必要がある

• D3.jsでよく使われている木構造のJSON

!!!!!!

• d3sparql.jsではSPARQL結果のJSONから↑に変換する関数を提供

d3sparql.jsによるJSON形式の変換

{  "name":  "root",  "size":  1024,  "children":  [      {  "name":  "child1",  "size":  2,  "children":  [              {  "name":  "grand  child1",  "size":  1  },              {  "name":  "grand  child2",  "size":  1  }          ],      },      //  list  of  children  nodes  ...  ] }

d3sparql.query(endpoint,  sparql,  function(json)  {      var  tree  =  d3sparql.tree(json)      var  config  =  {  ...  options  ...  }      /*  この  tree  を可視化に利用  */      d3sparql.dendrogram(tree,  config)  })

d3sparql.jsに実装済みの木構造可視化例

d3sparql.roundtree

d3sparql.sunburst

d3sparql.treemap

d3sparql.circlepack

その他の可視化例

•チャート

• barchart, piechart, scatterplot !

•グラフ構造

• force graph, sankey graph !

•地図

• coordmap, namedmap !

•表

• htmltable, htmlhash

使用方法 <!DOCTYPE html> <meta charset="utf-8"> <html> <head> <script src="http://d3js.org/d3.v3.min.js"></script> <script src="d3sparql.js"></script> <script> function exec() { var endpoint = d3.select("#endpoint").property("value") var sparql = d3.select("#sparql").property("value") d3sparql.query(endpoint, sparql, render) } function render(json) { // set options and call the d3xxxxx function in this library ... var config = { ... } d3sparql.xxxxx(json, config) } </script> <style> <!-- customize CSS --> </style> </head> <body onload="exec()"> <form style="display:none"> <input id="endpoint" value="http://dbpedia.org/sparql" type="text"> <textarea id="sparql"> PREFIX ... SELECT ... WHERE { ... } </textarea> </form> </body> </html>

ダウンロード↓

https://github.com/ktym/d3sparql

d3とd3sparqlを読み込む

フォームからエンドポイント取得フォームからSPARQLクエリ取得SPARQL検索を実行

描画関数の呼び出し

オプションやCSSはカスタマイズ可能だがデフォルトでもいい感じに表示できる

SPARQLクエリは<textarea>に

入れておくと扱いやすい (見せたくなければstyle="display:none")

応用例TogoGenome

• Stanza•初のRDFによるゲノムデータベース

http://togogenome.org/