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（可視化）の世界

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

Recommended

More Related Content

What's hot

What's hot(20)

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

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

More from AdvancedTechNight

More from AdvancedTechNight(19)

Recently uploaded

Recently uploaded(11)

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