d3jsハンズオン @e2d3ハッカソン
Post on 14-Jul-2015
581 Views
Preview:
TRANSCRIPT
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/
目次•D3.jsとは •触ってみよう •グラフを書いてみる - データをDOMに追加 - SVGを用いての描画 - スケール - アニメーション - イベント - 軸
•おまけ
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とか
目次•D3.jsとは •触ってみよう •グラフを書いてみる - データをDOMに追加 - SVGを用いての描画 - スケール - アニメーション - イベント - 軸
•おまけ
データをDOMに追加
セレクタなどはjQueryと似ている
メソッドチェーンが特徴
データをDOMに追加d3.select('body')
body要素を追加
データをDOMに追加d3.select('body')
.selectAll('p')
div要素を追加 (まだない)
データをDOMに追加d3.select('body')
.selectAll('p')
.data(data)
.enter()
dataを追加※
データをDOMに追加d3.select('body')
.selectAll('p')
.data(data)
.enter()
.append('p')
dataの数だけ p要素を追加
データをDOMに追加d3.select('body')
.selectAll('p')
.data(data)
.enter()
.append('p')
.text(function (d) {return d.date})
p要素のテキストを データのdateに
目次•D3.jsとは •触ってみよう •グラフを書いてみる - データをDOMに追加 - SVGを用いての描画 - スケール - アニメーション - イベント - 軸
•おまけ
グラフを書いてみる
必要なもの
<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('fill', '#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') .attr('fill', '#f00') .attr("x", function (d, i) { return i * 10; }) .attr("width", 10) .attr("height", function (d) { return d[metrics]; });
dataをセット
描画// 描画 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(四角形)を挿入
描画// 描画 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]; });
赤く染める
描画// 描画 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]; });
要素の数に応じて間隔を空ける ※無名関数 (二個目の引数は要素の番号)
描画// 描画 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]; });
高さを指標の値に設定
あれれーおかしいぞ
目次•D3.jsとは •触ってみよう •グラフを書いてみる - データをDOMに追加 - SVGを用いての描画 - スケール - アニメーション - イベント - 軸
•おまけ
スケールが必要
温度の値[-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]の範囲に描画したい
高さを指標の値に設定
スケール
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]); });
高さを指標の値に設定
あれれーおかしいぞ
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とは •触ってみよう •グラフを書いてみる - データをDOMに追加 - SVGを用いての描画 - スケール - アニメーション - イベント - 軸
•おまけ
アニメーション
D3.jsの醍醐味のひとつ
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]); });
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) {
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]) })
Ease• linear • quad • cubic • sin • exp !などなど ここらへんを参考に http://bl.ocks.org/hunzy/9929724
目次•D3.jsとは •触ってみよう •グラフを書いてみる - データをDOMに追加 - SVGを用いての描画 - スケール - アニメーション - イベント - 軸
•おまけ
イベントを追加する// バーの描画 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('fill', 'orange') })
目次•D3.jsとは •触ってみよう •グラフを書いてみる - データをDOMに追加 - SVGを用いての描画 - スケール - アニメーション - イベント - 軸
•おまけ
軸
グラフでは軸が大事
軸を描画する領域を確保// サイズの定義 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を追加 drawArea = d3.select('body').append('svg') .attr('width', maxWidth) .attr('height', maxHeight) .attr('transform', 'translate(' + leftMargin + ',' + topMargin + ')')
yのスケールの設定
// yのスケールの設定 var yScale = d3.scale.linear() .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を追加 drawArea = d3.select('body').append('svg') .attr('width', width) .attr('height', height) .append('g')
いろいろやってみましょう
目次•D3.jsとは •触ってみよう •グラフを書いてみる - データをDOMに追加 - SVGを用いての描画 - スケール - アニメーション - イベント - 軸
•おまけ
おまけ: 散布図の作成
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) .delay(function(d, i) { 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) .delay(function(d, i) { return i * 20; }) .ease('bounce') .attr('r', function(d, i) { return zScale(d[zMetrics]) });
おまけ: バブルチャートの作成
いろいろやってみましょう
top related