Html5j data visualization_and_d3

データ可視化について

2014/04/18 HTML5とか勉強会 @muddydixon

! muddydixon " muddy.dixon # muddydixon !

Node.js Perl Visualization TimeSeries NeuralNetwork

私 is

アジェンダデータ可視化の目的データ可視化とはデータ可視化の理屈 Webでのデータ可視化のいいところ D3.jsとは

可視化の目的

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

Vitaly Friedman

$

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

$

可視化の目的

伝えてどうする？

可視化の目的

☓ 可視化のための可視化 ◯ 目的達成のための可視化

可視化の目的

☓「どう可視化するか？」 ◯「何を可視化するか？」 ◎「なんのために可視化するか？」

可視化の目的メトリクスの監視例) モニタリングツールトレンドの把握例) 株式チャート関係性の把握例) ソーシャルグラフ属性の分析例) 顧客属性の割合や売れ筋ジャンルの割合

可視化の目的事実を発掘できてこその可視化事実を活用できてこその可視化 !

改善行為の促進のための可視化 (ビジネス、政治、家計など)

目的を阻害する可視化

ダメな可視化効率的じゃない明確じゃない !

※ 「ウソを付く」「サンプルに問題がある」とかはちょっとおいておきます

明確じゃない

効率的じゃない

いろいろ

もっと欲しい人はこちらに

http://wtfviz.net/

データ可視化とは


Vitaly Friedman

$


$

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

% 効率的ではない可視化

!

上記は「可視化」ではありません

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

&' ( )

なぜ可視化するとよいか

53,434 28,397 41,334


53,434 28,397 41,334

(231.16) (168.51) (203.31)


53,434 28,397 41,334


53,434 28,397 41,334

49,346 93,853 23,579

80,132 86,103 35,203


(53,434)(28,397)(41,334)(49,346)(93,853)(23,579)(80,132)(86,103)(35,203)

なぜ可視化するとよいか値の大小　　 ▶ 高さの大小値の大小　　▶ 面積の大小上昇傾向　　▶ 右上がりの傾き下降傾向　　▶ 右下がりの傾き同じカテゴリ ▶ 同じ色関係性 ▶ 密集度


経験的・認知的な既存知識を効率的に利用した理解の促進

&' ( )


すぐ分かる is 正義

&' ( )

認知機能・経験をフルに使う# 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

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

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

可視化の理論

データセットと可視化# ガク片幅花弁幅 Species1 3.5 0.2 setosa2 3.0 0.2 setosa3 3.2 0.2 setosa4 3.1 0.2 setosa5 3.6 0.2 setosa51 3.2 1.4 versicolor52 3.2 1.5 versicolor53 3.1 1.5 versicolor54 2.3 1.3 versicolor55 2.8 1.5 versicolor101 3.3 2.5 virginica102 2.7 1.9 virginica103 3.0 2.1 virginica104 2.9 1.8 virginica105 3.0 2.2 virginica

可視化で意識する概念

データ

データ変数視覚変数

視覚記号

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

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

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

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

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

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

対応

対応

対応


データ

視覚記号


データ変数

Y視覚変数

X

色

可視化の概念(理屈上)# 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つの差を識別することが可能順序性：強さ(透明度、彩度)など視覚変数が異なる場合、順序の大小を識別することが可能

データ変数の尺度名義尺度：カテゴリ、名称など同じかそれ以外かの比較しかできない順序尺度：徒競走の順位、3択のアンケートなど同じかどうか・大小比較はできるが、加減などの演算はできない等差尺度：日付など差の比較はできるが、ゼロ点がなく比の意味が無い比例尺度：人数、回数、経過秒数などゼロ点があり、差の比較、比の比較が可能

視覚変数の特性

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

視覚変数の特性 (推奨)

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

カテゴリを示すなら一択

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

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

利点Webで共有し、多くの人にデータに含まれる事実を届けることができる税金はどこに行った？マウスやキーボードによるインタラクションが利用できるアニメーションが利用できる時間軸を実際の時間に割り当てることで、表現できるデータ変数を1つ増やすことができる

Webでの共有

http://spending.jp/

インタラクション

http://square.github.io/crossfilter/ http://www.cs.umd.edu /~bederson/papers/index.html

http://www.cs.umd.edu

アニメーション

https://www.youtube.com/watch?v=ezVk1ahRF78#t=4m23s

SVGについて

SVGとはScalable Vector Graphics 大きくしても綺麗 XML Document (DOM) Inspectorで見やすい

SVGで使えるタグsvg g defs, symbol, use path, line, rect, circle ellipse, polyline, polygon !

あとはフィルター周りがたくさんありますがほとんど使う機会はありません

SVGはこんな感じ <svg width="400" height="300">! <g transform="translate(50,50)">! <circle r="5" cx="128.571" cy="111.733" fill="blue"></circle>! <circle r="5" cx="21.428" cy="121.600" fill="red"></circle>! <circle r="5" cx="77.142" cy="138.4" fill="blue"></circle>! <circle r="5" cx="111.428" cy="135.2" fill="blue"></circle>! <circle r="5" cx="300" cy="0" fill="red"></circle>! <circle r="5" cx="0" cy="73.066" fill="red"></circle>! <circle r="5" cx="244.285" cy="192.266" fill="blue"></circle>! <circle r="5" cx="270" cy="200" fill="red"></circle>! <circle r="5" cx="51.428" cy="173.333" fill="red"></circle>! </g>! </svg>

SVGについてはこちらを

http://www.slideshare.net/kadoppe/inline-svghttp://www.slideshare.net/ssuser99dc16/svg-maniaxcss-nite-after-dark7-svgmatsuda

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 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を削除したり、透明度を上げたりを行う

作成するときのコツSVGは基本後に追加したものが上に表示される Layer(gタグ)を使って制御するとうまく書けます transform属性をうまく使うと楽です text周りは難しいです(kadoppeさんも言ってます)

まとめ


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

$

時間があったら

作ってみよう！

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

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

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

課題棒グラフ折線グラフ散布図インタラクションアニメーションジオマッピング

Html5j data visualization_and_d3

Engineering

Transcript of Html5j data visualization_and_d3