AngularJSとD3.jsによるインタラクティブデータビジュアライゼーション

2014/08/23 AngularJS勉強会#2 GDG神戸
AngularJSとD3.jsによる
インタラクティブデータビジュアライゼーション
おのうえ@_likr

自己紹介
✤ おのうえ (@_likr)!
✤ 博士課程の大学院生!
✤ 可視化や最適化を使った意思決定支援に興味あり

Webと可視化
✤ Canvas、SVG、WebGLといったAPI、 
D3.js、Three.jsといったライブラリによって 
Web上での可視化基盤が整えられた
http://threejs.org/http://d3js.org/

AngularJSでやってること

本セッションの内容
✤ D3.jsによるグラフィックスにAngularJSで 
アプリとしての肉付けをしてみる!
✤ 実例を通じて、AngularJSアプリへの 
非AngularJSライブラリの組み込み、 
アプリのモジュール化方法を紹介

目次
1. D3.js超入門!
2. D3.jsとAngularJSを組み合わせる!
3. モジュール分割!
4. まとめ

D3.js
✤ http://d3js.org/!
✤ 可視化ツールを作るためのライブラリ！!
✤ (主に)SVGでグラフィックスを描く!
✤ DOM操作や便利なユーティリティ、 
レイアウトアルゴリズムなどから構成

select, selectAll
selector(CSS3に準拠)で指定された要素を一つ(先頭)選択!
var selection = d3.select(selector);
!
selectorで指定された要素を全て選択!
var selection = d3.selectAll(selector);
<div>
<div></div>
<p class=“small”></p>
<span class=“small”></span>
<div id=“contents”></div>
</div>
d3.select(‘div’)
d3.select(‘div div’)
d3.select(‘div p’)
d3.select(‘p’)
d3.selectAll(‘div’)
d3.selectAll(‘div div’)
d3.selectAll(‘.small’)
d3.selectAll(‘#contents’)
d3.selectAll(‘p.small’)

✤ マークアップで記述するグラフィックス!
✤ 解像度に依存しない(拡大してもギザギザしない)
SVG
<svg width="500" height="500">
<rect x="100" y="100" width="100" height="100" fill="red"/>
<circle cx="350" cy="150" r="50" fill="yellow" stroke="blue"/>
<line x1="100" y1="300" x2="200" y2="400" stroke-width="5" stroke="green"/>
<text x="350" y="350" text-anchor="middle">AngularJS</text>
</svg>

attr, style, classed
<rect/>
<circle/>
</svg>
d3.select('svg>rect')
.attr('width', 200)
.attr('height', 200)
.attr('x', 50)
.attr('y', 50)
.style('fill', 'red')
.style('stroke', 'black')
.style('stroke-width', '5')
.classed('semitransparent', true);
!
d3.select('svg>circle')
.attr({
cx: 150,
cy: 150,
r: 100
})
.style({
fill: 'blue',
stroke: 'black'
});
<rect class=“semitransparent"
style="fill: red; stroke: black; stroke-width: 5;
y="50" x="50" height="200" width=“200"/>
<circle style="fill: blue; stroke: black;”
r="100" cy="150" cx=“150"/>
</svg>
✤ 属性、スタイル、クラスを設定する!
selection.attr(name, value)
selection.style(name, value)
selection.classed(name, value)

append
d3.select('svg')
.append('circle')
.attr({
cx: 150,
cy: 150,
r: 100
})
.style({
fill: 'blue',
stroke: 'red',
opcaity: 0.5
});
<svg width="300" height="300"></svg>
<svg width="300" height=“300">
<circle
style="fill: blue; stroke: red;”
r="100" cy="150" cx=“150”/>
</svg>
✤ 子要素を追加する!
selection.append(tagName)

data, datum
var data = [
{x: 50, y: 50, color: 'red'},
{x: 150, y: 150, color: 'green'},
{x: 250, y: 250, color: 'blue'}
];
!
d3.selectAll('circle')
.data(data)
.attr({
cx: function(d) {
return d.x;
},
cy: function(d) {
return d.y;
},
r: 30
})
.style('fill', function(d) {
return d.color;
});
✤ 要素にデータを結びつける!
selection.datum(value)
selection.data(values)
!
✤ 属性に結びつけられたデータを反映!
selection.attr(name, f)
<circle/>
<circle/>
<circle/>
</svg>
<circle style="fill: red;”
r="30" cy="50" cx="50"></circle>
<circle style="fill: green;”
r="30" cy="150" cx="150"></circle>
<circle style="fill: blue;”
r="30" cy="250" cx="250"></circle>
</svg>

enter, exit
var data = [
{x: 50, y: 50, color: 'red'},
{x: 150, y: 150, color: 'green'},
{x: 250, y: 250, color: 'blue'}
];
!
d3.select('svg')
.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr({
cx: function(d) {
return d.x;
},
cy: function(d) {
return d.y;
},
r: 30
})
return d.color;
});
<svg width="300" height="300"></svg>
<circle style="fill: red;” r="30" cy="50" cx="50"></circle>
<circle style="fill: green;” r="30" cy="150" cx="150"></circle>
<circle style="fill: blue;” r="30" cy="250" cx="250"></circle>
</svg>
data
要素 Enter Selection
data
要素 Exit Selection

