数学 - 統計 - JavaScript - D3.js - 情報を見える化する(ヒストグラム)

インタラクティブ・
データビジュアライゼーション
D3.jsによるデータの可視化
(オライリージャパン)
Scott Murray (著)
長尾 高弘 (翻訳)

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