1.
データ可視化の基礎
と
D3のデモ
データ可視化勉強会 2014/03/02
http://www.zusaar.com/event/3927003
@muddydixon
ニフティ株式会社 森藤大地

2.
! muddydixon
" muddy.dixon
# muddydixon
!
Node.js
Perl
Visualization
Statistics
TimeSeries
NeuralNetwork

3.
今日話すこと
データ可視化とは(10分)
データ可視化の理屈(10分)
Webでのデータ可視化のいいところ(5分)
D3.jsとは(20分)
質疑応答(10分)

4.
今日はなさないこと
あんちべさんがブログで書いたFAQ
統計の話
辛かった話

5.
可視化とは

6.
データ可視化とは
$
The main goal of data visualization is its ability
to visualize data, communicating information
clearly and effectivelty.
$
データ可視化の目的は、データを可視化し、
情報を明確かつ効率的に伝えることである
Vitaly Friedman

7.
つまり
% 情報を伝えそびれている可視化
% 明確ではない可視化
% 効率的ではない可視化
!
上記は「可視化」ではない

8.
可視化の定義
情報が視覚的な表現に置き換えられている
情報が明確に伝えられている
情報が効率的に伝えられている
&
'
(
)

9.
なぜ可視化するとよいか
視覚的な表現=視覚記号(後述)のアナロジー
大きさ、位置、濃淡、色、傾きなどの、経験的・
認知的な既存知識を効率的に利用した理解の促進
!
値の大小 ▶
値の大小 ▶
上昇傾向 ▶
下降傾向 ▶
同じカテゴリ ▶
高さの大小
面積の大小
右上がりの傾き
右下がりの傾き
同じ色

10.
認知機能・経験をフルに使う
#
Sepal.Lengt Sepal.Widt Petal.Lengt Petal.Width
Species
1
5.1
3.5
1.4
0.2
setosa
2
4.9
3.0
1.4
0.2
setosa
3
4.7
3.2
1.3
0.2
setosa
4
4.6
3.1
1.5
0.2
setosa
5
5.0
3.6
1.4
0.2
setosa
51
7.0
3.2
4.7
1.4
versicolor
52
6.4
3.2
4.5
1.5
versicolor
53
6.9
3.1
4.9
1.5
versicolor
54
5.5
2.3
4.0
1.3
versicolor
55
6.5
2.8
4.6
1.5
versicolor
101
6.3
3.3
6.0
2.5
virginica
102
5.8
2.7
5.1
1.9
virginica
103
7.1
3.0
5.9
2.1
virginica
104
6.3
2.9
5.6
1.8
virginica
105
6.5
3.0
5.8
2.2
virginica
みんなだいすきiris

11.
これみても
わかるわけでは
ないですよね？

12.
統計量で表現
Sepal
Length
Sepal
Width
Petal
Length
Petal
Width
Min
4.3
2.0
1.0
0.1
1st
Qu.
5.1
2.8
1.6
0.3
Median
5.8
3.0
4.35
1.3
Mean
5.843
3.057
3.758
1.199
3rd
Qu.
6.4
3.3
5.1
1.8
Max
7.9
4.4
6.9
2.5

13.
これなら
なんとか

14.
図形の経験・認知能力を利用

15.
図形の経験・認知能力を利用
•
•
•
•
均等に分布
中央値がおおよ
そ中心
他の属性と比較して分布
の幅が小さい
外れ値がちらほら
•
分布の幅が広い
中央値が上に偏っている
•
大きく2つの峰がある
•
•
•
中央値が若干、上
に偏り
峰が2つ・・・？

16.
「認知」が「把握」を加速
Sepal
Length
Sepal
Width
Petal
Length
Petal
Width
Min
4.3
2.0
1.0
0.1
1st
Qu.
5.1
2.8
1.6
0.3
Median
5.8
3.0
4.35
1.3
Mean
5.843
3.057
3.758
1.199
3rd
Qu.
6.4
3.3
5.1
1.8
Max
7.9
4.4
6.9
2.5

17.
その他にも
箱ひげ図の代わりに
ヒストグラム
ヒストグラムを種別毎に
表現

18.
重要なこと

19.
データ可視化とは(再掲)
$
The main goal of data visualization is its ability
to visualize data, communicating information
clearly and effectivelty.
$
データ可視化の目的は、データを可視化し、
情報を明確かつ効率的に伝えることである
Vitaly Friedman

20.
可視化の理論

21.
データ可視化の書籍

