ホーム >  JavaScript > D3.js >  D3.jsで自由にチャートを作る


Posted:2016/12/07 9:00:19 AM|Category : D3.js

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

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

javascript_logo_unofficial-300x300

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」を開きます。すると、グラフが表示されます。

3djs0001


トラックバック用のURL
プロフィール

名前:イワサキ ユウタ 職業:システムエンジニア、ウェブマスター 誕生:1986年生まれ 出身:静岡県 特技:ウッドベース 略歴 2008年04月 金融機関系I

最近の投稿
人気記事
カテゴリー
広告