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

『可視化』って？

6

一目見て何となく分かる

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/ ）

世界のサイトのトラフィックを可視化

概観

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

今、世の中で、

何が起こっているのか？

24

http://ssg2.up.d.seesaa.net/ssg2/image/arenasukazann.jpg?d=a1

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

https://github.com/mbostock/d3/wiki/Gallery



3-1．D3.js

D3.jsでは、描画用のレイアウトが充実している！

( https://github.com/mbostock/d3/wiki/Layouts )

Copyright © Acroquest Technology Co., Ltd. All rights reserved. 31

https://github.com/mbostock/d3/wiki/Layouts



3-1．D3.js

こんな図が簡単に描けます！

Copyright © Acroquest Technology Co., Ltd. All rights reserved. 32

http://mbostock.github.com/d3/ex/bubble.html

http://mbostock.github.com/d3/ex/cluster.html

3-2．適切な図の選び方

データの構造で分類する。

① 階層のみのデータ

② 階層＋量のデータ

③ 関係性データ

④ 単純な数値データ


33


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


34

Tree Cluster

http://mbostock.github.com/d3/ex/tree.html

http://mbostock.github.com/d3/ex/cluster.html


階層＋量のデータだったら…


35

Treemap Partition

Pack

http://mbostock.github.com/d3/ex/pack.html

3-2 ．適切な図の選び方

関係性データだったら…


36

Force Chord

Bundle

http://mbostock.github.com/d3/ex/chord.html

3-2 ．適切な図の選び方

単純な数値データだったら…


37

Pie

Stack

Pack

もしくは普通のグラフで

棒グラフや折れ線グラフなどで描く。

http://mbostock.github.com/d3/ex/bubble.html

http://mbostock.github.com/d3/ex/stream.html

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