説明
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); // 色を返す
})