オープンデータ／Linked Open Data お手軽可視化ツールの紹介～SPARQLでマッシュアップ～

オープンデータ／Linked Open Data
お手軽可視化ツールの紹介
～SPARQLでマッシュアップ～
上田洋
LODチャレンジJapan実行委員会
特定非営利活動法人リンクト・オープン・データ・イニシアティブ
Linked Open Dataハッカソン関西
http://wp.lodosaka.jp/
関西オープンデータEXPO’15
2015.2.11

オープンデータ／Linked Open Data
お手軽可視化ツール
• SPARQLクエリ（クエリ言語)を書くだけでプログラミ
ングなしにいろんなビジュアライズやアプリが作れ
ます
• 全てWebブラウザがあれば動作します
• Webサーバは必要ありません！

今日紹介するツール
• 地図アプリ
• leaflet-simple-sparql
• クイズアプリ
• SlickQuiz-SPARQL
• カレンダーアプリ
• fullcalendar-sparql-js
• 地図とタイムラインビジュアライズアプリ
• SPARQL Timeliner
• 地図で空白地域ビジュアライズアプリ
• ○○危険地帯
• 書籍検索アプリ
• booksearch-sparql-js
• データビジュアライズツール
• Sgvizler
※全てオープンソースです

地図アプリ
• leaflet-simple-sparql
• https://github.com/uedayou/leaflet-simple-sparql

使い方：leaflet-simple-sparql
• githubのページから「Download ZIP」ボタンを押して、
ソースコード一式をダウンロード
• 解凍して「config.js」にエンドポイントとクエリを記述する
• index.html をブラウザで開く
var endpoint = "http://ja.dbpedia.org/sparql";
var query = (function () {/*
PREFIX geo: <http://www.w3.org/2003/01/geo/wgs84_pos#>
PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
select * where {
?link rdfs:label ?title;
geo:lat ?lat;
geo:long ?long.
}
limit 1000
*/}).toString().match(/¥n([¥s¥S]*)¥n/)[1];

クイズアプリ
• SlickQuiz-SPARQL
• https://github.com/uedayou/SlickQuiz-SPARQL

使い方：SlickQuiz-SPARQL
var endpoint = "http://lodcu.cs.chubu.ac.jp/SparqlEPCU/api/yokohama_quiz";
select distinct * where { ?uri
<http://linkdata.org/property/rdf1s560i#question> ?question;
<http://linkdata.org/property/rdf1s560i#choice1> ?choise1;
<http://linkdata.org/property/rdf1s560i#answer> ?answer_no;
<http://linkdata.org/property/rdf1s560i#kaisetsu> ?kaisetsu.
bind(concat('</p>解説：',str(?kaisetsu),'</p>') as ?correct)
bind(concat('</p>解説：',str(?kaisetsu),'</p>') as ?incorrect) } ORDER BY
RAND() LIMIT 10

SlickQuiz-SPARQL用の
データの作り方
• データは簡単に作成できます。
• LinkData.org の「横浜検定問題・解答集」と同じよう
にデータを作るだけ
• http://linkdata.org/work/rdf1s560i
データを作って「ご当地検定アプリ」作りませんか？

カレンダーアプリ
• fullcalendar-sparql-js
• https://github.com/uedayou/fullcalendar-sparql-js

使い方：fullcalendar-sparql-js
var endpoint = "http://archive.yafjp.org/test/inspection.php";
PREFIX dc: <http://purl.org/dc/elements/1.1/>
PREFIX schema: <http://schema.org/>
PREFIX event: <http://fp.yafjp.org/terms/event#>
SELECT * WHERE{
?uri a event:Event;
schema:name ?title;
schema:startDate ?start;
schema:endDate ?end;
dc:description ?description.
}

地図とタイムラインの
ビジュアライズアプリ
• SPARQL Timeliner
• http://uedayou.net/SPARQLTimeliner/

使い方：SPARQL Timeliner
エンドポイントのURLを入力
クエリを入力
• http://uedayou.net/SPARQLTimeliner
を開いてエンドポイントURLとクエリを入力して
「Load>>」ボタンをクリック

使い方：SPARQL Timeliner
• 以下のルールに従ってクエリを作成してください
• 詳しい使い方は以下の資料にまとめています
• http://www.slideshare.net/uedayou/sparql-timeliner-
28905905

