SGVIZLER / Fumihiro Kato @fumi1

HTML版: http://fumi.me/talks/20140308/

SGVIZLERJavascript/jQueryの可視化ライブラリ

SPARQLクエリを埋め込むだけでチャート等を表示 (xml,json, jsonp対応)可視化部分: 主にGoogle Visualization API

https://code.google.com/p/sgvizler/

安定版: 0.6

インストール<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script><script type="text/javascript" src="https://www.google.com/jsapi"></script><script type="text/javascript" src="http://beta.data2000.no/sgvizler/release/0.6/sgvizler.js"></script><script type="text/javascript" src="http://beta.data2000.no/sgvizler/misc/trac/sgvizler-setup.js"></script>

sgvizler.jsダウンロード

testの中にサンプルあり

SGVIZLER-SETUP.JS$(document).ready( function (){ sgvizler .defaultEndpointOutputFormat('json') // xml, json, or jsonp // prefix定義 .prefix('foaf', "http://xmlns.com/foaf/0.1/") .prefix('dct', "http://purl.org/dc/terms/") .prefix('geo', "http://www.w3.org/2003/01/geo/wgs84_pos#") .prefix('geos', "http://www.opengis.net/ont/geosparql#") .prefix('rdfs', 'http://www.w3.org/2000/01/rdf-schema#') .prefix('skos', "http://www.w3.org/2004/02/skos/core#") .prefix('yago', 'http://yago-knowledge.org/resource/') // ページ内の全てのsgvizler containerを描画 .containerDrawAll(); });

使い方div要素での埋め込みフォームからの入力JavaScriptから利用

DIV埋め込み<div id="sgvizler-example" data-sgvizler-endpoint="http://ja.dbpedia.org/sparql" data-sgvizler-query="SELECT ?class (COUNT(?instance) AS ?noOfInstances) WHERE{ ?instance a ?class } GROUP BY ?class ORDER BY ?class" data-sgvizler-chart="google.visualization.PieChart" style="width:800px; height:400px;"></div>

http://dbpedia.org/ontology/Actorhttp://dbpedia.org/ontology/AdultAc...http://dbpedia.org/ontology/Agenthttp://dbpedia.org/ontology/Albumhttp://dbpedia.org/ontology/Animehttp://dbpedia.org/ontology/Architec...http://dbpedia.org/ontology/Artisthttp://dbpedia.org/ontology/Athletehttp://dbpedia.org/ontology/Basebal...http://dbpedia.org/ontology/Buildinghttp://dbpedia.org/ontology/Cartoonhttp://dbpedia.org/ontology/Celestia...http://dbpedia.org/ontology/Chemic...http://dbpedia.org/ontology/Chemic...

1/5

6.9%

4.8%

4.1%

4.6%4.8%

6%

15%

4.8%

4.1%

フォームから入力<div id="sgvizler-form-example"></div><script type="text/javascript">

</script> $(document).ready(function() { sgvizler.formDraw("sgvizler-form-example"); });

JAVASCRIPTから利用var sparqlQuery = "SELECT ?class (COUNT(?instance) AS ?noOfInstances) WHERE{ ?instance a ?class } GROUP BYvar Q = new sgvizler.Query();

// sgvizlerオブジェクトにデフォルト値が設定されている可能性ありQ.query(sparqlQuery) .endpointURL("http://striata.lodac.nii.ac.jp/sparql") .endpointOutputFormat("json") // 結果形式指定: 'xml', 'json', 'jsonp'. .chartFunction("google.visualization.BarChart") // チャート名 .draw("sgvizler-js-example"); // 描画する場所のHTML要素指定

東京都の産業中分類別，従業員数

PREFIX ktsh:<http://datameti.go.jp/scheme/kougyou-toukei-schema/>PREFIX kougyo: <http://datameti.go.jp/lod/kougyou-toukei/> PREFIX qb: <http://purl.org/linked-data/cube#>PREFIX sac: <http://datameti.go.jp/scheme/standard-area-code/> SELECT distinct ?label ?totalWHERE { { SELECT distinct ?sanchu (SUM(?numberOfEmployees) AS ?total) WHERE { ?cell1 qb:dataSet kougyo:h22-k8-data-j-1003 ; ktsh:refSangyoSaiBunrui ?sansai ; ktsh:refPrefecture sac:C13 ; ktsh:numberOfEmployees ?numberOfEmployees . ?sanchu skos:narrower/skos:narrower ?sansai . } GROUP BY ?sanchu } ?sanchu rdfs:label ?label .} ORDER BY DESC(?total)

東京都の産業中分類別、従業員数total

0 15,000 30,000 45,000 60,000

印刷...食料...輸送...電気...金属...生産...業務...情報...その...電子...はん...化学...プラ...パル...繊維...なめ...窯業...ゴム...家具...鉄鋼...非鉄...飲料...木材...石油...

東京都の産業中分類別、従業員数割合印刷・同関連業

食料品製造業

輸送用機械器具製造業

電気機械器具製造業

金属製品製造業

生産用機械器具製造業

業務用機械器具製造業

情報通信機械器具製造業

その他の製造業

電子部品・デバイス・電子回路...はん用機械器具製造業

化学工業

プラスチック製品製造業（別掲...

1/2

18.8%

10.7%

8.4%

7.8%

3.9%

4%

5%

5.2%5.8%

7%

11' 産業大分類別エネルギー使用量

PREFIX qb: <http://purl.org/linked-data/cube#> PREFIX energy: <http://datameti.go.jp/scheme/energy/2013/>PREFIX energy-shouhi-toukei: <http://datameti.go.jp/lod/energy-shouhi-toukei/>

SELECT DISTINCT ?slabel (SUM(?esum) AS ?sangyoe) WHERE{ ?cell1 qb:dataSet energy-shouhi-toukei:h23-2-2-B; <http://datameti.go.jp/scheme/energy-census-qbproperty/refEnergy> energy:燃料; <http://datameti.go.jp/scheme/energy-census-qbproperty/refSangyoBunrui> ?sangyo; <http://datameti.go.jp/scheme/energy-census-qbproperty/amountOfEnergy> ?e1. ?cell2 qb:dataSet energy-shouhi-toukei:h23-2-2-B; <http://datameti.go.jp/scheme/energy-census-qbproperty/refEnergy> energy:電力; <http://datameti.go.jp/scheme/energy-census-qbproperty/refSangyoBunrui> ?sangyo; <http://datameti.go.jp/scheme/energy-census-qbproperty/amountOfEnergy> ?e2. ?cell3 qb:dataSet energy-shouhi-toukei:h23-2-2-B; <http://datameti.go.jp/scheme/energy-census-qbproperty/refEnergy> energy:熱; <http://datameti.go.jp/scheme/energy-census-qbproperty/refSangyoBunrui> ?sangyo; <http://datameti.go.jp/scheme/energy-census-qbproperty/amountOfEnergy> ?e3. ?sangyo skos:broader ?sandai. ?sandai rdfs:label ?slabel. BIND (?e1+?e2+?e3 AS ?esum)}GROUP BY ?slabelORDER BY DESC(?sangyoe)

11' 産業大分類別エネルギー使用量sangyoe

0 2,500,000 5,000,000 7,500,000 10,000,000

製造...卸売...宿泊...医療...生活...サー...農業...建設...教育...運輸...電気...学術...公務...不動...情報...金融...鉱業...漁業

複合...

気をつけることCORS (Cross-origin resource sharing) 依存IEの正式対応は10からjsonp対応しているかはSPARQL Endpoint依存(標準ではない)

参考リンクSgvizlerSgvizler 0.6 SetupUsing Sgvizler 0.6: オプション等が載っているDesiningQueries: 可視化タイプ一覧sgvizler Class