More Related Content More from Daichi Morifuji More from Daichi Morifuji (15) 5. データ可視化とは
The main goal of data visualization is its ability
to visualize data, communicating information
clearly and effectivelty.
Vitaly Friedman
$
データ可視化の目的は、データを可視化し、
情報を明確かつ効率的に伝えることである
$
23. データ可視化とは
The main goal of data visualization is its ability
to visualize data, communicating information
clearly and effectivelty.
Vitaly Friedman
!
データ可視化の目的は、データを可視化し、
情報を明確かつ効率的に伝えることである
!
35. 認知機能・経験をフルに使う
# 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
44. データセットと可視化
# ガク片幅 花弁幅 Species
1 3.5 0.2 setosa
2 3.0 0.2 setosa
3 3.2 0.2 setosa
4 3.1 0.2 setosa
5 3.6 0.2 setosa
51 3.2 1.4 versicolor
52 3.2 1.5 versicolor
53 3.1 1.5 versicolor
54 2.3 1.3 versicolor
55 2.8 1.5 versicolor
101 3.3 2.5 virginica
102 2.7 1.9 virginica
103 3.0 2.1 virginica
104 2.9 1.8 virginica
105 3.0 2.2 virginica
46. データセットと可視化
# ガク片幅 花弁幅 Species
1 3.5 0.2 setosa
2 3.0 0.2 setosa
3 3.2 0.2 setosa
4 3.1 0.2 setosa
5 3.6 0.2 setosa
51 3.2 1.4 versicolor
52 3.2 1.5 versicolor
53 3.1 1.5 versicolor
54 2.3 1.3 versicolor
55 2.8 1.5 versicolor
101 3.3 2.5 virginica
102 2.7 1.9 virginica
103 3.0 2.1 virginica
104 2.9 1.8 virginica
105 3.0 2.2 virginica
データ
視覚記号
47. データセットと可視化
# ガク片幅 花弁幅 Species
1 3.5 0.2 setosa
2 3.0 0.2 setosa
3 3.2 0.2 setosa
4 3.1 0.2 setosa
5 3.6 0.2 setosa
51 3.2 1.4 versicolor
52 3.2 1.5 versicolor
53 3.1 1.5 versicolor
54 2.3 1.3 versicolor
55 2.8 1.5 versicolor
101 3.3 2.5 virginica
102 2.7 1.9 virginica
103 3.0 2.1 virginica
104 2.9 1.8 virginica
105 3.0 2.2 virginica
データ変数
Y
視覚変数
X
色
48. 可視化の概念(理屈上)
# Sepal.Lengt
h
Sepal.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 赤
データセット
データセット
(変数抽出)
データ
データ変数 視覚変数
視覚記号
可視化
対応
対応
対応
64. 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>
68. 具体例
<!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>
70. 具体例 (属性/スタイル操作)
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()などは引数に紐付けられたデータを
取り、それに応じた処理を行う
71. 具体例 (データに基づく追加)
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;!
});
増えた！
73. 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を処理の対象にする
74. 具体例 (データに基づく削除)
var lessData = pdata.slice(0, 2);!
paragraphs.data(lessData).exit().remove();
「.data().exit()」
.exit()によって、DOM-データを処理の対象にする
データ
2
差分 1 ▶ これが.remove()した分
既存のp 3
81. <svg width="500" height="500">!
<g width="480" height="480" transform="translate(10,10)">!
<g class="background-layer">!
<g class="ruler">!
<line width="2" stroke="grey" fill="none" x1="0" x2="480" y1="0" y2="0"></line>!
<line width="2" stroke="grey" fill="none" x1="0" x2="480" y1="48" y2="48"></line>!
<line width="2" stroke="grey" fill="none" x1="0" x2="480" y1="96" y2="96"></line>!
<line width="2" stroke="grey" fill="none" x1="0" x2="480" y1="144" y2="144"></line>!
<line width="2" stroke="grey" fill="none" x1="0" x2="480" y1="192" y2="192"></line>!
<line width="2" stroke="grey" fill="none" x1="0" x2="480" y1="240" y2="240"></line>!
<line width="2" stroke="grey" fill="none" x1="0" x2="480" y1="288" y2="288"></line>!
<line width="2" stroke="grey" fill="none" x1="0" x2="480" y1="336" y2="336"></line>!
<line width="2" stroke="grey" fill="none" x1="0" x2="480" y1="384" y2="384"></line>!
<line width="2" stroke="grey" fill="none" x1="0" x2="480" y1="432" y2="432"></line>!
</g>!
</g>!
<g class="chart-layer">!
<g><rect x="10" width="100" height="22" y="458" fill="#1f77b4"></rect></g>!
<g><rect x="170" width="100" height="209" y="271" fill="#ff7f0e"></rect></g>!
<g><rect x="330" width="100" height="478" y="2" fill="#2ca02c"></rect></g>!
</g>!
<g class="info-layer"></g>!
</g>!
</svg>
83. データ可視化とは
The main goal of data visualization is its ability
to visualize data, communicating information
clearly and effectivelty.
Vitaly Friedman
!
データ可視化の目的は、データを可視化し、
情報を明確かつ効率的に伝えることである
!
87. データ可視化のマントラ
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
!
91. 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>
92. 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){!
93. 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();
94. 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]; });!
95. 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);
96. 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); }!
});!
97. 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');
98. 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)"!
});
