D3.js で LOD を Visualization
•
10 likes•3,618 views
AITCオープンラボ 5月度 D3.jsでオープンデータをビジュアライズしてみよう！ （ハンズオン勉強会）の資料です http://aitc.jp/events/20140528-OpenLab/info.html
Recommended
Recommended
More Related Content
Similar to D3.js で LOD を Visualization
Similar to D3.js で LOD を Visualization (20)
More from dsuke Takaoka
More from dsuke Takaoka (20)
D3.js で LOD を Visualization
- 1. .js で LOD を Visualization 2014年5月期AITCオープンラボ 2014/05/28
- 2. Agenda 19:00 - 19:05 はじめに 19:05 - 20:55 D3.js でグラフを描こう 20:05 - 20:50 LOD に触れてみよう 20:50 - 21:00 クロージング
- 3. はじめに
- 4. About me 高岡 大介 Works ピースミール・テクノロジー株式会社 開発、技術支援、執筆、講演、etc Community AITC運営委員 CC研サブリーダー・エバンジェリスト @dsuket fb: dsuket
- 5. 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フェスタ
- 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. Copyright © 2013 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 第4期活動対象分野 realvirtual コンテキスト 人 メタ データ モノ コト コンテキスト コンピューティング クラウド コンピューティング AR ユーザーエクスペリエンス ソーシャル ナチュラルユーザー インタフェース
- 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. 注意 • Visualization とはなにか？ • 可視化のポイントとは？ については話しません。ごめんなさい。 参考: エンジニアのためのデータ可視化 ［実践］入門 ―D3.jsによるWebの可視化
- 10. D3.js でグラフを描こう
- 12. http://d3js.org/
- 14. グラフツールじゃない！！
- 15. D3.js 概要 • SVGの描画が目立つが、任意のDOMを使用可能。 • データをドキュメント（DOM）とバインドし、 宣言的に記述する。簡潔、パワフル！！ • どう表すかの手順ではなく、何を表すかを定義する
- 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. 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. ブラウザで開く • Chromeで先のhtmlファイルを開く。 • Chrome Dev Tools を開く • Ctrl + Shift + I（Windows） • Cmd ＋Opt + I（Mac） • Esc でコンソールを開く
- 20. セレクション 以下、コンソールで実行する。 • P要素を全て選択 ! ! ! • 背景色の変更 ! ! 対象の要素分、繰り返す > d3.selectAll("p") [Array[3]] > d3.selectAll("p").style("color", "red")
- 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. 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();
- 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. 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. 棒グラフ 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}); データセット グラフ描画
- 28. スケール var scale = d3.scale.linear() .domain([0,30]).range([0,200]); スケール 入力ドメイン 0 0 30 200 出力レンジ 15 100
- 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. 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. 散布図 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. 散布図 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) +")" }); 描画
- 34. 地図 GeoJSON か TopoJSON 形式のデータが必要 1. Shapeデータを取得 2. GeoJSONに変換 3. TopoJSONに変換 ! 参考: D3.jsで画像を使わず日本地図をブラウザに表示
- 38. GeoJSONに変換 $ ogr2ogr -f GeoJSON -where 'geonunit = "Japan"' japan.geojson ne_10m_admin_1_states_provinces.shp 変換ツールをインストール $ brew install gdal 日本のデータをGeoJSON形式で抽出
- 39. TopoJSONに変換 TopoJSON変換ツールをインストール $ sudo npm -g install topojson $ topojson japan.geojson >japan.topojson TopoJSONに変換 面倒くさすぎる・・・(llĺд｀)
- 42. LODに触れてみよう
- 43. Linked Open Data ! ! ウェブ上でコンピュータ処理に適したデータを公開・共有するための技術の 総称である。従来のウェブがHTML文書間のハイパーリンクによる人間のた めの情報空間の構築を目的としてきたことに対応して、Linked Open Data では構造化されたデータ同士をリンクさせることでコンピュータが利用可能 な「データのウェブ」の構築を目指している。 ’’ http://ja.wikipedia.org/wiki/Linked_Open_Data 詳しくは以前の資料を読んでね！
- 44. RDF Resource Description Framework メタデータを主語，述語，目的語の3つのリソースの 組によって表現する トリプル 主語 Subject 目的語 Object 述語 Predicate
- 45. SPARQL SPARQL Protocol and RDF Query Language • RDFを検索するクエリ言語 • SQLのRDF版と思えばOK SELECT * WHERE { ?s ?p ?o }
- 46. SPARQL Endpoint SPARQLを公開している元 • DBPedia • LODチャレンジ • SparqlEPCU • 気象庁防災情報XML • http://www.w3.org/wiki/SparqlEndpoints
- 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. 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 ももクロシングルチャート一覧
- 49. SPARQL × D3.js
- 50. Demo 完成イメージ http://jsfiddle.net/dsuket/W9sVC/ 先ほどの公共施設情報@SparqlEPCUを日本地図に マッピングしてみる ごめんなさい！解説はコードで！
- 52. 注意点 • 外部サイトのSPARQL API、地図データなどを読 み込む場合はWebサーバーが必要です。 適宜Apacheなど立ててください。 • JSFiddle でも結構使えます。