call
function draw(selection) {
selection
.append('circle')
.attr({
cx: function(d) {
return d.x;
},
cy: function(d) {
return d.y;
},
r: 30
})
return d.color;
});
}
var data = [
{x: 50, y: 50, color: 'red'},
{x: 150, y: 150, color: 'green'},
{x: 250, y: 250, color: 'blue'}
];
!
d3.select('svg')
.selectAll('circle')
.data(data)
.enter()
.call(draw);
cf. NVD3 ( http://nvd3.org )!
!
d3.select(‘svg’)
.datum(data)
.call(chart);
✤ f(selection)のショートカット!
selection.call(f)
!
✤ 描画のモジュール化に有効

本日の題材
✤ 麻雀スコア管理 (先週困った)!
✤ スコアのグラフを描く!
✤ AngularJSでスコア編集を実装!
✤ 双方向データバインドで 
即座にグラフ更新!
✤ https://github.com/likr/gdgkobe20140823
d3.csv('data/data.csv', function(row) {
for (var attr in row) {
row[attr] = +row[attr];
}
return row;
}, function(data) {
d3.select('svg')
.datum(data)
.call(draw());
});
!
!
function draw() {
var verticalMargin = 30;
var axisWidth = 50;
var chartWidth = 500;
var chartHeight = 400;
var barWidth = 10;
var colorScale = d3.scale.category10();
!
return function(selection) {
selection.each(function(data) {
var svg = d3.select(this)
.attr({
width: chartWidth + axisWidth * 2,
height: chartHeight + verticalMargin * 2
});
!
svg.selectAll('g.chart')
.data([data])
.enter()
.call(initialize);
!
svg.selectAll('g.chart')
.call(drawBars)
.call(drawLines);
});
});
}

2. D3.jsとAngularJSを組み合わせる

まずはそのまま
var app = angular.module('app', []);
!
app.controller('MainController', function() {
}
return row;
}, function(data) {
d3.select('svg')
.datum(data)
.call(draw());
});
!
function draw() {
// …
}
});
(作法はともかく) グラフが描ける

$scopeでデータをバインドする
!
app.controller('MainController', function($scope) {
$scope.data = [];
$scope.players = [];
!
}
return row;
}, function(data) {
d3.select('svg')
.datum(data)
.call(draw());
!
$scope.data = data;
$scope.players = Object.keys(data[0]);
$scope.$apply();
});
!
function draw() {
// …
}
});
<div class="form-group">
<button class="btn btn-default" ng-click="add()">Add</button>
</div>
<table class="table table-bordered">
<tr>
<th class="col-sm-2">Game</th>
<th class="col-sm-2"><input class="form-control" ng-model="players[0]"></th>
<th class="col-sm-2">Error</th>
</tr>
<tr ng-repeat="game in data">
<td>{{$index + 1}}</td>
<td><input class="form-control" type="number" ng-model="game[players[0]]"></td>
<td>{{sumGame(game)}}</td>
</tr>
<tr>
<td>Total</td>
<td>{{sumTotal(players[0])}}</td>
<td></td>
</tr>
</table>

アプリの機能を整える
!
d3.csv(/* … */);
!
$scope.add = function() {
var game = {};
$scope.players.forEach(function(player) {
game[player] = 0;
});
$scope.data.push(game);
};
!
$scope.sumGame = function(game) {
return $scope.players.reduce(function(sum, player) {
return sum + game[player];
}, 0);
};
!
$scope.sumTotal = function(player) {
return $scope.data.reduce(function(sum, game) {
}, 0);
};
!
function draw() {
// …
}
});
データの編集がグラフに反映されない

$scope.$watchで更新を監視
$scope.data = [];
!
d3.csv(/* … */;
!
// …
!
$scope.$watch('data', function() {
d3.select('svg')
.call(draw());
}, true);
!
function draw() {
// …
}
});
✤ Scope中の変数の変更を監視する 
$scope.$watch(name, callback[, objectEquality])
✤ objectEqualityをtrueでdeep watch!
!
✤ $scope.$watchCollectionを使う方法も!
✤ AngularJSでD3.jsをラップしてみよう 
(http://qiita.com/Quramy/items/b701b824c2f42c683aa7)

膨れ上がったコントローラー…
$scope.data = [];
!
}
return row;
}, function(data) {
var players = Object.keys(data[0]);
!
d3.select('svg')
.datum({
keys: players,
values: data
})
.call(draw());
!
$scope.data = data;
$scope.players = players;
$scope.$apply();
});
!
var game = {};
game[player] = 0;
});
};
!
$scope.sumGame = function(game) {
return $scope.players.reduce(function(sum, player)
{
}, 0);
};
!
$scope.sumTotal = function(player) {
}, 0);
};
!
$scope.$watch('data', function() {
d3.select('svg')
.call(draw());
}, true);
!
function draw() {
// …
}
});