トイレ危険地帯
• Linked Open Data チャレンジ 2013 受賞作品
• 鯖江市が公開するオープンデータのうち、公衆トイ
レの位置を利用してトイレのない地域をWebアプリ
でビジュアライズ
http://y4ashida.github.io/toilet/

○○危険地帯
• トイレ危険地帯のソースコードを修正して、SPARQL
でさまざまなデータで空白地域をビジュアライズで
きるようにしました
• https://github.com/uedayou/dangerzone-sparql

大阪市版トイレ危険地帯
http://uedayou.github.io/dangerzone-sparql/

○○危険地帯の使い方
1. 「Download ZIP」ボタンを押してソースコード
をダウンロード
2. ZIPファイルを解凍
3. config.js の書き換える
4. Index.html をブラウザで開く
SPARQLを書きます

config.js の書き方
// SPARQLエンドポイントを指定
var endpoint = "http://db.lodc.jp/sparql";
// SPARQLクエリを指定
SELECT DISTINCT *
FROM <http://lod.sfc.keio.ac.jp/challenge2013/show_status.php?id=d030>
WHERE{
?uri <http://lodosaka.hozo.jp/category_1> "公衆トイレ"@ja ;
<http://www.w3.org/2003/01/geo/wgs84_pos#lat> ?latitude ;
<http://www.w3.org/2003/01/geo/wgs84_pos#long> ?longitude .
}
// 中心位置を指定
var initial_latitude =34.68206400648744;
var initial_longitude =135.49816131591797;
// ズーム率を指定
var initial_zoom = 11;
SPARQL
クエリ
SPARQL
エンドポイント

大阪市のいろんな危険地帯を作っ
てみよう！
// SPARQLエンドポイントを指定
var endpoint = "http://db.lodc.jp/sparql";
// SPARQLクエリを指定
SELECT DISTINCT *
FROM <http://lod.sfc.keio.ac.jp/challenge2013/show_status.php?id=d030>
WHERE{
?uri <http://lodosaka.hozo.jp/category_1> "公衆トイレ"@ja ;
<http://www.w3.org/2003/01/geo/wgs84_pos#lat> ?latitude ;
<http://www.w3.org/2003/01/geo/wgs84_pos#long> ?longitude .
}
LIMIT 1000
// 中心位置を指定
var initial_latitude =34.68206400648744;
var initial_longitude =135.49816131591797;
// ズーム率を指定
var initial_zoom = 11;
ここのカテゴリを変えると
いろんな危険地帯が
作れます
例：
“学校・保育所”@ja
“名所・旧跡”@ja
“警察・消防”@ja
“医療・福祉”@ja
“公園・スポーツ”@ja
“駅・バス停”@ja
…

書籍検索アプリ
• booksearch-sparql-js
• https://github.com/uedayou/booksearch-sparql-js

