投稿日：2016年12月7日｜最終更新日: 2016年12月15日

D3.jsで自由にチャートを作る

D3.js JavaScript

javascriptのライブラリであるD3.jsを使ってグラフを描画します。

D3.jsとは？
D3.jsを使うメリット
準備
実行テスト（棒グラフを作る）

D3.jsとは？

D3.js は「Mike Bostock 氏」によって開発が進んでいる現在主流のjsライブラリです。 SVGのようなWeb標準のリソースのみを利用することで豊富な表現が可能です。

データの可視化

データ可視化とは、

情報を視覚的に伝える
明確に情報を伝える
効果的に情報を伝える

です。

高度な分析処理（分散分析や重回帰分析）をしても、なかなか読み手に情報が伝わりません。レポートに数値や文字列の表をたくさん掲載するより、図形を見てもらう方が一目瞭然です。せっかくデータ分析者を雇用しているのに、アウトプットがイマイチだと台無しです。データサイエンスする場合は、ぜひ3D.jsを使ってみましょう。

D3.jsを使うメリット

R言語やPythonでもデータ可視化は可能です。しかし、JavaScriptでグラフが描画できればインタラクションなデータ可視化が期待できます。例えば、タッチパネルによる操作を受け取り、双方向にデータをやり取りすることができます。顧客の要求は様々で、要求のたびに大量の静止画を用意するのは現実的ではありません。そこで、インタラクションを備えた JavaScriptでデータビジュアライゼーションを提供できれば、こういったニーズにも応えることができます。

準備

D3.js を使うのは簡単です。

①D3.js をダウンロードします。

→Data-Driven Documents

②zipを解凍して、「d3.min.js」を適切な場所に設置します。

test.html
js/
d3.min.js

③htmlファイルから、配置した「d3.min.js」をロードします。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<!-- D3.jsの取り込み -->
<script src="js/d3.min.js"></script>
</script>
</body>
</html>

これで、D3.jsライブラリを使用することができます。

D3.jsを外部から直接読見込む場合

以下のように、外部からD3.jsを読み込む方法もあります。この場合、「d3.min.js」は不要です。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<!-- D3.jsの取り込み -->
<script src="http://d3js.org/d3.v3.min.js"></script>
</script>
</body>
</html>

※外部から読み込んだ場合、勝手に新しいバージョンに変わってしまうかもしれないため、あまりおすすめできません。

実行テスト（棒グラフを作る）

①以下のコードを記述し、「test.html」というhtml形式のファイルで保存します。

※d3のバージョンは、v3です。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<!-- D3.jsの取り込み -->
<script src="./js/d3.min.js"></script>
<script>
  //データ一覧
  var dataset = [30, 25, 44, 21, 30, 50];

  //描画領域作成
  var svg_width = 600;
  var svg_height = 400;
  var bar_h = svg_height / dataset.length;
  var bar_w = svg_width / 50;
  var svg = d3.select("body")
        .append("svg")
        .attr("width", svg_width)
        .attr("height", svg_height);


  //グラフ描画する
  svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr({
      x:0,
      y:       function(d, i) { return i * bar_h; },
      width:   function (d) { return d * bar_w; },
      height:  (bar_h - 5),
      fill:    "#6fbadd"
    });
</script>
</body>
</html>

②ブラウザで「test.html」を開きます。すると、グラフが表示されます。