d3.jsで棒グラフを描く　その１

## はじめに
[d3.jsチュートリアル](http://ja.d3js.info/alignedleft/tutorials/d3/)を参考に棒グラフを描いてみます。バージョンは3.xです。
私の好きな映画、スティーブン・セガールの沈黙シリーズの[IMDb](http://www.imdb.com/)での評価をグラフにしてみたいと思います。

## d3.jsの読み込み
ヘッダで以下を宣言します。（バージョン3.5.6を使います）

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
```

## データセット
扱うデータです。添え字0がタイトル、添え字1が評価です。プログラムと全然関係ない話ですが「ダイ・ハード」の評価が8.1なので、沈黙シリーズの評価は、総じて低いです。あと、テレビドラマ「TRUE JUSTICE」は、日本では「沈黙の宿命」から始まる沈黙シリーズとして扱われていますが、海外では「TRUE JUSTICE」一括りになっていますので、日本放映時のタイトル「S・セガール劇場」とします。

```js
var dataset = [
    ['沈黙の戦艦',6.4],
    ['沈黙の要塞',4.4],
    ['暴走特急',5.4],
    ['沈黙の断崖',5.0],
    ['沈黙の陰謀',4.1],
    ['沈黙のテロリスト',3.5],
    ['沈黙の標的',3.3],
    ['沈黙の聖戦',4.7],
    ['沈黙の追撃',3.8],
    ['沈黙の脱獄',4.2],
    ['沈黙の傭兵',4.2],
    ['沈黙の奪還',4.1],
    ['沈黙のステルス',3.5],
    ['沈黙の激突',2.7],
    ['沈黙の報復',5.4],
    ['沈黙の逆襲',5.2],
    ['沈黙の鎮魂歌',5.2],
    ['沈黙の鉄拳',5.1],
    ['沈黙の復讐',4.6],
    ['S・セガール劇場',4.8],
    ['沈黙の監獄',4.9],
    ['沈黙の処刑軍団',4.6],
    ['沈黙のSHINGEKI/進撃',3.8],
    ['沈黙の執行人',4.7],
    ['沈黙の制裁',4.5],
    ['沈黙の作戦',3.8],
    ['沈黙の帝王',3.2],
    ['沈黙の粛清',4.2],
    ['沈黙の銃弾',3.9],
    ['沈黙の包囲網',3.4],
    ['沈黙のアフガン',3.2],
    ['沈黙の激戦',3.7]
];
```

## svgの宣言
svgタグを追加します。この領域にグラフを描いていくことになります。
widthで幅、heightで高さを指定しています。

```js
var svg = d3.select("body")
            .append("svg")
            .attr("width", 700)
            .attr("height", 100);
```

## 棒グラフの描画
svgに四角形rectを追加していきます。

```js
svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x", function(d, i) {
      // dがデータ、iが添え字
      // 棒グラフの開始点をずらす
      return i * 20;
    })
    .attr("y", 0)
    .attr("width", 20)
    .attr("height", function(d) {
      // データ配列の１コ目を棒グラフの高さとする
      return d[1];
    });
```

[ここまでを実行](https://jsbin.com/depawac/edit?js,output)
ごにょごにょっとした黒い物体が現れました。これは、高さが小さいため、ごにょごにょっとしているだけです。高さを10倍にして、棒グラフと棒グラフの間を少し空けてみます。

```js
svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x", function(d, i) {
      // dがデータ、iが添え字
      // 棒グラフのx開始点をずらす
      // 棒グラフがくっつかないようにする
      //return i * 20;
      return i * (20 + 1);
    })
    .attr("y", 0)
    .attr("width", 20)
    .attr("height", function(d) {
      // データ配列の１コ目を高さとする
      // わかりにくいので、値を10倍。
      //return d[1];
      return d[1] * 10;
    });
```

[ここまでを実行](https://jsbin.com/wasapa/edit?js,output)
棒グラフっぽくなりましたが、上から下へ向かって、棒が描かれています。
開始点となるyを「高さ - 値」とすると、下から上に伸びる棒グラフになります。

```js
svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x", function(d, i) {
      // dがデータ、iが添え字
      // 棒グラフのx開始点をずらす
      // 棒グラフがくっつかないようにする
      //return i * 20;
      return i * (20 + 1);
    })
    //.attr("y", 0)
    .attr("y", function(d, i) {
      // 開始点を全体高さから高さを引いた値とする
      return 100 - d[1] * 10;
    })
    .attr("width", 20)
    .attr("height", function(d) {
      // データ配列の１コ目を高さとする
      // わかりにくいので、値を10倍
      //return d[1];
      //return d[1] * 10;
      return d[1] * 10;
    });
