More Related Content Similar to Gtug girls-20140828 Similar to Gtug girls-20140828 (20) Gtug girls-201408284. データ可視化とは
The main goal of data visualization is its ability
to visualize data, communicating information
clearly and effectivelty.
Vitaly Friedman
$
データ可視化の目的は、データを可視化し、
情報を明確かつ効率的に伝えることである
$
15. D3.jsとは D-D-D
# Sepal.Length 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
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
16. D3.jsとは D-D-D
# Sepal.Length 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
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
17. D3.jsとは D-D-D
# Sepal.Length 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
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
Data Driven
Documents
18. D3.jsとは SVG
SVG: Scalable Vector Graphics
!
!
!
!
!
HTML5で「inline SVG」が利用可能に!
htmlにsvg(xml)を埋め込んで利用可能!
http://www.slideshare.net/k
26. D3.jsの流れ 0. HTML
基本はこれでずっといきます
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>D3.js on GTUG Girls Tokyo</title>
<style>
.axis path, .axis line {
fill: none;
stroke: grey;
}
</style>
</head>
<body>
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/
d3.min.js"></script>
<script type="text/javascript" src="./src/main.js"></script>
</body>
</html>
27. D3.jsの流れ 0. Web
Web上げておくとAjaxとかも使えて便利です
python -m http.server 5000
python -m SimpleHTTPServer 5000
plackup -MPlack::App::Directory -e
'Plack::App::Directory->new(root => ".")->to_app'
ruby -run -e httpd -- --port=5000 .
ruby -rwebrick -e 'WEBrick::HTTPServer.new(:Port =>
5000, :DocumentRoot => ".").start'
http://blog.kamipo.net/entry/2013/02/20/122225
28. D3.jsの流れ 1. データ
データを作ります
こういうの作っておくと便利
// データ生成ユーティリティ
var dataGenerator = function(len, gen){
var array = [], i = 0;
for(i = 0; i < len; i++){
array.push(gen ? gen(i) : i);
}
return array;
};
// データ生成
var data = dataGenerator(100, function(i){
return {
id: i,
name: "name "+ i,
x: 0|Math.random() * width,
y: 0|Math.random() * height
};
});
29. D3.jsの流れ 2. SVG
土台(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+")"
});
初出
* (selection) d3.select
* (selection) selection.append
* (selection) selection.attr
30. D3.jsの流れ 3. データとDOMの紐付け
データの紐付け
var circle =
// 現状の取得
main.selectAll("g.circle")
// データのヒモ付
.data(data)
// データ > 現状(DOM)の部分を取得
.enter()
// "g"要素を追加し、classをセット
.append("g").attr({"class": "circle"});
初出
* (selection) selection.selectAll
* (selection) selection.data
* (selection) selection.enter
33. D3.jsの流れ 5. color
色を取得してみよう
var color = d3.scale.category20();
circle.append("circle").attr({
r: 10,
cx: function(d){ return d.x; },
cy: function(d){ return d.y; },
fill: function(d, i){ return color(i); }
});
初出
* (scale) d3.scale.category20
40. 棒グラフ
データ作成
// データ生成
var data = dataGenerator(10, function(i){
return {
id: i,
name: "name "+ i,
// height よりも大きい!
y: 0|Math.random() * 1000
};
});
42. 棒グラフ
スケール作成: 超重要!scaleを制すこと必須
var x = d3.scale.ordinal()
.domain(data.map(function(d){ return d.id; }))
.rangeBands([0, width], 0.2),
y = d3.scale.linear()
.domain([0, max])
.range([height, 0]); // [0, height]じゃない!
domain(入力) -> range(出力)の変換
quantitative / ordinalの2種類
quantitativeは「範囲->範囲」
ordinalは「ID->範囲」+ 範囲情報の提供
初出
* (scale) d3.scale.linear / d3.scale.ordinal
44. 棒グラフ
要素の描画の準備
var bar =
// 現状の取得
main.selectAll("g.bar")
// データのヒモ付
.data(data)
// データ > 現状(DOM)の部分を取得
.enter()
// "g"要素を追加し、classをセット
.append("g")
.attr({
"class": "bar",
transform: function(d){ // コツ: 位置合わせをやっておく
return “translate("+x(d.id)+","+height+")";
}
});
45. 棒グラフ
要素の描画の準備
var bar =
// 現状の取得
main.selectAll("g.bar")
// データのヒモ付
.data(data)
// データ > 現状(DOM)の部分を取得
.enter()
// "g"要素を追加し、classをセット
.append("g")
.attr({
"class": "bar",
transform: function(d){ // コツ: 位置合わせをやっておく
return “translate("+x(d.id)+","+height+")";
}
});
描画上の一番下に合わせる
height
48. 棒グラフ
軸の作成
var xaxis = main.append("g").call(d3.svg.axis().scale(x)).attr({
"class": "axis",
transform: "translate(0,"+height+")"
});
var yaxis = main.append(“g").call(d3.svg.axis().scale(y).orient("left"))
.attr({
"class": "axis"
});
初出
* (svg) d3.svg.axis
* (selection) selection.call
54. CIRCLE, RECT, LINE, ELLIPSE
circle要素
r属性: 半径を指定
cx/cy属性: 中心のx/y座標を指定
rect要素
width/height属性: 矩形の幅/高さを指定
x/y属性: 矩形の左上の位置を指定
rx/ry属性: 角丸の楕円半径を指定
line要素
x1/x2/y1/y2属性: 短点の座標を指定
ellipse要素
cx/cy属性: 楕円の中心位置の座標を指定
rx/ry属性: 楕円の半径を指定
58. データ作成
// データ生成
var data = dataGenerator(10, function(i){
var now = Date.now();
return {
id: i,
name: "name "+ i,
x: new Date(now + 60000 * i), // 一分おき
y: 0|Math.random() * 1000
};
});
折線グラフ
59. スケール作成
// スケールの生成
var x = d3.time.scale()
.domain(d3.extent(data, function(d){ return d.x; }))
.range([0, width]),
y = d3.scale.linear().domain([0, max]).range([height, 0]);
時間に特化したスケール
自動で時間の区間を調整してくれるため、axisに利用し
た時に便利(年、四半期、月、日、時、分、など柔軟!)
初出
* (scale) d3.time.scale
折線グラフ
60. 要素描画ユーティリティ
var line = d3.svg.line()
.x(function(d){ return x(d.x); })
.y(function(d){ return y(d.y); });
// PATHDATA=line([{x: X, y:Y},{}]) 配列を受けて、PathDataの文字列を返す
類似のsvgとしてarea, arc, diagonalな
どがある
初出
* (function) d3.svg.line
折線グラフ
61. 描画
var serie =
// 現状の取得
main.append("path")
// データのヒモ付
.datum(data)
.attr({
d: line,
fill: "none",
stroke: color(0)
});
初出
* (selection) selection.datum
path要素に対して、配列を紐付ける
折線グラフ
63. データの準備(オブジェクトの配列の配列)
// データ生成
var series = dataGenerator(3, function(i){
return {
name: "series " + i,
data: dataGenerator(10, function(j){
var now = Date.now();
return {
id: j,
name: "name "+ j,
x: new Date(now + 60000 * j), // 一分おき
y: 0|Math.random() * 1000
};
})
};
});
複数の折線グラフ
64. データの範囲を取得(2回 min/maxを使う)
var maxY = d3.max(series, function(serie){
return d3.max(serie.data, function(d){ return d.y;}); });
var minX = d3.min(series, function(serie){
return d3.min(serie.data, function(d){ return d.x;}); }),
maxX = d3.max(series, function(serie){
return d3.max(serie.data, function(d){ return d.x;}); });
複数の折線グラフ
65. 紐付けて描画
var serie =
// 現状の取得
main.selectAll("g.serie")
// データのヒモ付
.data(series)
.enter()
.append("g").attr({"class": "serie"});
!
serie.append("path").attr({
d: function(d){ return line(d.data); },
fill: "none",
stroke: function(d){ return color(d.name); }
});
複数の折線グラフ
67. One more thing
各ポイントにドットと数値を
var serie =
// 現状の取得
main.selectAll("g.serie")
// データのヒモ付
.data(series)
.enter()
.append("g").attr({
"class": "serie",
fill: function(d){ return color(d.name); }
});
子要素すべてのfillを指定
68. 紐付けて描画
var point = serie.selectAll("g.point")
.data(function(d){ return d.data;}).enter()
.append("g").attr({
"class": "point",
transform: function(d){
return "translate("+x(d.x)+","+y(d.y)+")"; }
});
point.append("circle").attr({r: 5});
point.append("text").text(function(d){ return d.y; }).attr({dy: -8});
One more thing
72. Animation
更新処理関数(前半)
var updateLine = function(){
// スケールのドメイン更新
x.domain(d3.extent(data, function(d){ return d.x; }));
var max = d3.max(data, function(d){ return d.y;});
y.domain([0, max]);
!
// 折線の変形アニメーション
serie.transition()
.attr({
d: line
});
!
これでアニメーションを利用できる!
73. Animation
更新処理関数(中盤)
// 新たにデータが増えたのでselection撮り直し
var point = main.selectAll("g.point").data(data);
// データ追加分の処理
var newpoint = point.enter().append(“g")
.attr({"class": "point", fill: color(0),
transform: function(d){
return "translate("+x(d.x)+","+y(d.y)+")"; }
});
newpoint.append("circle").attr({ r: 5 });
newpoint.append("text").text(function(d){return d.y;}).attr({dy:-8});
// 既存データのアニメーション
point.transition().attr({
transform: function(d){ return "translate("+x(d.x)+","+y(d.y)+")"; }
});
90. データ可視化のマントラ
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
$