数学 - 統計 - 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 (著)、黒川 利明 (翻訳)、 木下 哲也 (翻訳)、黒川 洋 (翻訳)、黒川 めぐみ (翻訳)、オライリージャパン)の2章(情報を見える化する)、エクササイズ(p.15)の棒グラフを D3.js を使って描いてみる。

エクササイズ(p.15)

JavaScript(BBEdit, Emacs)

var dataset = [1500, 500, 1500, 2000, 1000, 500, 1],
    regions = ['北米', '南米', 'ヨーロッパ', 'アジア', 'オセアニア', 'アフリカ',
               '南極'],
    x_scale,
    y_scale,
    len = dataset.length,
    width = 500,
    height = 500,
    bar_padding = 10,
    bar_width,
    padding = 25,
    svg,
    x_axis,
    y_axis;

bar_width = height / len - bar_padding - padding;

x_scale = d3.scale.linear()
    .domain([d3.min(dataset), d3.max(dataset)])
    .range([padding, width -  padding]);
y_scale = d3.scale.linear()
    .domain([0, len])
    .range([bar_width, bar_width]);

svg = d3.select('div#answer')
    .append('svg')
    .attr({
        width: width,
        height: height
    });

svg.selectAll('rect')
    .data(dataset)
    .enter()
    .append('rect')
    .attr({
        x: padding,
        y: function (d, i) {
            return i * (height / len);
        },
        width: function (d) {
            return x_scale(d);
        },
        height: function (d, i) {
            return y_scale(i);
        },
        fill: 'skyblue'
    });

svg.selectAll('text')
    .data(regions)
    .enter()
    .append('text')
    .text(function(d) {
        return d;
    })
    .attr({
        x: 2 * padding,
        y: function (d, i) {
            return i * (height / len) + 2 * bar_padding;
        },
        fill: 'black'
    });

x_axis = d3.svg.axis()
    .scale(x_scale)
    .orient('bottom');
svg.append('g')
    .attr('transform', 'translate(0, ' + (height - padding) + ')')
    .call(x_axis);