データ可視化の基礎 と

D3のデモデータ可視化勉強会 2014/03/02

http://www.zusaar.com/event/3927003 @muddydixon

ニフティ株式会社 森藤大地

! muddydixon " muddy.dixon # muddydixon !

Node.js Perl Visualization Statistics TimeSeries NeuralNetwork

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

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

可視化とは

データ可視化とはThe main goal of data visualization is its ability to visualize data, communicating information clearly and effectivelty.

Vitaly Friedman

$

データ可視化の目的は、データを可視化し、情報を明確かつ効率的に伝えることである

$

つまり% 情報を伝えそびれている可視化 % 明確ではない可視化

% 効率的ではない可視化

!

上記は「可視化」ではない

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

&' ( )

なぜ可視化するとよいか視覚的な表現=視覚記号(後述)のアナロジー 大きさ、位置、濃淡、色、傾きなどの、経験的・認知的な既存知識を効率的に利用した理解の促進 !

値の大小　　 ▶ 高さの大小 値の大小 　　▶ 面積の大小 上昇傾向 　　▶ 右上がりの傾き 下降傾向 　　▶ 右下がりの傾き 同じカテゴリ ▶ 同じ色

認知機能・経験をフルに使う# Sepal.Lengt Sepal.Widt Petal.Lengt Petal.Width Species1 5.1 3.5 1.4 0.2 setosa2 4.9 3.0 1.4 0.2 setosa3 4.7 3.2 1.3 0.2 setosa4 4.6 3.1 1.5 0.2 setosa5 5.0 3.6 1.4 0.2 setosa51 7.0 3.2 4.7 1.4 versicolor52 6.4 3.2 4.5 1.5 versicolor53 6.9 3.1 4.9 1.5 versicolor54 5.5 2.3 4.0 1.3 versicolor55 6.5 2.8 4.6 1.5 versicolor101 6.3 3.3 6.0 2.5 virginica102 5.8 2.7 5.1 1.9 virginica103 7.1 3.0 5.9 2.1 virginica104 6.3 2.9 5.6 1.8 virginica105 6.5 3.0 5.8 2.2 virginica

みんなだいすきiris

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

統計量で表現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

これなら なんとか

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

図形の経験・認知能力を利用• 分布の幅が広い • 中央値が上に偏っている • 大きく2つの峰がある

• 中央値が若干、上に偏り

• 峰が2つ・・・？

• 均等に分布 • 中央値がおおよそ中心

• 他の属性と比較して分布の幅が小さい

• 外れ値がちらほら

「認知」が「把握」を加速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

その他にも箱ひげ図の代わりに ヒストグラム

ヒストグラムを種別毎に 表現

重要なこと

データ可視化とは(再掲)The main goal of data visualization is its ability to visualize data, communicating information clearly and effectivelty.

Vitaly Friedman

$

データ可視化の目的は、データを可視化し、情報を明確かつ効率的に伝えることである

$

可視化の理論

データ可視化の書籍

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

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

データ可視化のプロセス

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

可視化で意識する概念

データ

データ変数 視覚変数

視覚記号

可視化データセット様々なフィールドの値からなる レコードを複数含むデータ群 変数抽出・代数処理・ 尺度化処・理統計処理が済んだもの

可視化対象とするフィールドを 含むデータ。ひとつひとつが意味を持った単位(例：SQLの行)

フィールドの値そのもの 数値(メジャー)やカテゴリ変数(ディメンジョン)。ひとつひとつが視覚変数に置換される

視覚表現ひとつひとつを指す 位置やサイズ、色、傾き、強度(透明度・彩度・明度)、テクスチャなど

視覚変数を集約させた記号 点や円、矩形、弧、立体など

データセットのデータに対応する 記号の集合による可視化

対応

対応

対応

可視化の概念(理屈上)# Sepal.Lengt

hSepal.Width Petal.Length 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

萼片長 花弁長 種別

5.1 1.4 setosa

萼片長 5.1 比例尺度

花弁長 1.4 比例尺度

種別 setosa 名義尺度

萼片長 比例尺度 位置1

花弁長 比例尺度 位置2

種別 名義尺度 色

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

7.0 4.7 versicolor

6.4 4.5 versicolor

6.9 4.9 versicolor

萼片長 花弁長 種別

100 27 赤

データセット

データセット(変数抽出)

データ

データ変数 視覚変数

視覚記号

可視化

対応

対応

対応

データ変数/視覚変数

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

データ変数/視覚変数

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

データ変数/視覚変数

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

データ変数の「値」と「面積」を対応付ける！！ 「半径」を対応付けてしまうと面積は自乗される！

視覚変数について

視覚変数の特性選択性：色、方向など 視覚変数が異なる場合、弁別が可能

関連性：色、形状など 視覚変数が異なる場合、同一グループの認識が可能

定量性：サイズ、位置など 視覚変数が異なる場合、2つの差を識別することが可能

順序性：強さ(透明度、彩度)など 視覚変数が異なる場合、順序の大小を識別することが可能

視覚変数の特性

これも掲載すればよかったと反省していますDesigning Data Visualizations (2011, O’REILLY)

視覚変数の特性 (推奨)

これも掲載すればよかったと反省していますDesigning Data Visualizations (2011, O’REILLY)

カテゴリを示すなら一択

カテゴリを示すなら一択テクスチャ系は図が煩雑になりやすい

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

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

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

D3.js

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

具体例 <!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>

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

具体例 (属性/スタイル操作) 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()などは引数に紐付けられたデータを取り、それに応じた処理を行う

具体例 (データに基づく追加) 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;! });

増えた！

具体例 (データに基づく追加)でも2つしか増えてない！ データの長さは(pdata.length=)5 なぜか？

既存のp 3

差分 2 ▶ これが増えた分！

データ 5

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を処理の対象にする

具体例 (データに基づく削除) var lessData = pdata.slice(0, 2);! paragraphs.data(lessData).exit().remove();

「.data().exit()」 .exit()によって、DOM-データを処理の対象にする

データ 2

差分 1 ▶ これが.remove()した分

既存のp 3

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

Data Driven Documents

Selection

紐付けたデータ既存のDOM

.exit()selection

.enter()

Selection (例えば)

紐付けたデータ既存のDOM

.exit()selection

.enter()

属性・スタイル・テキストの変更などを行う

新規にDOMを追加し、同時に属性・スタイル・テキストをセットする

既存のDOMを削除したり、透明度を上げたりを行う

作ってみよう！

萼片長を高さとする棒グラフ

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

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>

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){!

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();

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]; });!

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);

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); }! });!

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');

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)"! });

まとめ

データ可視化とはThe main goal of data visualization is its ability to visualize data, communicating information clearly and effectivelty.

Vitaly Friedman

$

データ可視化の目的は、データを可視化し、情報を明確かつ効率的に伝えることである

$

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

データ可視化のマントラ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

$