Head First Statistics
頭とからだで覚える統計の基本
(オライリージャパン)
Dawn Griffiths (著)
黒川 利明 (翻訳)
木下 哲也 (翻訳)
黒川 洋 (翻訳)
黒川 めぐみ (翻訳)
グラフの描画, データの可視化
- OS X Yosemite - Apple (OS)
- Safari, Firefox, Google Chrome(Webプラウザ)
- Emacs (CUI)、BBEdit - Bare Bones Software, Inc.(GUI) (Text Editor)
- JavaScript (プログラミング言語)
- D3.js (JavaScript Library)
Head First Statistics - 頭とからだで覚える統計の基本 (Dawn Griffiths (著)、黒川 利明 (翻訳)、 木下 哲也 (翻訳)、黒川 洋 (翻訳)、黒川 めぐみ (翻訳)、オライリージャパン)の1章(情報を見える化する)、エクササイズ(p.21)のヒストグラムを D3.js を使って描いてみる。
エクササイズ(p.21)
JavaScript(BBEdit, Emacs)
var dataset = [5, 29, 56, 17, 3],
step = 200,
xScale,
yScale,
colorScale,
len = dataset.length,
width = 500,
height = 500,
bar_padding = 1,
bar_width,
padding = 50,
svg;
svg = d3.select('div#answer')
.append('svg')
.attr({
width: width,
height: height
});
xScale = d3.scale.linear()
.domain([0, step * len])
.range([padding, width - 2 * padding]);
yScale = d3.scale.linear()
.domain([0, d3.max(dataset)])
.range([height - padding, padding]);
colorScale = d3.scale.linear()
.domain([0, d3.max(dataset)])
.range([0, 255]);
svg.append('g')
.attr({
transform: 'translate(0, ' + (height - padding) + ')'
})
.call(d3.svg.axis()
.scale(xScale)
.orient('bottom')
.ticks(len));
svg.append('g')
.attr({
transform: 'translate(' + padding + ', 0)'
})
.call(d3.svg.axis()
.scale(yScale)
.orient('left')
.ticks(Math.floor(d3.max(dataset) / 2)));
svg.selectAll('rect')
.data(dataset)
.enter()
.append('rect')
.attr({
x: function (d, i) {
return xScale(step * i);
},
y: function (d) {
return yScale(d);
},
width: xScale(step) - xScale(bar_padding),
height: function (d, i) {
return height - padding - yScale(d);
},
fill: function (d, i) {
return 'rgb(0, 0, ' + Math.floor(colorScale(d)) + ')';
}
});
0 コメント:
コメントを投稿