d3jsハンズオン @e2d3ハッカソン

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

Upload: keisuke-osone

Post on 14-Jul-2015

580 views

Category:

Engineering


3 download

TRANSCRIPT

Page 1: d3jsハンズオン @E2D3ハッカソン

D3.jsハンズオン@E2D3 ハッカソン

!!

E2D3 大曽根 圭輔

Page 2: d3jsハンズオン @E2D3ハッカソン

about:me•大曽根圭輔博士(工学) 茨城県出身

•現在の仕事ゲームのデータ分析

•趣味 たくさん- やる: バンド、スポーツ (フットサル、ランニング)- 観る: スポーツ、ライブ

Page 3: d3jsハンズオン @E2D3ハッカソン

ハンズオンの想定する対象

•JavaScriptを触ったことがある •D3.jsは触ったことがない

Page 4: d3jsハンズオン @E2D3ハッカソン

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

•おまけ

Page 5: d3jsハンズオン @E2D3ハッカソン

D3.jsとは

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

•Mike Bostock作

Page 6: d3jsハンズオン @E2D3ハッカソン

http://d3js.org/

http://d3js.org/

Page 7: d3jsハンズオン @E2D3ハッカソン

D3.jsとは

•D3はグラフを書くライブラリでない- HighChartsなどとは異なる

•データをビジュアルをつないでくれる

Page 8: d3jsハンズオン @E2D3ハッカソン

参考URL

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

Page 9: d3jsハンズオン @E2D3ハッカソン

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

•おまけ

Page 10: d3jsハンズオン @E2D3ハッカソン

触ってみよう!

<script src="http://d3js.org/d3.v3.min.js">

</script>

Page 11: d3jsハンズオン @E2D3ハッカソン

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>

Page 12: d3jsハンズオン @E2D3ハッカソン

触ってみよう!

今回使うのは、茨城県笠間市(私の出身地)の気象データ(sample_data.csv)

元データ: http://www.jma.go.jp/

Page 13: d3jsハンズオン @E2D3ハッカソン

触ってみよう!

d3.csv('./sample_data.csv', function(data) {

console.log(data);

});※サーバを立てるなりして対応して下さい python -m SimpleHTTPServer 8888

とかXAMPとかMAMPとか

Page 14: d3jsハンズオン @E2D3ハッカソン

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

•おまけ

Page 15: d3jsハンズオン @E2D3ハッカソン

データをDOMに追加

セレクタなどはjQueryと似ている

メソッドチェーンが特徴

Page 16: d3jsハンズオン @E2D3ハッカソン

データをDOMに追加d3.select('body')

body要素を追加

Page 17: d3jsハンズオン @E2D3ハッカソン

データをDOMに追加d3.select('body')

.selectAll('p')

div要素を追加 (まだない)

Page 18: d3jsハンズオン @E2D3ハッカソン

データをDOMに追加d3.select('body')

.selectAll('p')

.data(data)

.enter()

dataを追加※

Page 19: d3jsハンズオン @E2D3ハッカソン

データをDOMに追加d3.select('body')

.selectAll('p')

.data(data)

.enter()

.append('p')

dataの数だけ p要素を追加

Page 20: d3jsハンズオン @E2D3ハッカソン

データをDOMに追加d3.select('body')

.selectAll('p')

.data(data)

.enter()

.append('p')

.text(function (d) {return d.date})

p要素のテキストを データのdateに

Page 21: d3jsハンズオン @E2D3ハッカソン

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

•おまけ

Page 22: d3jsハンズオン @E2D3ハッカソン

グラフを書いてみる

必要なもの

<svg>、<g>など

Page 23: d3jsハンズオン @E2D3ハッカソン

SVGとは

ベクターグラフィック

Page 24: d3jsハンズオン @E2D3ハッカソン

要素の作成//表示するデータ 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')

Page 25: d3jsハンズオン @E2D3ハッカソン

描画// 描画 drawArea .selectAll(‘rect') .data(data) .enter() .append('rect') .attr('fill', '#f00') .attr("x", function (d, i) { return i * 10; }) .attr("width", 10) .attr("height", function (d) { return d[metrics]; });

rect要素を選択 ※まだない

Page 26: d3jsハンズオン @E2D3ハッカソン

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

dataをセット

Page 27: d3jsハンズオン @E2D3ハッカソン

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

rect(四角形)を挿入

Page 28: d3jsハンズオン @E2D3ハッカソン

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

赤く染める

Page 29: d3jsハンズオン @E2D3ハッカソン

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

要素の数に応じて間隔を空ける ※無名関数 (二個目の引数は要素の番号)

Page 30: d3jsハンズオン @E2D3ハッカソン

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

高さを指標の値に設定

Page 31: d3jsハンズオン @E2D3ハッカソン

あれれーおかしいぞ

Page 32: d3jsハンズオン @E2D3ハッカソン

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

