d3.js で lod を visualization
DESCRIPTION
AITCオープンラボ 5月度 D3.jsでオープンデータをビジュアライズしてみよう！ （ハンズオン勉強会）の資料です http://aitc.jp/events/20140528-OpenLab/info.htmlTRANSCRIPT
.js で LOD を
Visualization
2014年5月期AITCオープンラボ 2014/05/28
Agenda
19:00 - 19:05 はじめに
19:05 - 20:55 D3.js でグラフを描こう
20:05 - 20:50 LOD に触れてみよう
20:50 - 21:00 クロージング
はじめに
About me高岡 大介 Works
ピースミール・テクノロジー株式会社 開発、技術支援、執筆、講演、etc
Community
AITC運営委員 CC研サブリーダー・エバンジェリスト @dsuket
fb: dsuket
Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
ＪａｖａコンソーシアムＸＭＬ部会
2000/07 設立宣言 2001/06~2010/03実活動 2010/03~2010/09 2010/09/08設立
先端IT活用推進コンソーシアム Advanced IT Consortium to Evaluate, Apply and Drive
・企業の枠を超えた活動
・一社ではできない活動（実証実験等）
・利活用推進のための提案・提言
・情報と知見の提供
・成果物の公開
Windowsコンソーシアム日本経営協会XMLフェスタ
Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
企業における先端ITの活用および 先端ITエキスパート技術者の育成を目的とし、 もって、社会に貢献することを目指す非営利団体設 立 ： 2010年9月8日（会期： ～2016年8月31日）会 長 ： 鶴保 征城 （IPA顧問、HAL校長） 会 員 ： 法人会員＆個人事業主、個人会員、学術会員 特別会員 （産業技術総合研究所、気象庁、 消防研究センター、防災科学技術研究所）顧 問 ： 稲見 昌彦 (慶応義塾大学大学院 教授） 和泉 憲明 (産業技術総合研究所 上級主任研究員) 萩野 達也 (慶応義塾大学 教授) 橋田 浩一 (東京大学大学院 情報理工学系研究科 教授) 丸山 不二夫(早稲田大学大学院 客員教授） 山本 修一郎(名古屋大学大学院 教授)BizAR顧問： 三淵 啓自 (デジタルハリウッド大学大学院 教授） 川田 十夢 (AR三兄弟 長男）
先端IT活用推進コンソーシアム
Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
第4期活動対象分野
realvirtual
コンテキスト
人
メタ データ
モノ コト
コンテキストコンピューティング
クラウドコンピューティング
AR
ユーザーエクスペリエンス
ソーシャル
ナチュラルユーザーインタフェース
AITCオープンラボ2013/11 R言語で始めよう、データサイエンス!(ハンズオン勉強会) ~ R言語の基礎から機械学習・ビジュアライゼーション事始め ~
2013/12 セマンティックWeb技術に触れてみよう!RDF/SPARQLハンズオン勉強会 ~ オープンデータからLinkedDataまでを総ざらい ~
2014/01 簡単に仮想環境を構築したい人のためのVagrant&Chef勉強会
2014/02 デジタルガジェット祭り
2014/03 【再演】R言語で始めよう、データサイエンス!(ハンズオン勉強会) ~ R言語の基礎から機械学習・ビジュアライゼーション事始め ~
2014/04 第2回 R言語で始めよう、データサイエンス!(ハンズオン勉強会) ~ 相関分析による需要予測編 ~
注意• Visualization とはなにか？
• 可視化のポイントとは？
については話しません。ごめんなさい。
参考: エンジニアのためのデータ可視化 ［実践］入門 ―D3.jsによるWebの可視化
D3.js でグラフを描こう
用意するもの
Webブラウザ（Chrome推奨）
書き慣れたテキストエディタ
（Webサーバー）
D3.js Q&A
Q. 何をするもの？
「Data駆動ドキュメント」なの
グラフツールじゃない！！
D3.js 概要
• SVGの描画が目立つが、任意のDOMを使用可能。
• データをドキュメント（DOM）とバインドし、宣言的に記述する。簡潔、パワフル！！
• どう表すかの手順ではなく、何を表すかを定義する
D3.js のキホン• 作業ディレクトリを作成して、移動
!
!
• ”sample01.html” で、htmlを作成
• <head>でd3.jsを読み込み
!
!
• <p>タグを3つ作成
$ mkdir -p ~/work/aitc201405/ $ cd ~/work/aitc201405/
FinderやExplorerでももちろんOK
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
sample01.html<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Sample 01</title> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> </head> <body> <p>A</p> <p>B</p> <p>C</p> </body> </html>
ブラウザで開く
• Chromeで先のhtmlファイルを開く。 • Chrome Dev Tools を開く
• Ctrl + Shift + I（Windows） • Cmd ＋Opt + I（Mac）
• Esc でコンソールを開く
コンソール
こんな感じに なっているはずよ
セレクション以下、コンソールで実行する。 • P要素を全て選択
!
!
!
• 背景色の変更 !
!
対象の要素分、繰り返す
> d3.selectAll("p") [Array[3]]
> d3.selectAll("p").style("color", "red")
ダイナミック プロパティ• コールバック関数で設定
!
!
!
!
• データをセットし、それを利用
d3.selectAll("p").style("color", function() { return "hsl("+ Math.random()*360 + ",100%,50%)"; });
d3.selectAll("p") .data([8, 12, 18, 23, 42]) .style("font-size", function(d, i) { return d + "px"; });
Enter/Exit• Enterセレクション: 余剰データ要素
!
!
!
!
• Exitセレクション: 不足ノード要素
d3.selectAll("p") .data([4, 8, 15, 16, 23, 42]) .enter().append("p") .text(function(d) { return "I’m " + d; });
d3.selectAll("p") .data([4, 8, 15]) .exit().remove();
EnterとExitは データと要素の包含関係をみると
わかりやすいの
Transition• アニメーションを実現
!
!
!
!
d3.selectAll("p") .data([1,2,3]).transition() .duration(1000) .delay(function(d, i) { return i * 1000; }) .ease("cubic-out") .style("font-size", function(d) { return d * 12 + "px"; });
SVG<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Sample 01</title> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> </head> <body> <svg width="500" height="400"></svg> </body> </html>
sample02.html
棒グラフ
var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
d3.select("svg").selectAll("rect") .data(dataset) .enter() .append("rect") .attr("width", 20) .attr("height", function(d){return d}) .attr("x", function(d,i){return i*30}) .attr("y", function(d){return 200});
データセット
グラフ描画
なんだか小さいわね。 縮尺を合わせましょう
スケール
var scale = d3.scale.linear() .domain([0,30]).range([0,200]);
スケール
入力ドメイン0
0
30
200出力レンジ
15
100
スケールd3.select("svg").selectAll("rect") .data(dataset) .attr("width", 20) .attr("height", function(d){return scale(d)}) .attr("x", function(d,i){return i*30}) .attr("y", function(d){return 200 - scale(d)});
グラフ描画
ばっちりね
circle• SVG:circle の描画
!
!
!
d3.select("svg").selectAll("circle") .data([1,2,3,4]).enter().append("circle") .attr("cx", function(d){return d * 80;}) .attr("cy", function(d){return d * 40;}) .attr("r", function(d){return d * 10;});
散布図var dataset = [ [ 15, 20, 7 ], [ 480, 90, 15 ], [ 250, 50, 20 ], [ 100, 33, 6 ], [ 330, 95, 9 ], [ 410, 12, 4 ], [ 475, 44, 3 ], [ 25, 67, 5 ], [ 85, 21, 18 ], [ 220, 88, 7 ] ];
データセット
散布図d3.select("svg").selectAll("circle") .data(dataset) .enter() .append("circle") .attr("cx", function(d){return d[0]}) .attr("cy", function(d){return 200 - d[1]}) .attr("r", function(d){return d[2]}) .attr("fill", function(d){ return "rgba(0,0,0,"+ (1 - d[2]*0.05) +")" });
描画
軸が欲しいわね。 d3.svg.axis()で調べてみて。
散布図
地図GeoJSON か TopoJSON 形式のデータが必要
1. Shapeデータを取得
2. GeoJSONに変換
3. TopoJSONに変換
!
参考: D3.jsで画像を使わず日本地図をブラウザに表示
Shapeデータの取得
http://www.naturalearthdata.com/downloads/10m-cultural-vectors/
GeoJSONに変換
$ ogr2ogr -f GeoJSON -where 'geonunit = "Japan"' japan.geojson ne_10m_admin_1_states_provinces.shp
変換ツールをインストール$ brew install gdal
日本のデータをGeoJSON形式で抽出
TopoJSONに変換
TopoJSON変換ツールをインストール$ sudo npm -g install topojson
$ topojson japan.geojson >japan.topojson
TopoJSONに変換
面倒くさすぎる・・・(lllд｀)
LODに触れてみよう
Linked Open Data!!ウェブ上でコンピュータ処理に適したデータを公開・共有するための技術の総称である。従来のウェブがHTML文書間のハイパーリンクによる人間のための情報空間の構築を目的としてきたことに対応して、Linked Open Dataでは構造化されたデータ同士をリンクさせることでコンピュータが利用可能な「データのウェブ」の構築を目指している。
’’
http://ja.wikipedia.org/wiki/Linked_Open_Data
詳しくは以前の資料を読んでね！
RDFResource Description Framework
メタデータを主語，述語，目的語の3つのリソースの組によって表現する ⇒ トリプル
主語 Subject
目的語 Object
述語 Predicate
SPARQLSPARQL Protocol and RDF Query Language
• RDFを検索するクエリ言語
• SQLのRDF版と思えばOK
SELECT * WHERE { ?s ?p ?o }
SPARQL EndpointSPARQLを公開している元
• DBPedia
• LODチャレンジ
• SparqlEPCU
• 気象庁防災情報XML
• http://www.w3.org/wiki/SparqlEndpoints
SPARQLで遊ぼう公共施設情報@SparqlEPCU
http://lodcu.cs.chubu.ac.jp/SparqlEPCU/project.jsp?projectID=publicFacilityInfo
select ?s ?label where { ?s geo:lat ?lat . ?s geo:long ?long . ?s rdfs:label ?label. FILTER(?lat > "35" && ?lat < "36") . FILTER(?long > "139" && ?long < "140") . } LIMIT 100
東京近辺の施設一覧
SPARQLで遊ぼう２
select distinct * where { ?title dbpedia-owl:artist <http://ja.dbpedia.org/resource/ももいろクローバーZ>. ?title prop-ja:chartPosition ?pos. ?title prop-ja:released ?released. ?title prop-ja:thisSingle ?single. FILTER(regex(?single, "(...年)")) . } order by ?single ?released
DBPedia
http://ja.dbpedia.org/sparql
ももクロシングルチャート一覧
SPARQL × D3.js
Demo
完成イメージ
http://jsfiddle.net/dsuket/W9sVC/
先ほどの公共施設情報@SparqlEPCUを日本地図にマッピングしてみる
ごめんなさい！解説はコードで！
面白そうなデータを探して 可視化してみましょう！
注意点
• 外部サイトのSPARQL API、地図データなどを読み込む場合はWebサーバーが必要です。適宜Apacheなど立ててください。
• JSFiddle でも結構使えます。