小さい頃はエラ呼吸

いつのまにやら肺で呼吸をしています。


jQueryでJR東日本の駅ごとの乗車数をグラフ化してみたよ。

はじめに

夏休みの自由研究ではないですが、jQueryとjquery.xdomainajax.jsでJR東日本エリアの駅ごとの乗車人員を取得して、グラフ化してみました。
こうしてグラフ化してみると、新宿駅ぱねぇってのがはっきり分かりますね。

駅ごとの乗車人員を取得する

JR東日本エリアの駅ごとの乗車人員は以下のサイトで公開されています。

このデータをjQueryを使ってスクレイピングしていきます。

JR VS 私鉄 王者JRを猛追する私鉄 (週刊ダイヤモンド 特集BOOKS(Vol.22))
ダイヤモンド社 (2013-07-16)
売り上げランキング: 12,464

jQueryを使ってスクレイピング

jQueryを使って外部のサイトをスクレイピングするには、jquery.xdomainajax.jsというライブラリを使うと便利です。

テーブルタグを特定して、そこから駅ごとのデータを取得していきます。2012年とそれ以前のページでテーブルタグの構成が異なるので、年数で分岐させる必要がありました。

  $.ajax({
    url: url,
    type: 'GET',
    cache: false, // キャッシュOFF
    // データのロード完了時の処理
    success: function(res) {
      // table タグの検索
      var content = new Array();
      content = $(res.responseText).find("table").each(function(){
        content.push($(this).text());
      });
      var objTable = $(content[3]);
      
      var firstRow;
      var norioriColumn;
      if(year == "2012")
      {
        // 先頭行
        firstRow = 5;
        // 乗り降り数(列)
        norioriColumn = 4;
      }
      else
      {
        // 先頭行
        firstRow = 4;
        // 乗り降り数(列)
        norioriColumn = 2;
      }
      
      // 配列にプッシュしていく
      var objTr = new Array();
      var i=0;
      $(objTable).find("tr").each(function(){
        if(i >= firstRow) {
          objTr.push($(this));
        }
        i++;
      });
      
      // trタグから子要素のtdタグを取り出して、配列にプッシュしていく
      for( var i=49; i>=0; i-- ){
        var objTd = $(objTr[i]).children();
        var tmpArray = new Array();
        // 駅名
        var ekiName = objTd.eq(1).text();
        // 乗降数
     var noriori = parseInt(objTd.eq(norioriColumn).text().replace(",", ""));
        tmpArray.push(noriori, ekiName);
        // グラフ用配列にプッシュする
        graphData.push(tmpArray);
      }
jqPlotでグラフ化する

jqPlotというライブラリを使うと、Webページにグラフを簡単に表示させることができます。

      // グラフ描画
      var plot1 = $.jqplot('chart1', [graphData], {
        title:'JR東日本エリア内 各駅の乗車人員(' + year + '年)', // グラフタイトル
        animate: !$.jqplot.use_excanvas, // アニメーションを有効
        seriesDefaults:{
        renderer:$.jqplot.BarRenderer,
          pointLabels: { show: true },
          rendererOptions: {
            barDirection: 'horizontal'
          }
        },
        axes:{
          // X軸の設定
          xaxis:{
            label: "1日平均乗車数"
          },
          // Y軸の設定
          yaxis:{
            renderer:$.jqplot.CategoryAxisRenderer,
            label: "駅名"
          }
        },
        // 凡例の設定
        series:[{
          // ラベルの指定
          label: '1日平均乗車数'
        }],
        legend: {
          show: true, // true:表示、false:非表示
        }
      });
おわりに

jQueryを使ったスクレイピング。はじめは苦労しましたが、慣れるとデータの取り出し方がわかってくるので他のサイト応用がききそうです。
jQueryでクロスドメインAjaxを実装するなら、jquery.xdomainajax.jsというライブラリがおすすめです。
取り出したデータをグラフ化して表現するなら、jqPlotがおすすめです。