色付きのヒストグラムを描く (SVG使用)

説明

D3.jsで色付きのヒストグラムを描くにはd3.layout.histogram()とd3.scale.category10()を使います。d3.scale.category10()はカラーを返すための関数を返します。サンプルではcolor変数に入れてあります。ヒストグラムの値の範囲はrange()メソッドのパラメーターに[0,100]のように配列形式で指定します。ヒストグラムにまとめる単位はbins()メソッドを使って指定します。パラメーターには配列形式で[10,50,100]のように区切る範囲を指定します。
ヒストグラムに色を付けるにはattr()メソッドを使います。最初のパラメーターにfillの文字、2番目のパラメーターに関数を指定します。関数からの戻り値をreturn color(i);すると、ヒストグラムに色が付きます。

サンプル [サンプルを実行する] [サンプルをダウンロード]

HTMLソース

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3.js サンプル</title>
<link rel="stylesheet" href="css/main.css">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<h1>D3.jsサンプル</h1>
<div id="myGraph"></div>
<script src="js/sample.js"></script>
</body>
</html>

JavaScriptコード

var list = [	// 30人分の成績(0点〜100点)
	50, 62, 80, 30, 44, 47, 96, 55, 35, 15,
	60, 55, 50, 45, 54, 65, 77, 80, 53, 5,
	72, 74, 78, 40, 48, 56, 28, 38, 18, 52
	];
var color = d3.scale.category10();	// あらかじめ用意されている色を使う
var svgWidth = 320;	// SVG領域の横幅
var svgHeight = 240;	// SVG領域の縦幅
var yScale = 25;	// グラフの高さの倍率
var svg = d3.select("#myGraph").append("svg")
	.attr("width", svgWidth).attr("height", svgHeight)
var histogram = d3.layout.histogram()	// ヒストグラム
	.range([0, 100])	//0〜100(点)の範囲
	.bins([0, 10, 20, 30, 40, 50, 60, 70, 80 ,90, 100])	// 10点ごとに区切る
svg.selectAll("rect")	// 四角形を対象にする
	.data(histogram(list))	// 成績データを読み込む
	.enter()
	.append("rect")	// 四角形を生成する
	.attr("x", function(d, i){	// X座標を計算
		return i * 32;
	})
	.attr("y", function(d){	// Y座標を計算
		return svgHeight - d.y * yScale;
	})
	.attr("width", 30)	// 四角形の横幅
	.attr("height", function(d){	// 四角形の高さ
		return d.y * yScale;
	})
	.attr("fill", function(d,i){	// 色を指定する
		return color(i);	// 色を返す
	})