D3.js

自己紹介

• 名前：清水正行 / _shimizu

• 職業：群馬で社内SE、以前は東京に居ました。

• 趣味：GIS(地理情報システム)

• 　　　データ・ビジュアライゼーション

• 　　　ジェネラティブ・アート

群馬でD3.js弄ってます

D3.jsとは？

データを基にDOMを操作するライブラリ

D3 = Chart libs

D3はChart(グラフ)ライブラリではありません

D3 ≠ Chart libs

Why D3.js is So Great for Data Visualization

意訳

D3の成功の最も重要な部分は、D3が取ったポジションやアプローチです。D3は、グラフィックライブラリではなくデータ処理ライブラリです。D3は創造性を制限するビルド済みのチャートを持っていません。その代わりに、データとグラフィックス間の接続を容易にするツールを用意しました。そのアプローチは正しく、データの可視化のために必要なライブ​​ラリとして最適な場所に位置します。

D3.jsの機能

• グラフィック要素にデータを束縛
• データから座標を計算（レイアウト）
• 束縛したデータを基に要素の属性やスタイルをアップデート
• トランジション(アニメーション)
• データの正規化
• その他データ操作に必要なユーティリティ

詳しくは下記で

データビジュアライゼーション（D3.js）を学ぶための教材まとめ

D3 ⊃ Chart libs

あらゆるグラフ(chart)が描けます

自分で作れば

棒グラフを表示するサンプルコード

example

var dataSet = [
	{name:"a", val1: 1000 },
	{name:"a", val1: 2000 },
	{name:"a", val1: 3000 },
	{name:"a", val1: 4000 },
	{name:"a", val1: 5000 }  
];

var svgW = 300; 	
var svgH = 200;	
var xMargin = 50; 

var svg = d3.select('body')
	.append('svg') 
	.attr({
		width: svgW,
		height: svgH,
	});

var scale = d3.scale.linear()
	.domain([0, d3.max(dataSet, function(d){ return d.val })])	
	.range([svgH, 0]);	

var barchart = svg.selectAll('rect')
	.data(dataSet)
	.enter()
	.append('rect')
	.attr({
		x: function(d, i){ return i * 30 + xMargin },	
		y: function(d){ return scale(d.val1)},		
		width: 20,
		height: function(d){ return svgH - scale(d.val)} ,	
		fill: "blue"
	});

var yAxisCall = d3.svg.axis()
	.scale(scale)		
	.orient('left')		

var yAxis = svg.append('g')
	.attr({
		"class": "axis",	
		"transform": "translate(" + [xMargin, 0] + ")" 
	})
	.call(yAxisCall);	
});	

結構大変

D3 ⊃ Map libs

SVGで日本地図を描画

地図を用いたデータ可視化に必須

example

地図タイルを読み込む

ズーム／パン、ドラッグも自在。

example

さまざまな投影法で地図を描画

地図自由自在

D3 ⊃ UI libs

UIだってつくれます

事例

shareWis

オンライン学習サイトのユーザーインターフェイス。D3.jsを使って作られているそうです

中の人のスライド

プロトタイプの作成

iOSモックアップ

D3.jsとSketch(SVGグラフィックソフト)を使ってWeb上で実際に動作するプロトタイプを作成する

Fast interactive prototyping with Sketch and d3.js

結論

D3.jsは……

• データを基にDOMを操作
• Chartも描けます
• 地図も描けます
• UIも作れます
• DOMを自由自在に操作できます
• 海外では、リッチコンテンツを作成する際の選択肢の一つになりつつあります

D3.js、面白いよ！

おわり。