ヒストグラムを描く (SVG使用)

説明

D3.jsでSVGを使ってヒストグラムを描くにはd3.layout.histogram()を使います。ヒストグラムの値の範囲はrange()メソッドのパラメーターに[0,100]のように配列形式で指定します。ヒストグラムにまとめる単位はbins()メソッドを使って指定します。パラメーターには配列形式で[10,50,100]のように区切る範囲を指定します。
ヒストグラムの設定が終わったらdata()メソッド、append()メソッドを使って棒グラフとなる四角形を描いていきます。これは、縦棒グラフの描画方法と同じなので、詳しくはこちらのページを参照してください。

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

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 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;
	})