•おまけ

Page 33: d3jsハンズオン @E2D3ハッカソン

スケールが必要

温度の値[-0.3度, 12.7度]を

svgの[0px, 300px]の範囲に描画したい

Page 34: d3jsハンズオン @E2D3ハッカソン

// 最大値の取得 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]の範囲に描画したい

高さを指標の値に設定

Page 35: d3jsハンズオン @E2D3ハッカソン

スケール

var yScale = d3.scale.linear() .domain([-0.3, 12.7]) // 温度の値[-0.3度, 12.7度]を .range([300, 0]); // svgの[0px, 300px]の範囲に描画したい !   省略 .attr("height", function (d) { return yScale(d[metrics]); });

高さを指標の値に設定

Page 36: d3jsハンズオン @E2D3ハッカソン

あれれーおかしいぞ

Page 37: d3jsハンズオン @E2D3ハッカソン

SVGの座標系

y座標は上から下(上が0)、

x座標は左から右(左が0)

Page 38: d3jsハンズオン @E2D3ハッカソン

修正

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

Page 39: d3jsハンズオン @E2D3ハッカソン

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

•おまけ

Page 40: d3jsハンズオン @E2D3ハッカソン

アニメーション

D3.jsの醍醐味のひとつ

Page 41: d3jsハンズオン @E2D3ハッカソン

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

Page 42: d3jsハンズオン @E2D3ハッカソン

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

Page 43: d3jsハンズオン @E2D3ハッカソン

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

Page 44: d3jsハンズオン @E2D3ハッカソン

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

Page 45: d3jsハンズオン @E2D3ハッカソン

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

•おまけ

Page 46: d3jsハンズオン @E2D3ハッカソン

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

Page 47: d3jsハンズオン @E2D3ハッカソン

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

Page 48: d3jsハンズオン @E2D3ハッカソン

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

•おまけ

Page 49: d3jsハンズオン @E2D3ハッカソン

グラフでは軸が大事

Page 50: d3jsハンズオン @E2D3ハッカソン

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

Page 51: d3jsハンズオン @E2D3ハッカソン

軸を描画する領域を確保

// svgを追加 drawArea = d3.select('body').append('svg') .attr('width', maxWidth) .attr('height', maxHeight) .attr('transform', 'translate(' + leftMargin + ',' + topMargin + ')')

Page 52: d3jsハンズオン @E2D3ハッカソン

yのスケールの設定

// yのスケールの設定 var yScale = d3.scale.linear() .domain([yMin, yMax]) .range([height, 0]);

Page 53: d3jsハンズオン @E2D3ハッカソン

軸の設定

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

Page 54: d3jsハンズオン @E2D3ハッカソン

軸の設定

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

Page 55: d3jsハンズオン @E2D3ハッカソン
Page 56: d3jsハンズオン @E2D3ハッカソン

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

Page 57: d3jsハンズオン @E2D3ハッカソン
Page 58: d3jsハンズオン @E2D3ハッカソン

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

Page 59: d3jsハンズオン @E2D3ハッカソン

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

•おまけ

Page 60: d3jsハンズオン @E2D3ハッカソン

おまけ: 散布図の作成

var xMetrics = 'sunshine_duration'; var yMetrics = 'wind_speed';

Page 61: d3jsハンズオン @E2D3ハッカソン

おまけ: 散布図の作成

// 最大値の取得 var xMax = d3.max(data, function (d) { return parseInt(d[xMetrics], 10) + 1}); // 最小値の取得 var xMin = d3.min(data, function (d) { return d[xMetrics]});

Page 62: d3jsハンズオン @E2D3ハッカソン

おまけ: 散布図の作成

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

Page 63: d3jsハンズオン @E2D3ハッカソン

おまけ: 散布図の作成 .attr('r', 0) .attr('cx', function (d) { return xScale(d[xMetrics]); }) .attr('cy', function (d) { return yScale(d[yMetrics]) }) .transition() .duration(1000) .delay(function(d, i) { return i * 20; }) .ease('bounce') .attr('r', 10);

Page 64: d3jsハンズオン @E2D3ハッカソン
Page 65: d3jsハンズオン @E2D3ハッカソン

おまけ: バブルチャートの作成

var xMetrics = 'sunshine_duration'; var yMetrics = ‘wind_speed'; var zMetrics = ‘temperature';

Page 66: d3jsハンズオン @E2D3ハッカソン

// 最大値の取得 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]);

おまけ: バブルチャートの作成

Page 67: d3jsハンズオン @E2D3ハッカソン

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

おまけ: バブルチャートの作成

Page 68: d3jsハンズオン @E2D3ハッカソン

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

おまけ: バブルチャートの作成

Page 69: d3jsハンズオン @E2D3ハッカソン
Page 70: d3jsハンズオン @E2D3ハッカソン

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