```
[ここまでを実行](https://jsbin.com/pexobex/edit?js,output)
棒グラフっぽくなりました。次はグラフに色をつけてみます。

```js
svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x", function(d, i) {
      // dがデータ、iが添え字
      // 棒グラフのx開始点をずらす
      // 棒グラフがくっつかないようにする
      //return i * 20;
      return i * (20 + 1);
    })
    //.attr("y", 0)
    .attr("y", function(d, i) {
      // 開始点を全体高さから高さを引いた値とする
      return 100 - d[1] * 10;
    })
    .attr("width", 20)
    .attr("height", function(d) {
      // データ配列の１コ目を高さとする
      // わかりにくいので、値を10倍
      //return d[1];
      return d[1] * 10;
    })
    // グラフの色設定
    .attr("style", "fill:turquoise");
```

[ここまでを実行](https://jsbin.com/xuhomih/edit?js,output)
ターコイズにしました。次は値を表示してみます。
値の表示は、テキストの追加で行います。

```js
// テキストの追加
svg.selectAll("text")
    .data(dataset)
    .enter()
    .append("text")
    .text(function(d) {
      return d[1];
    })
    .attr("text-anchor", "middle")
    .attr("x", function(d, i) {
      return i * (20 + 1) + 10;
    })
    .attr("y", function(d) {
      return 100 - d[1] * 10 + 15;
    })
    .attr("font-size", "10px")
    .attr("fill", "white");
```

[ここまでを実行](https://jsbin.com/zoyigu/edit?js,output)
今回はここまで。ここまでに書いたプログラムをきれいにしてみます。

```js
var dataset = [
    ['沈黙の戦艦',6.4],
    ['沈黙の要塞',4.4],
    ['暴走特急',5.4],
    ['沈黙の断崖',5.0],
    ['沈黙の陰謀',4.1],
    ['沈黙のテロリスト',3.5],
    ['沈黙の標的',3.3],
    ['沈黙の聖戦',4.7],
    ['沈黙の追撃',3.8],
    ['沈黙の脱獄',4.2],
    ['沈黙の傭兵',4.2],
    ['沈黙の奪還',4.1],
    ['沈黙のステルス',3.5],
    ['沈黙の激突',2.7],
    ['沈黙の報復',5.4],
    ['沈黙の逆襲',5.2],
    ['沈黙の鎮魂歌',5.2],
    ['沈黙の鉄拳',5.1],
    ['沈黙の復讐',4.6],
    ['S・セガール劇場',4.8],
    ['沈黙の監獄',4.9],
    ['沈黙の処刑軍団',4.6],
    ['沈黙のSHINGEKI/進撃',3.8],
    ['沈黙の執行人',4.7],
    ['沈黙の制裁',4.5],
    ['沈黙の作戦',3.8],
    ['沈黙の帝王',3.2],
    ['沈黙の粛清',4.2],
    ['沈黙の銃弾',3.9],
    ['沈黙の包囲網',3.4],
    ['沈黙のアフガン',3.2],
    ['沈黙の激戦',3.7]
];

var W = 700;
var H = 100;
var BAR_W = 20;
var BAR_PADDING = 1;

var svg = d3.select("body")
            .append("svg")
            .attr("width", W)
            .attr("height", H);

svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x", function(d, i) {
      // dがデータ、iが添え字
      // 棒グラフのx開始点をずらす
      // 棒グラフがくっつかないようにする
      return i * (BAR_W + 1);
    })
    .attr("y", function(d, i) {
      // 開始点を全体高さから高さを引いた値とする
      return H - d[1] * 10;
    })
    .attr("width", BAR_W)
    .attr("height", function(d) {
      // データ配列の１コ目を高さとする
      // わかりにくいので、値を10倍
      return d[1] * 10;
    })
    // グラフの色設定
    .attr("style", "fill:turquoise");

// テキストの追加
svg.selectAll("text")
    .data(dataset)
    .enter()
    .append("text")
    .text(function(d) {
      return d[1];
    })
    .attr("text-anchor", "middle")
    .attr("x", function(d, i) {
      return i * (BAR_W + 1) + 10;
    })
    .attr("y", function(d) {
      return H - d[1] * 10 + 15;
    })
    .attr("font-size", "10px")
    .attr("fill", "white");
```

[ここまでを実行](https://jsbin.com/nidacij/edit?js,output)
次は、[d3.jsで棒グラフを描く　その２](http://qiita.com/nobuyuki-ishii/items/0bbdf609692b8d1ad015)で、スケールを設定します。