Agata's Blog

前回の記事では、「次回はアニメーションを使って、ダイナミックに動くグラフを作成しましょう！」と書きましたが、その前にCSVファイルからデータを読み込む方法について説明することにします。

これまでデータの数値はプログラム内の配列として定義してきました。しかし実際に現場でD3.jsを使ってデータを可視化する際には、元データがCSVやJSON形式のファイルとして与えられる場合がほとんどです。そこで今回は、CSVファイルからデータを読み込んで、グラフを作成してみましょう。さらに、これまでの説明では架空のサンプルデータを使ってグラフを書いてきましたが、今回は本物のデータを使って、より実践的な「データ可視化」にチャレンジすることにします。

今回は、政府統計の総合窓口が公開している日本の総人口データを使って、総人口の推計をグラフ化してみます。まず、我が国の推計人口（大正9年〜平成12年）から人口推移のExcelファイルをダウンロードします。次に、Excel上で余分な情報を削除して、西暦と総人口の2列だけのCSVファイル (カンマ区切り) を作成します。CSVファイルの1行目には、ラベルとして「Year, Population」と記しておきます。これをpopulation.csvとして保存します。完成したCSVファイルの一部を以下に示します。

Year,Population
1920,55963
1921,56666
1922,57390
1923,58119
・・・
1999,126667
2000,126926

ここで、人口の値は単位が「千人」となっていることに注意してください。

さて、いよいよD3.jsを使って、このCSVファイルを読み込んで散布図を作成してみましょう。

■sample.js

var dataSet = [];

// Ｘ，Ｙ軸を表示できるようにグラフの周囲にマージンを確保する
var margin = {top: 10, right: 40, bottom: 40, left: 100};
var width = 800 - margin.left - margin.right;
var height = 400 - margin.top - margin.bottom;

d3.csv("./js/population.csv", function(error, dataSet){
  console.log(dataSet);

  // SVGの表示領域を生成
  var svg = d3.select("#MyGraph")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + ", " + margin.top + ")");
    
  // スケール関数を作成。
  var xScale = d3.scale.linear()
    .domain([1920,2000])
    .range([0,width]);

  var yScale = d3.scale.linear()
    .domain([0,130000])
    .range([height,0]);

    
  // 散布図を描画
  svg.selectAll("circle")
    .data(dataSet)
    .enter()
    .append("circle")
    .attr("r", 5)
    .attr("cx", function(d){
      return xScale(d.Year);
    })
    .attr("cy", function(d){
      return yScale(d.Population);
    });

  // Ｙ軸を描画
  svg.append("g")
    .attr("class", "axis")
    .call(d3.svg.axis()
      .scale(yScale)
    .orient("left")
  );
  
  // Ｘ軸を描画
  svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.svg
      .axis()
      .scale(xScale)
      .orient("bottom")
  );
  
  // 凡例
  svg.append("g")
    .append("text")
    .attr("x", 20)
    .attr("y", 20)
    .text("[単位：千人]");

})

3行目から6行目は、X, Y軸を含めたグラフ全体を800×400pxのSVGファイル内に収めるために、グラフの周囲のマージンなどを設定しています。8行目が今回のポイント、CSVファイルを読み込む d3.csv() メソッドです。メソッドの1番目の引数には、htmlファイルから見たcsvファイルのパスを指定します。9行目では、ちゃんとCSVファイルが読み込めているかどうかを確認するため、コンソール上にデータを表示させています。ありがたいことに d3.csv() メソッドでCSVファイルを読み込むと、自動的にCSVファイルの1行目をデータのラベルとして認識して、2行目以降のデータをそれに従って構造化したデータとして格納してくれます。このため、35行目・38行目のようにしてCSVデータのデータを列ごとに取り出すことができるのです。

18行目から57行目までの部分は、これまでにこのブログで取り上げてきたメソッドを使って散布図を作成しています。最後に60行目以降の部分で、縦軸の数値の単位が「千人」であることを表示しています。

いかがだったでしょうか。実際のデータを可視化してみることで、多少なりとも実際のデータ可視化作業の雰囲気を感じてもらえたのではないでしょうか。次回はいよいよアニメーションを使って、ダイナミックに動くグラフを作成してみます。お楽しみに！