d3jsハンズオン @E2D3ハッカソン

D3.jsハンズオン
@E2D3 ハッカソン
!
!
E2D3 大曽根圭輔

about:me
•大曽根圭輔 
博士(工学) 茨城県出身
•現在の仕事 
ゲームのデータ分析
•趣味たくさん 
- やる: バンド、スポーツ (フットサル、ランニング) 
- 観る: スポーツ、ライブ

ハンズオンの想定する対象
•JavaScriptを触ったことがある
•D3.jsは触ったことがない

目次
•D3.jsとは
•触ってみよう
•グラフを書いてみる
- データをDOMに追加
- SVGを用いての描画
- スケール
- アニメーション
- イベント
- 軸
•おまけ

D3.jsとは
•Data Driven Documentの略
•D3.js はデータに基づいてドキュメン
トを操作するための JavaScript ライ
ブラリ
•Mike Bostock作

http://d3js.org/
http://d3js.org/

D3.jsとは
•D3はグラフを書くライブラリでない 
- HighChartsなどとは異なる
•データをビジュアルをつないでくれる

参考URL
•サンプルコードはこちらから 
https://github.com/keisuke-
osone/d3js_hands_on/

触ってみよう!
<script src="http://d3js.org/d3.v3.min.js">
</script>

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>D3.js ハンズオン¦E2D3 Hackathon</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<script src="d3_sample.js" charset="utf-8"></script>
</body>
</html>

触ってみよう!
今回使うのは、茨城県笠間市(私の出身地)の気象データ 
(sample_data.csv) 
元データ: http://www.jma.go.jp/

触ってみよう!
d3.csv('./sample_data.csv', function(data) {
console.log(data);
});
※サーバを立てるなりして対応して下さい
python -m SimpleHTTPServer 8888
とかXAMPとかMAMPとか

データをDOMに追加
セレクタなどはjQueryと似ている
メソッドチェーンが特徴

d3.select('body')
body要素を追加

d3.select('body')
.selectAll('p')
div要素を追加

(まだない)

d3.select('body')
.selectAll('p')
.data(data)
.enter()
dataを追加※

d3.select('body')
.selectAll('p')
.data(data)
.enter()
.append('p')
dataの数だけ

p要素を追加

d3.select('body')
.selectAll('p')
.data(data)
.enter()
.append('p')
.text(function (d) {return d.date})
p要素のテキストを

データのdateに

グラフを書いてみる
必要なもの
<svg>、<g>など

SVGとは
ベクターグラフィック

要素の作成
//表示するデータ
var metrics = sunshine_duration';
// サイズの定義
var width = 600;
var height = 400;
// svgを追加
drawArea = d3.select('body').append('svg')
.attr('width', width)
.attr('height', height)
.append('g')

描画
// 描画
drawArea
.selectAll( rect')
.data(data)
.enter()
.append('rect')
.attr('ﬁll', '#f00')
.attr("x", function (d, i) {
return i * 10;
})
.attr("width", 10)
.attr("height", function (d) {
return d[metrics];
});
rect要素を選択

※まだない

描画
// 描画
drawArea
.selectAll('rect')
.data(data)
.enter()
.append('rect')
return i * 10;
})
.attr("width", 10)
return d[metrics];
});
dataをセット

描画
// 描画
drawArea
.selectAll('rect')
.data(data)
.enter()
.append('rect')
return i * 10;
})
.attr("width", 10)
return d[metrics];
});
rect(四角形)を挿入

描画
// 描画
drawArea
.selectAll('rect')
.data(data)
.enter()
.append('rect')
return i * 10;
})
.attr("width", 10)
return d[metrics];
});
赤く染める

描画
// 描画
drawArea
.selectAll('rect')
.data(data)
.enter()
.append('rect')
return i * 10;
})
.attr("width", 10)
return d[metrics];
});
要素の数に応じて間隔を空ける

※無名関数

(二個目の引数は要素の番号)

描画
// 描画
drawArea
.selectAll('rect')
.data(data)
.enter()
.append('rect')
return i * 10;
})
.attr("width", 10)
return d[metrics];
});
高さを指標の値に設定

スケールが必要
温度の値[-0.3度, 12.7度]を
svgの[0px, 300px]の範囲に描画したい

// 最大値の取得
var yMax = d3.max(data, function (d) {
return parseInt(d[metrics], 10) + 1;
})
// 最小値の取得
var yMin = d3.min(data, function (d) {
return parseInt(d[metrics], 10);
})
!
var yScale = d3.scale.linear()
.domain([yMin, yMax]) // 温度の値[最小, 最大]を
.range([300, 0]); // svgの[0px, 300px]の範囲に描画したい

