Upcoming SlideShare
データ可視化勉強会
- 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
Login to see the comments