Advanced Tech Night No.07
D3.jsと学ぶ
Visualization(可視化)の世界
2013/08/30
Acroquest Technology 株式会社
白井 智子
自己紹介
 白井智子です。
 新人です。
 ビッグデータ向け監視システムの
開発をやってます。
 趣味:デザイン、写真、
音楽 (鑑賞・演奏)
 Facebook: Satoko Shiroi
 Twitter: @white_lu...
自己紹介
 出身校:筑波大学大学院
 可視化の研究をしていました!
 昨年、フランスの学会にも参加してきました!
Copyright © Acroquest Technology Co., Ltd. All rights reserved...
つまり。
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
4
せっかく
可視化の勉強を
していたので
話をさせてもらう
ことになりました!
今日のアジェンダ
1. 可視化の基礎
2. Information Visualization
3. D3.js
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
5
『可視化』って?
6
一目見て
何となく分かる
7
簡単に言えば、
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
8
百聞は
一見にしかず
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
9
1. 可視化の基礎
1-1. 2つの可視化
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
10
科学的可視化 情報可視化
利用者 専門家 あらゆる人
利用目的 科学的現象の解明 検索...
1-1. 2つの可視化
参考)科学的可視化の例
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
11
直径約40mの水槽とその
壁にあるセンサーで
ニュートリノを観...
1-2. 可視化の概念
可視化技術を作るときに最も重要とされる考え方
「データ分析のためのマントラ」
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
12
Over...
1-2. 可視化の概念
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
13
例)The Internet map(http://internet-map.net/...
1-2. 可視化の概念
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
14
詳細
政治経済学者
William Playfair (1759-1823)
200年以上前に最初のグラフを作る。
1-3. 可視化の歴史
Copyright © Acroquest Technology Co., Ltd. All rights r...
1-3. 可視化の歴史
現代のグラフの始祖
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
16
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
17
2. Information Visualization
2-1. 一般的なグラフ
基本的なグラフが整理される。
棒グラフ、線グラフ、円グラフ…
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
18
2-2. Information Visualization
色、形、大きさを人がどう感じるかが整理される。
※Jacques Bertin(1919~2010)
Copyright © Acroquest Technology Co., Lt...
2-3. 現代のInformation Visualization
CGの時代へ
⇒数値データだけでなく、構造や関連性も表現
できるようになる
Copyright © Acroquest Technology Co., Ltd. All rig...
2-3. 現代のInformation Visualization
3Dやアニメ―ションも可視化の手法に
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
21
Th...
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
22
と、ここまでが
一回目の流行期
でした(!?)
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
23
今、世の中で、
何が
起こっているのか?
24
2-4. 情報大爆発(ビッグデータ時代)
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
25
1. Webが発展し、データがグローバルに!
2. ストレージが巨大...
2-5. 可視化技術の普及&向上
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
26
表現力のUP!
ライブラリの充実!
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
27
可視化の
第二期流行時代へ
突入!
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
28
3. D3.js
3-1.D3.js
1. 複雑なデータ可視化も簡潔に記述できる
JavaScriptライブラリ
① データに基づいてHTMLドキュメントを操作する
⇒簡単にかっこいい可視化ができる!
Copyright © Acroquest Technolo...
3-1.D3.js
サンプルが充実している!
参考)D3 Gallery
( https://github.com/mbostock/d3/wiki/Gallery )
Copyright © Acroquest Technology Co.,...
3-1.D3.js
D3.jsでは、描画用のレイアウトが充実している!
( https://github.com/mbostock/d3/wiki/Layouts )
Copyright © Acroquest Technology Co., ...
3-1.D3.js
こんな図が簡単に描けます!
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
32
3-2.適切な図の選び方
データの構造で分類する。
① 階層のみのデータ
② 階層+量のデータ
③ 関係性データ
④ 単純な数値データ
Copyright © Acroquest Technology Co., Ltd. All rights ...
3-2.適切な図の選び方
階層のみのデータだったら…
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
34
Tree Cluster
3-2.適切な図の選び方
階層+量のデータだったら…
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
35
Treemap Partition
Pack
3-2 .適切な図の選び方
関係性データだったら…
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
36
Force Chord
Bundle
3-2 .適切な図の選び方
単純な数値データだったら…
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
37
Pie
Stack
Pack
もしくは普通のグラフで
...
3-3.D3.jsの使い方
1. 描画先の選択
2. データの準備
3. D3へのセット⇒座標計算
4. 座標を元に描画
Copyright © Acroquest Technology Co., Ltd. All rights reserve...
3-3.D3.jsの使い方
サンプルとして、新人の友好関係を可視化します。
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
39
3-3 .D3.jsの使い方
1. 描画先の選択
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
40
// 描画する場所を選択し、キャンバスを用意する
windo...
3-3 .D3.jsの使い方
2. データの準備
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
41
// データを準備する(ここでは配列)
var dataAr...
3-3 .D3.jsの使い方
3. D3へセット
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
42
// 色、レイアウトを選択
var color = ["#F...
3-3 .D3.jsの使い方
4. 座標を元に描画
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
43
//グループ
svg.selectAll("path.gr...
3-3 .D3.jsの使い方
4. 座標を元に描画
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
44
//相関
svg.selectAll("path.chor...
3-4.サンプルデモ
1. では動かしてみましょう!
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
45
まとめ
1. 可視化とは?
① データを分析し、知識獲得するための手法
2. 現在の可視化の流行について
① 情報大爆発の時代に入り、表現力が向上。
② さらに、可視化ライブラリも増加。
3. D3.jsの魅力について
① 一見難しそうな可視化...
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
47
ご清聴有難うございました。
Infrastructures Evolution
Upcoming SlideShare
Loading in...5
×

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

4,471

Published on

Published in: Technology, Education
0 Comments
15 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,471
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
32
Comments
0
Likes
15
Embeds 0
No embeds

No notes for slide

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
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×