スケール
.domain([-0.3, 12.7]) // 温度の値[-0.3度, 12.7度]を
.range([300, 0]); // svgの[0px, 300px]の範囲に描画したい
!
省略
return yScale(d[metrics]);
});

SVGの座標系
y座標は上から下(上が0)、
x座標は左から右(左が0)

修正
// 描画
.attr("width", 10)
.attr('y', function (d) {
return yScale(d[metrics])
})
.attr('height', function (d) {
return height - yScale(d[metrics]);
});

アニメーション
D3.jsの醍醐味のひとつ

Transition
// 描画
.attr('y', height)
.attr('x', function (d, i) {
return i * 15;
})
.transition()
.duration(1000)
})
return height - yScale(d[metrics]);
});

Delay
// 描画
.attr('y', height)
return i * 15;
})
.transition()
.duration(1000)
.delay(function(d, i) {
return i * 20;
})
})

Ease
// 描画
.attr('y', height)
return i * 15;
})
.transition()
.duration(1000)
return i * 20;
})
.ease('bounce')
})

Ease
• linear
• quad
• cubic
• sin
• exp
!
などなど
ここらへんを参考に
http://bl.ocks.org/hunzy/9929724

イベントを追加する
// バーの描画
drawArea
.selectAll('rect')
.data(data)
.enter()
.append('rect')
.on('click', function (d) {
alert(metrics + d[metrics])
})

イベントを追加する
// バーの描画
drawArea
.selectAll('rect')
.data(data)
.enter()
.append('rect')
.on('mouseover', function (d) {
d3.select(this)
.attr('ﬁll', 'orange')
})

軸
グラフでは軸が大事

軸を描画する領域を確保
var maxHeight = 400;
var maxWidth = 600;
var leftMargin = 50;
var topMargin = 50;
var bottomMargin = 50;
// 描画領域のサイズを設定
var height = maxHeight - topMargin - bottomMargin
var width = maxWidth - leftMargin

軸を描画する領域を確保
// svgを追加
.attr('width', maxWidth)
.attr('height', maxHeight)
.attr('transform',
'translate(' + leftMargin + ',' + topMargin + ')')

yのスケールの設定
// yのスケールの設定
.domain([yMin, yMax])
.range([height, 0]);

軸の設定
// yの軸の設定
var yAxis = d3.svg.axis()
.scale(yScale)
.orient('left');

軸の設定
// y軸をsvgに表示
drawArea
.append('g')
.attr('class', 'y axis')
.call(yAxis)

要素の作成
//表示するデータ
var metrics = wind_speed';
var width = 600;
var height = 400;
// svgを追加
.attr('width', width)
.attr('height', height)
.append('g')

いろいろやってみましょう

おまけ: 散布図の作成
var xMetrics = 'sunshine_duration';
var yMetrics = 'wind_speed';

var xMax = d3.max(data, function (d) {
return parseInt(d[xMetrics], 10) + 1});
var xMin = d3.min(data, function (d) { return d[xMetrics]});

// 散布図の描画
drawArea
.selectAll('circle')
.data(data)
.enter()
.append('circle')

.attr('r', 0)
.attr('cx', function (d) {
return xScale(d[xMetrics]);
})
.attr('cy', function (d) {
return yScale(d[yMetrics])
})
.transition()
.duration(1000)
return i * 20;
})
.ease('bounce')
.attr('r', 10);

おまけ: バブルチャートの作成
var xMetrics = 'sunshine_duration';
var yMetrics = wind_speed';
var zMetrics = temperature';

var zMax = d3.max(data, function (d) {
return parseInt(d[zMetrics], 10) + 1});
var zMin = d3.min(data, function (d) { return d[zMetrics]});
!
// yのスケールの設定
var zScale = d3.scale.linear()
.domain([zMin, zMax])
.range([0, r]);

// 散布図の描画
drawArea
.selectAll('circle')
.data(data)
.enter()
.append('circle')

.attr('cy', function (d) {
return yScale(d[yMetrics])
})
.transition()
.duration(1000)
return i * 20;
})
.ease('bounce')
.attr('r', function(d, i) {
return zScale(d[zMetrics])
});

d3jsハンズオン @E2D3ハッカソン

More Related Content

Viewers also liked

Similar to d3jsハンズオン @E2D3ハッカソン

More from 圭輔 大曽根

d3jsハンズオン @E2D3ハッカソン

More from 圭輔大曽根