Provider
✤ Serviceを登録する!
module.factory(name, providerFunction)
module.service(name, constructor)
!
✤ Filterを登録する!
module.filter(name, filterFactory)
!
✤ Directiveを登録する!
module.directive(name, directiveFactory)
!
✤ value, constant, animation, …
module.factory(name, function(/* DI */) {
// serviceの初期化
!
return function() {
// serviceの本体
};
});

resolveでデータを取得する
var app = angular.module('app', ['ui.router']);
!
// d3.csvをラップ
app.factory('getCSV', function($q) {
return function(url, accessor) {
var deferred = $q.defer();
d3.csv(url, accessor, function(data) {
deferred.resolve(data);
});
return deferred.promise;
};
});
!
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('main', {
controller: 'MainController',
templateUrl: 'partials/main.html',
url: '/',
resolve: {
scoreData: function(getCSV) {
return getCSV('data/data.csv', function(row) {
}
return row;
});
}
}
});
!
$urlRouterProvider.otherwise('/');
});
!
app.controller('MainController', function($scope, scoreData) {
$scope.players = Object.keys(scoreData[0]);
$scope.data = scoreData;
!
d3.select('svg')
.datum({
keys: $scope.players,
values: $scope.data
});
!
// …
})
✤ d3.csvをPromiseを返す関数としてラップ!
✤ 汎用的な関数の部品化なのでfactoryを使用!
✤ ngRoute/ui.router のresolveを利用してデータ取得を切り分け!
✤ 前回勉強会参照( http://www.slideshare.net/likr/angularjs-35612212 )

View用ロジックの切り分け
app.filter('sumGame', function() {
return function(game, keys) {
return keys.reduce(function(sum, key) {
return sum + game[key];
}, 0);
};
});
!
app.filter('sumTotal', function() {
return function(data, key) {
return data.reduce(function(sum, game) {
return sum + game[key];
}, 0);
};
});
<table class="table table-bordered">
<tr>
<th class="col-sm-2">Game</th>
<th class="col-sm-2"><input class="form-control"
<th class="col-sm-2">Error</th>
</tr>
<tr ng-repeat="game in data">
<td>{{$index + 1}}</td>
<td><input class="form-control" type="number" ng
<td>{{game|sumGame:players}}</td>
</tr>
<tr>
<td>Total</td>
<td>{{data|sumTotal:players[0]}}</td>
<td></td>
</tr>
</table>
{{value|filter:arg}}
↓
filter(value, arg)

SVGのDirective化
app.directive('chart', function() {
return {
restrict: 'AE',
scope: {
keys: '=',
values: '='
},
link: function(scope, element) {
d3.select(element[0])
.append('svg')
.datum({
keys: scope.keys,
values: scope.values
});
!
scope.$watch('values', function() {
d3.select('svg')
.call(draw());
}, true);
}
};
!
function draw() {
// …
}
});
E: <chart keys=“players” values=“data”></chart>
A: <div chart keys=“players” values=“data”></div>
✤ directiveのオプション!
✤ restrict!
✤ A: Attribute!
✤ C: Class!
✤ E: Element!
✤ scope!
✤ Viewから受け取る変数!
✤ link!
✤ DOMの構築

Before / After
$scope.data = [];
!d3.csv('data/data.csv', function(row) {
}
return row;
}, function(data) {
var players = Object.keys(data[0]);
! d3.select('svg')
.datum({
keys: players,
values: data
})
.call(draw());
! $scope.data = data;
$scope.players = players;
$scope.$apply();
});
!$scope.add = function() {
var game = {};
game[player] = 0;
});
};
!$scope.sumGame = function(game) {
return $scope.players.reduce(function(sum, player) {
}, 0);
};
!$scope.sumTotal = function(player) {
}, 0);
};
!$scope.$watch('data', function() {
d3.select('svg')
.call(draw());
}, true);
!function draw() {
// …
}
});
app.controller('MainController', function($scope, scoreData) {
$scope.players = Object.keys(scoreData[0]);
$scope.data = scoreData;
!
var game = {};
game[player] = 0;
});
};
});
✤ コントローラーがシンプルに！!
!
✤ 「お前のAngular.jsはもうMVCではない。と言われないためのTutorial 
( http://qiita.com/icoxfog417/items/2ac773c33a8b34288551 )」 
コントローラーではイベントハンドリングと 
データバインディングに集中

まとめ
✤ D3.js たのしい!
✤ 凝った表現はd3 pluginを探すことを推奨!
✤ とりあえずControllerに乗っければアプリが動く!
✤ まずは動かしてみる！!
✤ ProviderでControllerをスリムに保つ

AngularJSとD3.jsによるインタラクティブデータビジュアライゼーション

Recommended

More Related Content

What's hot (19)

Viewers also liked (20)

Similar to AngularJSとD3.jsによるインタラクティブデータビジュアライゼーション (20)

More from Yosuke Onoue (17)

AngularJSとD3.jsによるインタラクティブデータビジュアライゼーション