D3.js WebAPIを使用した棒グラフ作成

D3.jsで単純な棒グラフを作成してみる。

使用するWebAPIはITダッシュボードから選定。

■css

.axis path,
.axis line {
   fill: none;
   stroke: black;
   shape-rendering: crispEdges;
}

.axis text {
   font-family: sans-serif;
   font-size: 11px;
}

.d3sample text {
    font-size: 11px;
    width: 100%;
}

cssではグラフ上のテキストや目盛の線幅などを調整している。

■js

var WebAPIURL = "http://www.itdashboard.go.jp/PublicApi/getData.json?dataset=BasicInformation&field=organization&option=count";

d3.json(WebAPIURL, function(error, data) {
    var areaId = "#d3numberofsystem";
    // WebAPI呼出し時エラー
    if (error) {
        d3.select(areaId).html(error.statusText);
        return;
    }

    // グラフ描画用定数 単位はすべてpx
    var xZeroPoint = 100; // x座標の起点
    var yZeroPoint = 5; // y座標の起点
    var scaleRange = 50; // 目盛の幅
    var axisRange = 20; // 軸の幅
    var rectRange = 8; // 棒の幅
    var rectSpace = rectRange + 6; // 余白込みの棒の幅

    // グラフ描画用変数
    // 取得データからグラフ描画の幅に必要なpxを算出
    var xMAX = xZeroPoint + d3.max(data.raw_data, function(d) {
        return d.count;
    });
    // 取得データからグラフ描画の高さに必要なpxを算出
    var yMAX = yZeroPoint + data.raw_data.length * rectSpace;
    // 目盛最大値を算出
    var xAxisMAX = (xMAX - xMAX % scaleRange) + scaleRange;

    // SVGの描画エリアを作成
    var svg = d3.select(areaId) // 描画エリアを指定
        .append("svg") // svg要素を追加
        .attr("width", xMAX + axisRange) // 描画エリアの横幅を指定
        .attr("height", yMAX + axisRange); // 描画エリアの縦幅を指定

    // 目盛幅のグリッド線を作成
    var range = d3.range(xAxisMAX, xZeroPoint, -scaleRange);
    svg.selectAll("line.v")
        .data(range).enter().append("line")
        .attr("x1", function(d, i) {
            return d;
        }).attr("y1", yZeroPoint)
        .attr("x2", function(d, i) {
            return d;
        }).attr("y2", yMAX);
    svg.selectAll("line")
        .attr("stroke", "#DDDDDD")
        .attr("shape-rendering", "crispEdges");

    // 棒グラフの棒の部分を作成
    svg.selectAll("rect")
        .data(data.raw_data) // 取得データの設定
        .enter() // データ数分繰り返し
        .append("rect")
        .attr("x", xZeroPoint) // x座標は起点のため固定
        .attr("y", function(row, i) {
            return i * rectSpace + yZeroPoint;
        }) // y座標はデータ1行ごとに起点を変更
        .attr("width", function(row) {
            return row.count;
        }) // 横幅を指定
        .attr("height", rectRange) // 縦幅を指定
        .attr("fill", "blue");

    // 棒グラフの縦軸の表示要素(組織名一覧)を作成
    svg.selectAll("text")
        .data(data.raw_data)
        .enter()
        .append("text")
        .attr("x", 10)
        .attr("y", function(row, i) {
            return i * rectSpace + (yZeroPoint + rectRange);
        })
        .text(function(row) {
            return row.organization;
        });

    // 縦軸の作成
    // スケール設定（目盛無し）
    var yScale = d3.scale.linear()
        .domain([0, 0])
        .range([0, yMAX]);
    // y軸の描画
    svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(" + xZeroPoint + ", " + 0 + ")") // 出力起点
        .call(d3.svg.axis()
            .scale(yScale) // スケールを適用する
            .orient("left")); // 線の描画位置

    // スケール設定（目盛有り）
    var xScale = d3.scale.linear() // スケールを設定
        .domain([0, xAxisMAX]) // 表示上のサイズ
        .range([0, xAxisMAX]); // 実際の出力サイズ
    // x軸の描画
    svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(" + xZeroPoint + ", " + yMAX + ")") // 出力起点
        .call(d3.svg.axis()
            .scale(xScale) //スケールを適用する
            .orient("bottom"));
});