Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

D3.js で LOD を Visualization

2,465 views

Published on

AITCオープンラボ 5月度 D3.jsでオープンデータをビジュアライズしてみよう! (ハンズオン勉強会)の資料です
http://aitc.jp/events/20140528-OpenLab/info.html

Published in: Technology

D3.js で LOD を Visualization

  1. 1. .js で LOD を Visualization 2014年5月期AITCオープンラボ 2014/05/28
  2. 2. Agenda 19:00 - 19:05 はじめに 19:05 - 20:55 D3.js でグラフを描こう 20:05 - 20:50 LOD に触れてみよう 20:50 - 21:00 クロージング
  3. 3. はじめに
  4. 4. About me 高岡 大介 Works ピースミール・テクノロジー株式会社 開発、技術支援、執筆、講演、etc Community AITC運営委員 CC研サブリーダー・エバンジェリスト @dsuket fb: dsuket
  5. 5. Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. Java コンソーシアム XML部会 2000/07 設立宣言   2001/06~2010/03実活動  2010/03~2010/09  2010/09/08設立 先端IT活用推進コンソーシアム Advanced IT Consortium   to Evaluate, Apply and Drive ・ 企 業 の 枠 を 超 え た 活 動                             ・ 一 社 で は で き な い 活 動 ( 実 証 実 験 等 )         ・ 利 活 用 推 進 の た め の 提 案 ・ 提 言             ・ 情 報 と 知 見 の 提 供                 ・ 成 果 物 の 公 開 Windows コンソーシアム 日本経営協会 XMLフェスタ
  6. 6. 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活用推進コンソーシアム
  7. 7. Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 第4期活動対象分野 realvirtual コンテキスト 人 メタ データ モノ コト コンテキスト コンピューティング クラウド コンピューティング AR ユーザーエクスペリエンス ソーシャル ナチュラルユーザー インタフェース
  8. 8. 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言語で始めよう、データサイエンス!(ハンズオン勉強会) 相関分析による需要予測編
  9. 9. 注意 • Visualization とはなにか? • 可視化のポイントとは? については話しません。ごめんなさい。 参考: エンジニアのためのデータ可視化 [実践]入門 ―D3.jsによるWebの可視化
  10. 10. D3.js でグラフを描こう
  11. 11. 用意するもの Webブラウザ(Chrome推奨) 書き慣れたテキストエディタ (Webサーバー)
  12. 12. http://d3js.org/
  13. 13. D3.js Q&A Q. 何をするもの? 「Data駆動ドキュメント」 なの
  14. 14. グラフツールじゃない!!
  15. 15. D3.js 概要 • SVGの描画が目立つが、任意のDOMを使用可能。 • データをドキュメント(DOM)とバインドし、
 宣言的に記述する。簡潔、パワフル!! • どう表すかの手順ではなく、何を表すかを定義する
  16. 16. 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>
  17. 17. 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>
  18. 18. ブラウザで開く • Chromeで先のhtmlファイルを開く。 • Chrome Dev Tools を開く • Ctrl + Shift + I(Windows) • Cmd +Opt + I(Mac) • Esc でコンソールを開く
  19. 19. コンソール こんな感じに なっているはずよ
  20. 20. セレクション 以下、コンソールで実行する。 • P要素を全て選択 ! ! ! • 背景色の変更 ! ! 対象の要素分、繰り返す > d3.selectAll("p") [Array[3]] > d3.selectAll("p").style("color", "red")
  21. 21. ダイナミック プロパティ • コールバック関数で設定 ! ! ! ! • データをセットし、それを利用 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"; });
  22. 22. 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();
  23. 23. EnterとExitは データと要素の包含関係をみると わかりやすいの
  24. 24. 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"; });
  25. 25. 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
  26. 26. 棒グラフ 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}); データセット グラフ描画
  27. 27. なんだか小さいわね。 縮尺を合わせましょう
  28. 28. スケール var scale = d3.scale.linear() .domain([0,30]).range([0,200]); スケール 入力ドメイン 0 0 30 200 出力レンジ 15 100
  29. 29. スケール 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)}); グラフ描画 ばっちりね
  30. 30. 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;});
  31. 31. 散布図 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 ] ]; データセット
  32. 32. 散布図 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) +")" }); 描画
  33. 33. 軸が欲しいわね。 d3.svg.axis()で調べてみて。 散布図
  34. 34. 地図 GeoJSON か TopoJSON 形式のデータが必要 1. Shapeデータを取得 2. GeoJSONに変換 3. TopoJSONに変換 ! 参考: D3.jsで画像を使わず日本地図をブラウザに表示
  35. 35. http://www.naturalearthdata.com/ Shapeデータの取得
  36. 36. Shapeデータの取得 http://www.naturalearthdata.com/downloads/
  37. 37. Shapeデータの取得 http://www.naturalearthdata.com/downloads/10m-cultural-vectors/
  38. 38. GeoJSONに変換 $ ogr2ogr -f GeoJSON -where 'geonunit = "Japan"' japan.geojson ne_10m_admin_1_states_provinces.shp 変換ツールをインストール $ brew install gdal 日本のデータをGeoJSON形式で抽出
  39. 39. TopoJSONに変換 TopoJSON変換ツールをインストール $ sudo npm -g install topojson $ topojson japan.geojson >japan.topojson TopoJSONに変換 面倒くさすぎる・・・(llĺд`)
  40. 40. 用意しました。 http://bit.ly/japantopo
  41. 41. http://jsfiddle.net/dsuket/sEFjd/ 表示してみた あとはデータを マッピングするだけね!
  42. 42. LODに触れてみよう
  43. 43. Linked Open Data ! ! ウェブ上でコンピュータ処理に適したデータを公開・共有するための技術の 総称である。従来のウェブがHTML文書間のハイパーリンクによる人間のた めの情報空間の構築を目的としてきたことに対応して、Linked Open Data では構造化されたデータ同士をリンクさせることでコンピュータが利用可能 な「データのウェブ」の構築を目指している。 ’’ http://ja.wikipedia.org/wiki/Linked_Open_Data 詳しくは以前の資料を読んでね!
  44. 44. RDF Resource Description Framework メタデータを主語,述語,目的語の3つのリソースの 組によって表現する トリプル 主語 Subject 目的語 Object 述語 Predicate
  45. 45. SPARQL SPARQL Protocol and RDF Query Language • RDFを検索するクエリ言語 • SQLのRDF版と思えばOK SELECT * WHERE { ?s ?p ?o }
  46. 46. SPARQL Endpoint SPARQLを公開している元 • DBPedia • LODチャレンジ • SparqlEPCU • 気象庁防災情報XML • http://www.w3.org/wiki/SparqlEndpoints
  47. 47. 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 東京近辺の施設一覧
  48. 48. SPARQLで遊ぼう2 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 ももクロシングルチャート一覧
  49. 49. SPARQL × D3.js
  50. 50. Demo 完成イメージ http://jsfiddle.net/dsuket/W9sVC/ 先ほどの公共施設情報@SparqlEPCUを日本地図に マッピングしてみる ごめんなさい!解説はコードで!
  51. 51. 面白そうなデータを探して 可視化してみましょう!
  52. 52. 注意点 • 外部サイトのSPARQL API、地図データなどを読 み込む場合はWebサーバーが必要です。
 適宜Apacheなど立ててください。 • JSFiddle でも結構使えます。

×