使い方：booksearch-sparql-js
• ?uri に書籍URI、?title に書籍タイトル、?description に詳細情
報が入るようにクエリを記述してください。
• {% QUERY %} が検索文字列に置き換えられます。
// SPARQLエンドポイントURL
var endpoint =
"http://lodcu.cs.chubu.ac.jp/SparqlEPCU/api/kyotobook_list";
// SPARQLクエリ（検索用)
var list_query = (function () {/*
select distinct ?uri ?title ?description where
{
?uri <http://linkdata.org/property/rdf1s1294i#title> ?title;
<http://linkdata.org/property/rdf1s1294i#Summary> ?description.
filter(regex(str(?title), '.*?{% QUERY %}.*?'))
}

使い方：booksearch-sparql-js
• config.js の prop_labels にURIとそのラベルを設定
しておくと、詳細表示の際にURIをラベルに置き換
わります。
var prop_labels = {
"http://purl.org/dc/terms/title":"タイトル",
"http://purl.org/dc/elements/1.1/creator":"著者",
…

データビジュアライズツール
• sgvizler
• http://dev.data2000.no/sgvizler/
• ※今回はバージョン0.5を使います

使い方：sgvizler
• 以下のコードをHTMLファイルに貼り付けて保存してブラウザで開くだけ
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" id="sgvzlr_script"
src="http://sgvizler.googlecode.com/svn/release/0.5/sgvizler.js"></script>
<script type="text/javascript">

</script>
<div
id=“sgvizler-sample”
data-sgvizler-endpoint
="http://lodcu.cs.chubu.ac.jp/SparqlEPCU/api/kyotobook_list"
data-sgvizler-query=“
SELECT ?year (count(?uri) AS ?noOfUri)
WHERE {
?uri <http://linkdata.org/property/rdf1s1294i#Year> ?year.
} GROUP BY ?year
ORDER BY DESC(?noOfUri)
“
data-sgvizler-chart="gBarChart"
data-sgvizler-loglevel="2"
data-sgvizler-chart-options="title=Number of instances"
style="width:2000px; height:2500px;"></div>
• 以下で雛形コードをダウンロードできます
• http://uedayou.net/sparql-mashup/sgvizler-sample.html

使い方：sgvizler
<div
id=“sgvizler-sample”
data-sgvizler-endpoint
= "http://lodcu.cs.chubu.ac.jp/SparqlEPCU/api/kyotobook_list"
data-sgvizler-query=“
SELECT ?year (count(?uri) AS ?noOfUri)
WHERE {
?uri <http://linkdata.org/property/rdf1s1294i#Year> ?year.
} GROUP BY ?year
“
data-sgvizler-chart="gBarChart"
data-sgvizler-loglevel="2"
data-sgvizler-chart-options=“title=出版年別ランキング"
style="width:800px; height:500px;"></div>
クエリを記述
グラフの
種類を指定
エンドポイントを指定
グラフタイトル
を記述
Idを指定

例で利用するデータ
• 京都が出てくる本のデータ
• 京都岡崎にある図書館で働く司書の方々が中心のグ
ループ「ししょまろはん」が作成・公開する京都が舞台の
小説やマンガ・ライトノベル等のデータ
• 作品の舞台となった京都府内の位置データや司書さん
のおすすめ度もデータ化される
• LODチャレンジJapan2014データセット部門応募作品
• LODチャレンジ2011-2013応募作品メタデータ
どちらも
LODチャレンジ応募作品のSPARQLエンドポイント（試行版）
http://lodc.jp/
で検索できます

京都が出てくる本のデータ：
出版年ランキング
http://uedayou.net/sparql-mashup/sgvizler/kyoto-issued-ranking.html

著者トップ10
http://uedayou.net/sparql-mashup/sgvizler/kyoto-author-top10.html

おすすめ度ランキング
http://uedayou.net/sparql-mashup/sgvizler/kyoto-recommend-ranking.html

出版社別ランキング
http://uedayou.net/sparql-mashup/sgvizler/kyoto-publisher-ranking.html

カテゴリ別ランキング
http://uedayou.net/sparql-mashup/sgvizler/kyoto-category-ranking.html

クエリの書き方
（棒グラフ、円グラフの場合）
• 「data-sgvizler-chart」には以下を指定
• 円グラフ：「gPieChart」
• 縦棒グラフ：「gColumnChart」
• 横棒グラフ：「gBarChart」
• GROUP BY を使ってデータをグループ化する
• COUNTで出現回数を計算
PREFIX dcterms: <http://purl.org/dc/terms/>
SELECT ?year (COUNT(?uri) AS ?noOfUri)
WHERE {
?uri dcterms:issued ?year.
}
GROUP BY ?year

（棒グラフ、円グラフの場合）
• 実際のデータは…

LODチャレンジ応募作品の
関連グラフ
http://uedayou.net/sparql-mashup/sgvizler/lodc-network.html

（無指向グラフの場合）
select distinct ?title1 ?title2
from <http://lod.sfc.keio.ac.jp/challenge/entries>
where {
?s <http://purl.org/dc/terms/relation> ?o.
?s <http://purl.org/dc/terms/title> ?title1.
?o <http://purl.org/dc/terms/title> ?title2.
}
• 無指向グラフの場合
• 「data-sgvizler-chart」には「gForceGraph」を指定
• SELECTで二つのラベルが入るようにクエリを記述

（無指向グラフの場合）
• 実際のデータは…

LOD・SPARQLをもっと知りたい！
• LODハッカソン関西公式サイトで詳しく紹介してい
ます
http://wp.lodosaka.jp/

オープンデータ／Linked Open Data お手軽可視化ツールの紹介～SPARQLでマッシュアップ～

More Related Content

What's hot (20)

Similar to オープンデータ／Linked Open Data お手軽可視化ツールの紹介～SPARQLでマッシュアップ～ (20)

More from uedayou (11)

オープンデータ／Linked Open Data お手軽可視化ツールの紹介～SPARQLでマッシュアップ～