この記事でやること

D3.jsでCSV形式のデータファイルを元に棒グラフを表示します
- 元データ：CSVファイル
- 描画方法：HTML（あまり良い使い方ではありませんが、今回は例として）
要素の追加と属性設定を行います

ソースコード

HTML

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 基本スタイルシート -->
<link rel="stylesheet" type="text/css" href="main.css">
<title>D3.js　CSVデータから棒グラフを表示</title>
</head>
<body>
<!-- 棒グラフの描画先-->
<div id="graph"></div>
</body>
<!-- D3.js -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<!-- 本体処理 -->
<script src="main.js"></script>
</html>

JavaScript

main.js

// 読み込みCSVファイル
var DATA_FILE_PATH = './data.csv';
// グラフ描画先
var TARGET_ELEMENT_ID = '#graph';
// 項目名：名前
var COL_NAME = 'name';
// 項目名：値
var COL_VALUE = 'value';

drawGraph();

/**
 * 棒グラフの描画
 */
function drawGraph() {
    // 第2引数のlistの中に読み込んだCSVデータがある
    d3.csv(DATA_FILE_PATH, function(error, list){
        // グラフの外枠テーブル作成
        var table = d3.select(TARGET_ELEMENT_ID)
            .append('table')
            .selectAll()
            .data(list)
            .enter();
            
        // 行作成
        var row = table.append('tr');

        // 項目名セル
        row.append('th')
            .text(function(d) {
                return d[COL_NAME];
            });
        // 値セルと棒表示
        row.append('td')
            .append('div')
            .attr('class', 'value')
            .attr('style', function(d) {
                return 'width:' + d[COL_VALUE] + 'px;';
            })
            .text(function(d) {
                return d[COL_VALUE];
            });
    });
}

CSS

main.css

/* 棒グラフの棒部分 */
.value {
    background-color: #cce;
    border: solid 1px #99a;
}

データファイル（CSV）

data.csv

name,value
A-A,200
A-B,100
A-C,150
A-D,100