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と学ぶVisualization(可視化)の世界

8,362 views

Published on

Published in: Technology, Education

D3.jsと学ぶVisualization(可視化)の世界

  1. 1. Advanced Tech Night No.07 D3.jsと学ぶ Visualization(可視化)の世界 2013/08/30 Acroquest Technology 株式会社 白井 智子
  2. 2. 自己紹介  白井智子です。  新人です。  ビッグデータ向け監視システムの 開発をやってます。  趣味:デザイン、写真、 音楽 (鑑賞・演奏)  Facebook: Satoko Shiroi  Twitter: @white_luc Copyright © Acroquest Technology Co., Ltd. All rights reserved. 2
  3. 3. 自己紹介  出身校:筑波大学大学院  可視化の研究をしていました!  昨年、フランスの学会にも参加してきました! Copyright © Acroquest Technology Co., Ltd. All rights reserved. 3 学生の時に作った可視化ツール 音楽データの 可視化 時間情報を持つ データの可視化
  4. 4. つまり。 Copyright © Acroquest Technology Co., Ltd. All rights reserved. 4 せっかく 可視化の勉強を していたので 話をさせてもらう ことになりました!
  5. 5. 今日のアジェンダ 1. 可視化の基礎 2. Information Visualization 3. D3.js Copyright © Acroquest Technology Co., Ltd. All rights reserved. 5
  6. 6. 『可視化』って? 6
  7. 7. 一目見て 何となく分かる 7 簡単に言えば、
  8. 8. Copyright © Acroquest Technology Co., Ltd. All rights reserved. 8 百聞は 一見にしかず
  9. 9. Copyright © Acroquest Technology Co., Ltd. All rights reserved. 9 1. 可視化の基礎
  10. 10. 1-1. 2つの可視化 Copyright © Acroquest Technology Co., Ltd. All rights reserved. 10 科学的可視化 情報可視化 利用者 専門家 あらゆる人 利用目的 科学的現象の解明 検索・関連の発見 対象データ 物理的データ・測定結果・シミュ レーション結果 関係などの抽象的データ (ex. プログラム・Web・ファイ ル構造) その他 インタラクションが重要 参考:xight.org 情報視覚化 http://iv.xight.org/ こっちをやります。
  11. 11. 1-1. 2つの可視化 参考)科学的可視化の例 Copyright © Acroquest Technology Co., Ltd. All rights reserved. 11 直径約40mの水槽とその 壁にあるセンサーで ニュートリノを観測、 可視化 スーパーカミオカンデ
  12. 12. 1-2. 可視化の概念 可視化技術を作るときに最も重要とされる考え方 「データ分析のためのマントラ」 Copyright © Acroquest Technology Co., Ltd. All rights reserved. 12 Over view first, zoom and filter, then details-on-demand ① まずは、概観を見る。 ② 徐々にズームして、フィルタリングしながらデ ータを分析し、 ③ そのあとは、必要に応じて詳細な分析をする。 ※米国メリーランド州立大学の教授 Ben Shneidermanによる提唱
  13. 13. 1-2. 可視化の概念 Copyright © Acroquest Technology Co., Ltd. All rights reserved. 13 例)The Internet map(http://internet-map.net/ ) 世界のサイトのトラフィックを可視化 概観
  14. 14. 1-2. 可視化の概念 Copyright © Acroquest Technology Co., Ltd. All rights reserved. 14 詳細
  15. 15. 政治経済学者 William Playfair (1759-1823) 200年以上前に最初のグラフを作る。 1-3. 可視化の歴史 Copyright © Acroquest Technology Co., Ltd. All rights reserved. 15
  16. 16. 1-3. 可視化の歴史 現代のグラフの始祖 Copyright © Acroquest Technology Co., Ltd. All rights reserved. 16
  17. 17. Copyright © Acroquest Technology Co., Ltd. All rights reserved. 17 2. Information Visualization
  18. 18. 2-1. 一般的なグラフ 基本的なグラフが整理される。 棒グラフ、線グラフ、円グラフ… Copyright © Acroquest Technology Co., Ltd. All rights reserved. 18
  19. 19. 2-2. Information Visualization 色、形、大きさを人がどう感じるかが整理される。 ※Jacques Bertin(1919~2010) Copyright © Acroquest Technology Co., Ltd. All rights reserved. 19
  20. 20. 2-3. 現代のInformation Visualization CGの時代へ ⇒数値データだけでなく、構造や関連性も表現 できるようになる Copyright © Acroquest Technology Co., Ltd. All rights reserved. 20 ツリーマップ パラレルコーディネート
  21. 21. 2-3. 現代のInformation Visualization 3Dやアニメ―ションも可視化の手法に Copyright © Acroquest Technology Co., Ltd. All rights reserved. 21 The cone tree is a 3d conical representation of a hierarchy. [Copyright © by the Association for Computing Machinery, Inc.]
  22. 22. Copyright © Acroquest Technology Co., Ltd. All rights reserved. 22 と、ここまでが 一回目の流行期 でした(!?)
  23. 23. Copyright © Acroquest Technology Co., Ltd. All rights reserved. 23 今、世の中で、 何が 起こっているのか?
  24. 24. 24
  25. 25. 2-4. 情報大爆発(ビッグデータ時代) Copyright © Acroquest Technology Co., Ltd. All rights reserved. 25 1. Webが発展し、データがグローバルに! 2. ストレージが巨大化 ⇒ビッグデータが流行! 3. 可視化システムが研究レベルから 企業/一般レベルに! 4. 「可視化」の技術がビジネスとして 注目されるようになってきた!
  26. 26. 2-5. 可視化技術の普及&向上 Copyright © Acroquest Technology Co., Ltd. All rights reserved. 26 表現力のUP! ライブラリの充実!
  27. 27. Copyright © Acroquest Technology Co., Ltd. All rights reserved. 27 可視化の 第二期流行時代へ 突入!
  28. 28. Copyright © Acroquest Technology Co., Ltd. All rights reserved. 28 3. D3.js
  29. 29. 3-1.D3.js 1. 複雑なデータ可視化も簡潔に記述できる JavaScriptライブラリ ① データに基づいてHTMLドキュメントを操作する ⇒簡単にかっこいい可視化ができる! Copyright © Acroquest Technology Co., Ltd. All rights reserved. 29
  30. 30. 3-1.D3.js サンプルが充実している! 参考)D3 Gallery ( https://github.com/mbostock/d3/wiki/Gallery ) Copyright © Acroquest Technology Co., Ltd. All rights reserved. 30
  31. 31. 3-1.D3.js D3.jsでは、描画用のレイアウトが充実している! ( https://github.com/mbostock/d3/wiki/Layouts ) Copyright © Acroquest Technology Co., Ltd. All rights reserved. 31
  32. 32. 3-1.D3.js こんな図が簡単に描けます! Copyright © Acroquest Technology Co., Ltd. All rights reserved. 32
  33. 33. 3-2.適切な図の選び方 データの構造で分類する。 ① 階層のみのデータ ② 階層+量のデータ ③ 関係性データ ④ 単純な数値データ Copyright © Acroquest Technology Co., Ltd. All rights reserved. 33
  34. 34. 3-2.適切な図の選び方 階層のみのデータだったら… Copyright © Acroquest Technology Co., Ltd. All rights reserved. 34 Tree Cluster
  35. 35. 3-2.適切な図の選び方 階層+量のデータだったら… Copyright © Acroquest Technology Co., Ltd. All rights reserved. 35 Treemap Partition Pack
  36. 36. 3-2 .適切な図の選び方 関係性データだったら… Copyright © Acroquest Technology Co., Ltd. All rights reserved. 36 Force Chord Bundle
  37. 37. 3-2 .適切な図の選び方 単純な数値データだったら… Copyright © Acroquest Technology Co., Ltd. All rights reserved. 37 Pie Stack Pack もしくは普通のグラフで 棒グラフや折れ線グラフな どで描く。
  38. 38. 3-3.D3.jsの使い方 1. 描画先の選択 2. データの準備 3. D3へのセット⇒座標計算 4. 座標を元に描画 Copyright © Acroquest Technology Co., Ltd. All rights reserved. 38
  39. 39. 3-3.D3.jsの使い方 サンプルとして、新人の友好関係を可視化します。 Copyright © Acroquest Technology Co., Ltd. All rights reserved. 39
  40. 40. 3-3 .D3.jsの使い方 1. 描画先の選択 Copyright © Acroquest Technology Co., Ltd. All rights reserved. 40 // 描画する場所を選択し、キャンバスを用意する window.addEventListener("load", function(){ var svg = d3.select("#layout12") .append("svg") .attr("viewBox", "-100,-100,200,200");
  41. 41. 3-3 .D3.jsの使い方 2. データの準備 Copyright © Acroquest Technology Co., Ltd. All rights reserved. 41 // データを準備する(ここでは配列) var dataArr = [ [ 2, 6, 7, 5, 5, 4, 4], [ 9, 3, 9, 6, 5, 4, 6], [ 10, 4, 0, 6, 10, 6, 8], [ 4, 4, 6, 10, 5, 5, 3], [ 4, 5, 6, 3, 10, 7, 6], [ 5, 5, 5, 2, 7, 9, 4], [ 9, 8, 10, 8, 9, 8, 8] ];
  42. 42. 3-3 .D3.jsの使い方 3. D3へセット Copyright © Acroquest Technology Co., Ltd. All rights reserved. 42 // 色、レイアウトを選択 var color = ["#FF0022", "#FF5500", "#0022FF", "#00FF40", "#E1E100", "#00FFC6", "#8080FF"]; var chord = d3.layout.chord() .padding(0.1) .matrix(dataArr);
  43. 43. 3-3 .D3.jsの使い方 4. 座標を元に描画 Copyright © Acroquest Technology Co., Ltd. All rights reserved. 43 //グループ svg.selectAll("path.groups") .data(chord.groups) .enter().append("path") .style("fill", function(d) { return color[d.index]; }) .style("stroke", function(d) { return color[d.index]; }) .attr("d", d3.svg.arc().innerRadius(90) .outerRadius(100));
  44. 44. 3-3 .D3.jsの使い方 4. 座標を元に描画 Copyright © Acroquest Technology Co., Ltd. All rights reserved. 44 //相関 svg.selectAll("path.chord") .data(chord.chords) .enter().append("path") .style("fill", function(d) { return color[d.source.index]; }) .attr("d", d3.svg.chord().radius(90)) .style("opacity", 0.5);
  45. 45. 3-4.サンプルデモ 1. では動かしてみましょう! Copyright © Acroquest Technology Co., Ltd. All rights reserved. 45
  46. 46. まとめ 1. 可視化とは? ① データを分析し、知識獲得するための手法 2. 現在の可視化の流行について ① 情報大爆発の時代に入り、表現力が向上。 ② さらに、可視化ライブラリも増加。 3. D3.jsの魅力について ① 一見難しそうな可視化も、気軽に作成することがで きる。 Copyright © Acroquest Technology Co., Ltd. All rights reserved. 46
  47. 47. Copyright © Acroquest Technology Co., Ltd. All rights reserved. 47 ご清聴有難うございました。 Infrastructures Evolution

×