次にデータを読み込み、準備したオブジェクトや要素に対して値を設定していきます。今回のグラフではCSVを読み込みましたが、D3.jsでは、JSONやXML、TSVなどさまざまな形式のファイルを簡単に読み込むことができます。CSVから読み込んだデータは文字列として扱われるので、収穫量と作付面積は数値に変換しておきます。X軸の値はそのまま都道府県を並べるだけですが、Y軸は数値なので表示する値の範囲を指定する必要があります。extentを使うと、数値の最小値、最大値の配列を返してくれるので便利です。niceはうまく表示できるように、切りの良い数値まで拡張してくれます。
// 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で現在のセレクションに対してイベントリスナーを追加し、マウスオーバー、マウスアウトのイベントをハンドリングしています。マウスオーバー時にツールチップが表示され、マウスアウト時に消えるようにしています。凡例としてグラフの右側に、都道府県と円の色に対応した色の四角形を表示しています。
// 都道府県別の二条大麦収穫量、作付面積を表す円を作成
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割を超えるシェアを獲得しているため、他県が大麦栽培に力を入れた、または北海道が大麦栽培に力を入れなかったとも考えられそうです。
まとめ
D3.jsを利用すると、他のライブラリでは実現できないような複雑で凝ったデータビジュアライゼーションが可能になります。しかし、他のライブラリと比べ柔軟性が高くAPIも豊富なため、学習にかかるコストは高い印象を受けます。ただ簡単にグラフを表示したいだけであれば、他のライブラリを、基本的なグラフであれば、簡単に作成できるようなD3.jsをラップしたライブラリを利用すると良いでしょう。D3.jsは海外ではかなり人気の高いライブラリですが、日本ではまだまだ知名度が低く感じます。慣れてくるとD3.jsで図を描くのが楽しくなってきますし、ライブラリ自体が良くできているので、JavaScriptの勉強にもなります。興味を持った方は、ぜひ触ってD3.jsの魅力を感じ取ってください。
次回は、ワークフローエンジン「Activiti」のAPIを使って、簡単なワークフローアプリケーションを開発してみたいと思います。実際に手を動かしながら進められる「チュートリアル形式の記事」を公開予定です。
