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

はじめに

d3.jsチュートリアルを参考に棒グラフを描いてみます。バージョンは3.xです。
私の好きな映画、スティーブン・セガールの沈黙シリーズのIMDbでの評価をグラフにしてみたいと思います。

d3.jsの読み込み

ヘッダで以下を宣言します。（バージョン3.5.6を使います）

<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・セガール劇場」とします。

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で高さを指定しています。

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

棒グラフの描画

svgに四角形rectを追加していきます。

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];
    });

ここまでを実行
ごにょごにょっとした黒い物体が現れました。これは、高さが小さいため、ごにょごにょっとしているだけです。高さを10倍にして、棒グラフと棒グラフの間を少し空けてみます。

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

ここまでを実行
棒グラフっぽくなりましたが、上から下へ向かって、棒が描かれています。
開始点となるyを「高さ - 値」とすると、下から上に伸びる棒グラフになります。

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

ここまでを実行
棒グラフっぽくなりました。次はグラフに色をつけてみます。

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");

ここまでを実行
ターコイズにしました。次は値を表示してみます。
値の表示は、テキストの追加で行います。

// テキストの追加
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");

ここまでを実行
今回はここまで。ここまでに書いたプログラムをきれいにしてみます。

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");

ここまでを実行
次は、d3.jsで棒グラフを描く　その２で、スケールを設定します。