22.
他にもたくさん
ありますが
読めていません

23.
Grammar of Graphics
SYSTATの開発者
ggplot2の開発に
も大きな影響を与
えた書籍
doryokujin先生も
読んでる

24.
データ可視化のプロセス
1.
2.
3.
4.
5.
6.
7.
8.
9.
データセット
変数化
代数処理
尺度化処理
統計処理
幾何処理
座標系処理
装飾処理
可視化

25.
可視化で意識する概念
データセット
対応
データセットのデータに対応する
記号の集合による可視化
様々なフィールドの値からなる
レコードを複数含むデータ群
変数抽出・代数処理・
尺度化処・理統計処理が済んだもの
データ
対応
可視化対象とするフィールドを
含むデータ。ひとつひとつが意味を
持った単位(例：SQLの行)
データ変数
フィールドの値そのもの
数値(メジャー)やカテゴリ変数(ディ
メンジョン)。ひとつひとつが視覚変
数に置換される
可視化
視覚記号
視覚変数を集約させた記号
点や円、矩形、弧、立体など
対応
視覚変数
視覚表現ひとつひとつを指す
位置やサイズ、色、傾き、強度(透明
度・彩度・明度)、テクスチャなど

26.
可視化の概念(理屈上)
#
Sepal.Width
Petal.Length
Petal.Width
Species
1
Sepal.Lengt
h
5.1
3.5
1.4
0.2
setosa
2
4.9
3.0
1.4
0.2
setosa
3
4.7
3.2
1.3
0.2
setosa
4
4.6
3.1
1.5
0.2
setosa
5
5.0
3.6
1.4
0.2
setosa
51
7.0
3.2
4.7
1.4
versicolor
52
6.4
3.2
4.5
1.5
versicolor
53
6.9
3.1
4.9
1.5
versicolor
データセット
Sepal.Length
Petal.Length
Species
5.1
1.4
setosa
4.9
1.4
setosa
4.7
1.3
setosa
4.6
1.5
setosa
5.0
1.4
setosa
versicolor
7.0
4.7
6.4
4.5
6.9
4.9
対応
versicolor
データセット
(変数抽出)
versicolor
萼片長
花弁長
種別
5.1
1.4
可視化
setosa
データ
萼片長
5.1
1.4
比例尺度
種別
setosa
名義尺度
データ変数
花弁長
種別
27
赤
視覚記号
比例尺度
花弁長
萼片長
100
対応
萼片長
対応
比例尺度
位置1
花弁長
比例尺度
位置2
種別
名義尺度
色
視覚変数

27.
データ変数/視覚変数
萼片幅：x座標、花弁幅：y座標、種別：色
と3つのデータ変数：視覚変数を対応

28.
データ変数/視覚変数
散布図だと4つくらいの変数は表現可能
※ ただし、setosaの透明度が高く視認性が低いので・・・

29.
データ変数/視覚変数
データ変数の「値」と「面
積」を対応付ける！！
「半径」を対応付けてしま
うと面積は自乗される！
散布図だと4つくらいの変数は表現可能
※ ただし、setosaの透明度が高く視認性が低いので・・・

30.
視覚変数について

31.
視覚変数の特性
選択性：色、方向など
視覚変数が異なる場合、弁別が可
能
関連性：色、形状など
視覚変数が異なる場合、同一グルー
プの認識が可能
定量性：サイズ、位置など
視覚変数が異なる場合、2つの差
を識別することが可能
順序性：強さ(透明度、彩度)など
視覚変数が異なる場合、順序の大
小を識別することが可能

32.
視覚変数の特性
Designing Data Visualizations (2011, O REILLY)
これも掲載すればよかったと反省しています

33.
視覚変数の特性 (推奨)
カテゴリを示すなら一択
テクスチャ系は図が煩雑に
カテゴリを示すなら一択
なりやすい
Designing Data Visualizations (2011, O REILLY)
これも掲載すればよかったと反省しています

34.
可視化の種類 / 選定
これはdoryokujinさんのスライドの方が素
晴らしいので後述

35.
Webでの可視化のいいところ

36.
利点
Webで共有し、多くの人にデータに含まれ
る事実を届けることができる
マウスやキーボードによるインタラクション
が利用できる
アニメーションが利用できる

37.
D3.js

