sparqlアプリケーション開発
TRANSCRIPT
SPARQLアプリケーション開発オープンデータ時代の Web API SPARQL 第5章
片山 俊明 <[email protected]>http://jp.linkedin.com/in/toshiakikatayama大学共同利用機関法人 情報・システム研究機構 (ROIS)
データサイエンス共同利用基盤施設ライフサイエンス統合データベースセンター (DBCLS)
2016/5/17 @ オラクルLODセミナー, 青山
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ライブラリもよいがウェブアプリ化したい)
R (RStudio) で SPARQL 検索結果を可視化
• SPARQLの結果はRのデータフレームになる•統計解析パッケージや高度な描画ライブラリでそのまま利用可能
R (RStudio) で SPARQL 検索結果を可視化
• install.packages(”SPARQL”)• library(SPARQL)• data = SPARQL(endpoint, query)
• D3.jsデータ処理から可視化までを行う汎用JavaScriptライブラリ
•
JavaScript で SPARQL 検索結果を可視化
スタンフォード大～MikeBostockさんら•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){varurl=endpoint+"?query="+encodeURIComponent(sparql)varmime="application/sparql-results+json"d3.xhr(url,mime,function(request){varjson=request.responseTextcallback(JSON.parse(json))})}
D3.js→AJAX→SPARQL→JSON→D3.js
SPARQLエンドポイントのURLSPARQLクエリ
描画処理関数の呼び出し
•クマムシの生物系統樹をタクソノミーDBから検索
SPARQLによる木構造データの検索例
PREFIXrdfs:<http://www.w3.org/2000/01/rdf-schema#>PREFIXup:<http://purl.uniprot.org/core/>SELECT?root_name?parent_name?child_nameWHERE{VALUES?root_name{"Tardigrada"}?rootup:scientificName?root_name.?childrdfs:subClassOf+?root.?childrdfs:subClassOf?parent.?childup:scientificName?child_name.?parentup: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":"grandchild1"}},{"root_name":{"type":"literal","value":"root"},"parent_name":{"type":"literal","value":"child1"},"child_name":{"type":"literal","value":"grandchild2"}},//親子ノードのペアのリスト...]}
樹形図を描くにはこれを木構造のオブジェクトにする必要がある
• D3.jsでよく使われている木構造のJSON
• d3sparql.jsではSPARQL結果のJSONから↑に変換する関数を提供
d3sparql.jsによるJSON形式の変換 (木構造)
{"name":"root","size":1024,"children":[{"name":"child1","size":2,"children":[{"name":"grandchild1","size":1},{"name":"grandchild2","size":1}],},//子ノードの木構造のリスト...]}
d3sparql.query(endpoint,sparql,function(json){vartree=d3sparql.tree(json)varconfig={...options...}//このtreeを可視化に利用d3sparql.dendrogram(tree,config)})
使用方法<!DOCTYPEhtml><metacharset="utf-8"><html><head><scriptsrc="http://d3js.org/d3.v3.min.js"></script><scriptsrc="d3sparql.js"></script><script>functionexec(){varendpoint=d3.select("#endpoint").property("value")varsparql=d3.select("#sparql").property("value")d3sparql.query(endpoint,sparql,render)}functionrender(json){//setoptionsandcallthed3xxxxxfunctioninthislibrary...varconfig={...}d3sparql.xxxxx(json,config)}</script><style><!--customizeCSS--></style></head><bodyonload="exec()"><formstyle="display:none"><inputid="endpoint"value="http://dbpedia.org/sparql"type="text"><textareaid="sparql">PREFIX...SELECT...WHERE{...}</textarea></form></body></html>
ダウンロード↓https://github.com/ktym/d3sparql
d3とd3sparqlを読み込む
フォームからエンドポイント取得フォームからSPARQLクエリ取得SPARQL検索を実行
描画関数の呼び出しオプションやCSSはカスタマイズ可能だがデフォルトでもいい感じに表示できる
SPARQLクエリは<textarea>に入れておくと扱いやすい(見せたくなければstyle="display:none")
d3sparql.jsに実装済みの木構造可視化例
d3sparql.roundtree
d3sparql.sunburst
d3sparql.treemap
d3sparql.circlepack
•プログラミング言語開発の影響関係をDBpediaから検索
SPARQLによるグラフ構造データの検索例
PREFIXrdf:<http://www.w3.org/1999/02/22-rdf-syntax-ns#>PREFIXrdfs:<http://www.w3.org/2000/01/rdf-schema#>PREFIXdbpedia-owl:<http://dbpedia.org/ontology/>PREFIXdbpprop:<http://dbpedia.org/property/>PREFIXdbpedia:<http://dbpedia.org/resource/>
SELECTDISTINCT?lang1?lang2?lang1label?lang2label?lang1value?lang2value?lang1year?lang2yearWHERE{?lang1rdf:typedbpedia-owl:ProgrammingLanguage;rdfs:label?lang1name;dbpprop:year?lang1year.?lang2rdf:typedbpedia-owl:ProgrammingLanguage;rdfs:label?lang2name;dbpprop:year?lang2year.?lang1dbpedia-owl:influenced?lang2.FILTER(?lang1!=?lang2)FILTER(LANG(?lang1name)='en')FILTER(LANG(?lang2name)='en')BIND(replace(?lang1name,".programminglanguage.","")AS?lang1label)BIND(replace(?lang2name,".programminglanguage.","")AS?lang2label)FILTER(?lang1year>1950AND?lang1year<2020)FILTER(?lang2year>1950AND?lang2year<2020)#TorenderolderlanguagelargerthannewerBIND((2020-?lang1year)AS?lang1value)BIND((2020-?lang2year)AS?lang2value)}
• SPARQLのSELECT文に対応する変数名が配列でheadに列挙•変数名に対応する値がハッシュの配列でresultsに列挙
SPARQL 1.1 Query Results JSON Format
{"head":{"link":[],"vars":["peer1","name1","peer2","name2"]},"results":{"distinct":false,"ordered":true,"bindings":[{"peer1":{"type":"literal","value":"node0"},"name1":{"type":"literal","value":"node0label"},"peer2":{"type":"literal","value":"node1"},"name2":{"type":"literal","value":"node1label"}},{"peer1":{"type":"literal","value":"node0"},"name1":{"type":"literal","value":"node0label"}"peer2":{"type":"literal","value":"node2"},"name2":{"type":"literal","value":"node2label"}},//listofpairs...]}
ネットワーク図を描くにはこれをグラフ構造のオブジェクトにする必要がある
• D3.jsでよく使われている木構造のJSON
• d3sparql.jsではSPARQL結果のJSONから↑に変換する関数を提供
d3sparql.jsによるJSON形式の変換 (グラフ構造)
{"nodes":[{"key":"node0value","label":"name0value"},{"key":"node1value","label":"name1value"},{"key":"node2value","label":"name2value"},//ノードのリスト...],"links":[{"source":0,"target":1},{"source":0,"target":2},//エッジのリスト...(ノードは出現順にシリアル番号で示す)]}
d3sparql.query(endpoint,sparql,function(json){vargraph=d3sparql.graph(json)varconfig={...options...}//このgraphを可視化に利用d3sparql.dendrogram(graph,config)})
d3sparql.jsに実装済みのグラフ構造可視化例
d3sparql.forcegraph d3sparql.sankey
•チャート• barchart• piechart• scatterplot
•地図• coordmap• namedmap
•表• htmltable• htmlhash
その他の可視化例
•書籍ウェブサイト http://sparqlbook.jp/ から• git clone https://github.com/sparql-book/sparql-book.git
SPARQL本のサンプル例
• sparql-book/chapter5/D3/• d3sparql-dendrogram.html• d3sparql-forcegraph.html• d3sparql-namedmap.html
• d3sparql-sunburst.html
• d3sparql.js• japan.topojson
SPARQL本のサンプル例
要修正 m(__)m ← DBpedia Japan データ更新のため
?root prop-ja:次の駅{1,6} ?child .
↓ ?root prop-ja:次の駅{1,5} ?child .
下記japan.topojsonのCORS対策が必要かも
応用例TogoGenome
• Stanza•初のRDFによるゲノムデータベース
http://togogenome.org/