d3sparql.js
Post on 06-Aug-2015
19 Views
Preview:
TRANSCRIPT
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/
top related