D3.jsと学ぶVisualization（可視化）の世界

Advanced Tech Night No.07
D3.jsと学ぶ
Visualization（可視化）の世界
2013/08/30
Acroquest Technology 株式会社
白井智子

自己紹介
 白井智子です。
 新人です。
 ビッグデータ向け監視システムの
開発をやってます。
 趣味：デザイン、写真、
音楽 (鑑賞・演奏)
 Facebook: Satoko Shiroi
 Twitter: @white_luc
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
2

自己紹介
 出身校：筑波大学大学院
 可視化の研究をしていました！
 昨年、フランスの学会にも参加してきました！
3
学生の時に作った可視化ツール
音楽データの
可視化
時間情報を持つ
データの可視化

つまり。
4
せっかく
可視化の勉強を
していたので
話をさせてもらう
ことになりました！

今日のアジェンダ
1. 可視化の基礎
2. Information Visualization
3. D3.js
5

一目見て
何となく分かる
7
簡単に言えば、

8
百聞は
一見にしかず

9
1. 可視化の基礎

1-1. 2つの可視化
10
科学的可視化情報可視化
利用者専門家あらゆる人
利用目的科学的現象の解明検索・関連の発見
対象データ物理的データ・測定結果・シミュ
レーション結果
関係などの抽象的データ
(ex. プログラム・Web・ファイ
ル構造)
その他インタラクションが重要
参考：xight.org 情報視覚化
http://iv.xight.org/
こっちをやります。

1-1. 2つの可視化
参考）科学的可視化の例
11
直径約40mの水槽とその
壁にあるセンサーで
ニュートリノを観測、
可視化
スーパーカミオカンデ

1-2. 可視化の概念
可視化技術を作るときに最も重要とされる考え方
「データ分析のためのマントラ」
12
Over view first, zoom and filter,
then details-on-demand
① まずは、概観を見る。
② 徐々にズームして、フィルタリングしながらデ
ータを分析し、
③ そのあとは、必要に応じて詳細な分析をする。
※米国メリーランド州立大学の教授 Ben Shneidermanによる提唱

13
例）The Internet map（http://internet-map.net/ ）
世界のサイトのトラフィックを可視化
概観

14
詳細

政治経済学者
William Playfair (1759-1823)
200年以上前に最初のグラフを作る。
1-3. 可視化の歴史
15

1-3. 可視化の歴史
現代のグラフの始祖
16

17
2. Information Visualization

2-1. 一般的なグラフ
基本的なグラフが整理される。
棒グラフ、線グラフ、円グラフ…
18

2-2. Information Visualization
色、形、大きさを人がどう感じるかが整理される。
※Jacques Bertin(1919～2010)
19

2-3. 現代のInformation Visualization
CGの時代へ
⇒数値データだけでなく、構造や関連性も表現
できるようになる
20
ツリーマップパラレルコーディネート

2-3. 現代のInformation Visualization
3Dやアニメ―ションも可視化の手法に
21
The cone tree is a 3d conical representation of a hierarchy.
[Copyright © by the Association for Computing Machinery, Inc.]

22
と、ここまでが
一回目の流行期
でした（!?）

23
今、世の中で、
何が
起こっているのか？

2-4. 情報大爆発（ビッグデータ時代）
25
1. Webが発展し、データがグローバルに！
2. ストレージが巨大化
⇒ビッグデータが流行！
3. 可視化システムが研究レベルから
企業／一般レベルに！
4. 「可視化」の技術がビジネスとして
注目されるようになってきた！

2-5. 可視化技術の普及＆向上
26
表現力のUP！
ライブラリの充実！

27
可視化の
第二期流行時代へ
突入！

28
3. D3.js

3-1．D3.js
1. 複雑なデータ可視化も簡潔に記述できる
JavaScriptライブラリ
① データに基づいてHTMLドキュメントを操作する
⇒簡単にかっこいい可視化ができる！
29

3-1．D3.js
サンプルが充実している！
参考）D3 Gallery
（ https://github.com/mbostock/d3/wiki/Gallery ）
30

3-1．D3.js
D3.jsでは、描画用のレイアウトが充実している！
( https://github.com/mbostock/d3/wiki/Layouts )
31

3-1．D3.js
こんな図が簡単に描けます！
32

3-2．適切な図の選び方
データの構造で分類する。
① 階層のみのデータ
② 階層＋量のデータ
③ 関係性データ
④ 単純な数値データ
33

階層のみのデータだったら…
34
Tree Cluster

階層＋量のデータだったら…
35
Treemap Partition
Pack

3-2 ．適切な図の選び方
関係性データだったら…
36
Force Chord
Bundle

3-2 ．適切な図の選び方
単純な数値データだったら…
37
Pie
Stack
Pack
もしくは普通のグラフで
棒グラフや折れ線グラフな
どで描く。

3-3．D3.jsの使い方
1. 描画先の選択
2. データの準備
3. D3へのセット⇒座標計算
4. 座標を元に描画
38

3-3．D3.jsの使い方
サンプルとして、新人の友好関係を可視化します。
39

3-3 ．D3.jsの使い方
1. 描画先の選択
40
// 描画する場所を選択し、キャンバスを用意する
window.addEventListener("load", function(){
var svg = d3.select("#layout12")
.append("svg")
.attr("viewBox", "-100,-100,200,200");

2. データの準備
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]
];

3. D3へセット
42
// 色、レイアウトを選択
var color = ["#FF0022", "#FF5500", "#0022FF",
"#00FF40", "#E1E100", "#00FFC6", "#8080FF"];
var chord = d3.layout.chord()
.padding(0.1)
.matrix(dataArr);

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
//相関
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);

3-4．サンプルデモ
1. では動かしてみましょう！
45

まとめ
1. 可視化とは？
① データを分析し、知識獲得するための手法
2. 現在の可視化の流行について
① 情報大爆発の時代に入り、表現力が向上。
② さらに、可視化ライブラリも増加。
3. D3.jsの魅力について
① 一見難しそうな可視化も、気軽に作成することがで
きる。
46

47
ご清聴有難うございました。
Infrastructures Evolution

D3.jsと学ぶVisualization（可視化）の世界

More Related Content

What's hot

Similar to D3.jsと学ぶVisualization（可視化）の世界

More from AdvancedTechNight

D3.jsと学ぶVisualization（可視化）の世界