D3.js

自己紹介

群馬で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は……

D3.js、面白いよ!

おわり。

/

#