38.
D3.jsとは
URL (http://d3js.org/)
Data-Driven-Documents
data に基づいて html/svg document object の
処理を行う、というコンセプト
SVG操作 + 数値処理 + 可視化ユーティリティ
の総合JavaScriptライブラリ
SVG:selector/attr/style
数値処理:scale/nest/array/math
可視化ユーティリティ: scale/axis/layout

39.
具体例
!
!
<!doctype html>!
<html lang="ja">!
<head>!
<meta charset="utf8">!
<title>d3 introduction</title>!
<style>!
.axis line, .axis path { fill: none; stroke: grey; }!
</style>!
</head>!
<body>!
<div>!
<p>0th paragraph</p>!
<p>1st paragraph</p>!
<p>2nd paragraph</p>!
</div>!
<script type="text/javascript" charset="utf8" src="../components/d3/d3.min.js"></script>!
<script type="text/javascript" charset="utf8" src="./introduction.js"></script>!
</body>!
</html>

40.
具体例 (属性/スタイル操作)
var paragraphs = d3.select('body').selectAll('p');!
paragraphs.style({background: 'cyan'});

41.
具体例 (属性/スタイル操作)
var paragraphs = d3.select('body').selectAll('p');!
var pdata = [!
{text: "modified: 0th paragraph"},!
{text: "modified: 1th paragraph"},!
{text: "modified: 2th paragraph"}!
];!
paragraphs.data(pdata).text(function(d){ return
d.text; });
.data()でデータを紐付ける(ひとつのpに対して、ひとつの
データ)
.attr()/.text()/.style()などは引数に紐付けられたデータを
取り、それに応じた処理を行う

42.
具体例 (データに基づく追加)
var pdata = d3.range(0, 5)!
.map(function(id){!
return {!
id: id,!
text: id + "th paragraph"!
};!
});!
!
paragraphs.data(pdata).enter()!
.append('p')!
.text(function(d){!
return d.text;!
});
増えた！

43.
具体例 (データに基づく追加)
でも2つしか増えてない！
データの長さは(pdata.length=)5
なぜか？
データ 5
既存のp
3
差分 2 ▶ これが増えた分！

44.
具体例 (データに基づく追加)
var pdata = d3.range(0, 5)!
.map(function(id){!
return {!
id: id,!
text: id + "th paragraph"!
};!
});!
!
paragraphs.data(pdata).enter()!
.append('p')!
.text(function(d){!
return d.text;!
});
.enter()によって、データ-DOMを処理の対象にする

45.
具体例 (データに基づく削除)
var lessData = pdata.slice(0, 2);!
paragraphs.data(lessData).exit().remove();
「.data().exit()」
.exit()によって、DOM-データを処理の対象にする
既存のp 3
データ
2
差分 1 ▶ これが.remove()した分

46.
Selection
.select()/.selectAll()で取得したDOM
や.append()によって追加したDOMを
selectionといいます
.data()によりデータを紐付けることができ
ます
.attr()/.style()/.text()などでは紐付けられ
たデータを利用してDOMを処理することが
できます

47.
Data
Driven
Documents

48.
Selection
既存のDOM
紐付けたデータ
.exit()
.enter()
selection

49.
Selection (例えば)
既存のDOM
紐付けたデータ
.exit()
既存のDOMを削除し
たり、透明度を上げた
りを行う
.enter()
selection
属性・スタイル・テキ
ストの変更などを行う
新規にDOMを追加
し、同時に属性・スタ
イル・テキストをセッ
トする

50.
作ってみよう！
萼片長を高さとする棒グラフ

51.
用意するもの
コード: https://gist.github.com/
muddydixon/9295829
Webサーバ:
http://blog.kamipo.net/entry/
2013/02/20/122225
好きなサーバを立ち上げてください

52.
html
<!doctype html>!
<html lang="ja">!
<head>!
<meta charset="utf8">!
<title>d3 scatter plog</title>!
<style>!
.axis line, .axis path { fill: none; stroke: grey; }!
</style>!
</head>!
<body>!
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>!
<script type="text/javascript" charset="utf8" src="./iris.js"></script>!
</body>!
</html>

53.
JavaScript データの読み込み
var WIDTH = 500, HEIGHT = 500, margin = 50;!
var width = WIDTH - 2 * margin, height = HEIGHT - 2 * margin;!
var key = 'Sepal.Length';!
!
// iris.csv ファイルを読み込む!
d3.csv(!
"./iris.csv",!
// 行の型を修正!
function(d){!
for(var attr in d){!
if(! isNaN(Number(d[attr]))){!
d[attr] = +d[attr];!
}!
return d;!
}!
},!
// データを取得!
function(err, data){!

54.
JavaScript SVG要素の作成
// データを取得!
!
function(err, data){!
// svg要素を追加!
var svg = d3.select('body').append('svg').attr({!
width: WIDTH,!
height: HEIGHT!
});!
// マージンを確保して、軸などを表示できるようにする!
!
var main = svg.append('g').attr({!
width: width,!
height: height,!
transform: "translate("+margin+","+margin+")"!
});!
// 色の尺度!
var color = d3.scale.category10();

55.
JavaScript データの整形と整理
// データを入れ子にする!
var speciesData = d3.nest()!
// 種類ごとに分類するキーを指定!
.key(function(d){ return d.Species;})!
// 出力をキーにマッチした配列から、平均値に変更!
.rollup(function(values){!
return d3.mean(values, function(d){ return d[key]; });!
})!
// 値を配列で取得!
!
.entries(data);!
// 種類のキー一覧を取得!
!
var species = speciesData.map(function(d){ return d.key; });!
// 全体の高さの範囲を取得!
var domain = d3.extent(data, function(d){ return d[key]; });!

56.
JavaScript 尺度作成
// y座標の尺度を取得!
var yScale = d3.scale.linear()!
// 変換後の範囲(値域)!
.range([0, height])!
// 変換前の範囲(定義域)!
!
.domain([0, domain[1]]);!
// x座標の尺度を取得!
var xScale = d3.scale.ordinal()!
// 変換後の範囲(値域)!
.rangeBands([0, width], .2)!
// 変換前の範囲(定義域)!
.domain(species);

57.
JavaScript 棒を描画
// 棒(のグループ)要素を作成!
!
var bar = main.selectAll('g')!
.data(speciesData)!
.enter()!
.append('g')!
.attr({!
transform: function(d){!
return "translate("+xScale(d.key)+","+height+")";!
}!
});!
// 棒を描画!
bar.append('rect').attr({!
// 矩形の高さ!
height: function(d){ return yScale(d.values); },!
// 矩形の位置!
y: function(d){ return -yScale(d.values); },!
// 矩形の幅!
width: xScale.rangeBand(),!
// 矩形の色!
fill: function(d){ return color(d.key); }!
});!

58.
JavaScript 棒に値を描画
// 棒(のグループ)要素を作成!
!
var bar = main.selectAll('g')!
.data(speciesData)!
.enter()!
.append('g')!
.attr({!
transform: function(d){!
return "translate("+xScale(d.key)+","+height+")";!
}!
});!
// 棒を描画 (前述)!
// 値を描画!
bar.append('text')!
// テキストは分類した時のキー!
.text(function(d){!
return d.values.toFixed(2);!
})!
.attr({!
// 位置を棒の上に!
dy: function(d){ return - yScale(d.values); },!
dx: xScale.rangeBand() / 2,!
fill: 'black'!
}).style('text-anchor', 'middle');

59.
JavaScript 軸の描画
// x軸生成のユーティリティ!
var xAxisSvg = d3.svg.axis().scale(xScale);!
// y軸生成のユーティリティ!
var yAxisSvg = d3.svg.axis().scale(yScale.copy()!
.range([height, 0])).orient('left');!
// x軸を生成!
var xAxis = main.append('g').call(xAxisSvg).attr('class', 'axis')!
.attr("transform", "translate(0,"+height+")");!
// y軸を生成!
!
var yAxis = main.append('g').call(yAxisSvg).attr('class', 'axis');!
// y軸のラベルを記述!
main.append('text').text(key).attr({!
transform: "translate(-30,"+(height / 2)+") rotate(-90)"!
});

60.
まとめ

61.
データ可視化とは
$
The main goal of data visualization is its ability
to visualize data, communicating information
clearly and effectivelty.
$
データ可視化の目的は、データを可視化し、
情報を明確かつ効率的に伝えることである
Vitaly Friedman

62.
可視化が果たすべき役割
視覚表現という「経験的」「認知的」に理解
をサポートする表現に変換するのが可視化
データを記号に、データセットを可視化に変
換する
「よく使われる可視化」はそれだけで理解が
進む可視化
理解が阻まれたら、それはすでに可視化じゃ
ない！

63.
データ可視化のマントラ
$
Overview First, Zoom and Filter,
Then Details-on-Demand
Overview First, Zoom and Filter,
Then Details-on-Demand
Overview First, Zoom and Filter,
Then Details-on-Demand
Ben Shneiderman