SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

近未来の技術トレンドを先取り! 「Tech-Sketch」出張所

「D3.js」を使ったデータビジュアライゼーション

近未来の技術トレンドを先取り! 「Tech-Sketch」出張所 第8回

  • X ポスト
  • このエントリーをはてなブックマークに追加

 次にデータを読み込み、準備したオブジェクトや要素に対して値を設定していきます。今回のグラフではCSVを読み込みましたが、D3.jsでは、JSONやXML、TSVなどさまざまな形式のファイルを簡単に読み込むことができます。CSVから読み込んだデータは文字列として扱われるので、収穫量と作付面積は数値に変換しておきます。X軸の値はそのまま都道府県を並べるだけですが、Y軸は数値なので表示する値の範囲を指定する必要があります。extentを使うと、数値の最小値、最大値の配列を返してくれるので便利です。niceはうまく表示できるように、切りの良い数値まで拡張してくれます。

sample2のソースコード(一部)
// CSV読込
d3.csv("two-rowed_barley.csv", function(error, data) {

  // 文字列を数値に変換
  data.forEach(function(d) {
    d["収穫量(t)"] = +d["収穫量(t)"];
    d["作付面積(ha)"] = +d["作付面積(ha)"];
  });

  // 表示領域の設定
  x.domain(data.map(function(d) { return d["都道府県"]; }));
  y.domain(d3.extent(data, function(d) { return d["収穫量(t)"]; })).nice();

  // X軸ラベルの追加
  svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
    .append("text")
    .attr("class", "label")
    .attr("x", width + 30)
    .attr("y", -6)
    .style("text-anchor", "end")
    .text("都道府県");

  // Y軸ラベルの追加
  svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .append("text")
    .attr("class", "label")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("収穫量(t)")

 最後に、都道府県別の二条大麦の収穫量、作付面積を表す円と、ツールチップ、凡例を作成します。onで現在のセレクションに対してイベントリスナーを追加し、マウスオーバー、マウスアウトのイベントをハンドリングしています。マウスオーバー時にツールチップが表示され、マウスアウト時に消えるようにしています。凡例としてグラフの右側に、都道府県と円の色に対応した色の四角形を表示しています。

sample2のソースコード(一部)
  // 都道府県別の二条大麦収穫量、作付面積を表す円を作成
  svg.selectAll(".circle")
    .data(data)
    .enter().append("circle")
    .attr("class", "circle")
    .attr("r", function(d) { return d["作付面積(ha)"] / 120;} )
    .attr("cx", function(d) { return x(d["都道府県"]) + 23; })
    .attr("cy", function(d) { return y(d["収穫量(t)"]); })
    .attr("fill", function(d) { return color(d["都道府県"]); })
    .on("mouseover", function(d){
      tooltip.transition()
        .duration(200)
        .style("opacity", .9);
      tooltip
        .style("top", (d3.event.pageY-10)+"px")
        .style("left",(d3.event.pageX+10)+"px")
        .html("都道府県:" + d["都道府県"] + "</br>"
          + "収穫量:" + d["収穫量(t)"] + "(t)</br>"
          + "作付面積:" + d["作付面積(ha)"] + "(ha)</br>");
    })
      .on("mouseout", function(){
        tooltip.transition()
          .duration(400)
          .style("opacity", 0);
      });

  var legend = svg.selectAll(".legend")
    .data(color.domain())
    .enter().append("g")
    .attr("class", "legend")
    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

  legend.append("rect")
    .attr("x", width - 18)
    .attr("width", 18)
    .attr("height", 18)
    .style("fill", color);

  legend.append("text")
    .attr("x", width - 24)
    .attr("y", 9)
    .attr("dy", ".35em")
    .style("text-anchor", "end")
    .text(function(d) { return d; });

});

 出力されたグラフは以下になります。ホップと同様に北海道が多いのかと思っていましたが、佐賀県と栃木県が収穫量、作付面積共に圧倒的に多いようです。小麦に関しては北海道が6割を超えるシェアを獲得しているため、他県が大麦栽培に力を入れた、または北海道が大麦栽培に力を入れなかったとも考えられそうです。

sample2の実行結果
sample2

まとめ

 D3.jsを利用すると、他のライブラリでは実現できないような複雑で凝ったデータビジュアライゼーションが可能になります。しかし、他のライブラリと比べ柔軟性が高くAPIも豊富なため、学習にかかるコストは高い印象を受けます。ただ簡単にグラフを表示したいだけであれば、他のライブラリを、基本的なグラフであれば、簡単に作成できるようなD3.jsをラップしたライブラリを利用すると良いでしょう。D3.jsは海外ではかなり人気の高いライブラリですが、日本ではまだまだ知名度が低く感じます。慣れてくるとD3.jsで図を描くのが楽しくなってきますし、ライブラリ自体が良くできているので、JavaScriptの勉強にもなります。興味を持った方は、ぜひ触ってD3.jsの魅力を感じ取ってください。

 次回は、ワークフローエンジン「Activiti」のAPIを使って、簡単なワークフローアプリケーションを開発してみたいと思います。実際に手を動かしながら進められる「チュートリアル形式の記事」を公開予定です。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
近未来の技術トレンドを先取り! 「Tech-Sketch」出張所連載記事一覧

もっと読む

この記事の著者

天沼 健仁(TIS株式会社)(アマヌマ タケヒト)

TIS株式会社 コーポレート本部 戦略技術センターに所属。クレジットカード基幹システムの保守・開発、Webシステム開発を経て現在に至る。 現在は、RubyやJavaScriptに関するライブラリや外部サービスの検証を行っている。 プライベートではアジャイル開発やRubyに興味を持ち関連の勉強会にマメに参加していたが、引越し後都心から離れ足が遠のいているのが悩み。Tech-Sketch : http://tech-sketch.jp

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7459 2013/11/05 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング