スコット・マレイ
コード・アーティスト

Tutorials > D3 > data() の力

data() の力

最終更新日 2012年12月30日(原文)  2013年04月01日(翻訳 / h.sakai

前章で、div と単純なデータセットから作った シンプルな棒グラフの課程を修了しました。

var dataset = [ 5, 10, 15, 20, 25 ];

Simple bar chart

なかなかのものです。しかし現実のデータはこんなに単純ではありません。少しデータを変更してみましょう

var dataset = [ 25, 7, 5, 26, 11 ];

Bar chart

もちろんデータポイントも 5 個に限定されているわけではありません。どんどん追加してみましょう!

var dataset = [ 25, 7, 5, 26, 11, 8, 25, 14, 23, 19,
   14, 11, 22, 29, 11, 13, 12, 17, 18, 10,
   24, 18, 25, 9, 3 ];

Bar chart

データポイントが 5 個から 25 個へと増えました!そして、データポイントの増加に応じて自動的にグラフが拡張されました。D3 はどうやってこれを実現しているのでしょうか?

d3.select("body").selectAll("div")
   .data(dataset)  // <-- 答えはここに潜んでいます。
   .enter()
   .append("div")
   .attr("class", "bar")
   .style("height", function(d) {
      var barHeight = d * 5;
      return barHeight + "px";
   });

もし data() メソッドに 10 個の値が与えられば、チェインされたメソッドは 10 回ループします。100 万個の値が与えられればループは 100 万回繰り返されます(少し辛抱が必要になります)。

これこそが data() の持つ力なのです。 ? どれほど多くのデータが与えられても、data() は与えられたデータの数だけ正確にループを繰り返します。ループのたびにチェインされたメソッドを実行し、メソッドが実行されるたびにその操作対象の値も更新されます。したがって d もループのあいだ常に、データセットの該当箇所を参照するのです。

今はこの説明が呑み込めなくても大丈夫です。すぐに理解できるようになります。できれば上記のサンプル HTML のソースコードを手元に保存し、データセットの値を変更して、それが棒グラフにどう反映するか見てみましょう。

重要なことは、データが視覚化を制御しているということです。決してその逆ではありません。

ランダムなデータ

時にはテスト目的で、あるいは純粋に好奇心から、ランダムにデータセットの値を生成するのも面白いものです。こちらがランダムにデータを生成するサンプルページです。棒グラフの高さの変化に注意してリロードしてみてください。

Bar chart with random values Bar chart with random values Bar chart with random values

ソースコードを見てみましょう。

var dataset = [];                          // 配列の宣言と初期化
   for (var i = 0; i < 25; i++) {          // ループを25回繰り返す
      var newNumber = Math.random() * 30;  // 0~30のランダムな数を生成
      dataset.push(newNumber);             // 生成した数を配列に追加
   }

ここでは D3 のメソッドは何も使っていません。純粋な JavaScript です。あまり詳細に立ち入らない範囲で、各行の解説をします。

  1. datasetという名前の空の配列を生成。
  2. for ループの初期化と実行(25回)。
  3. ループごとに 0 から 30 の間のランダムな数を新規に生成。
  4. 生成した数を dataset 配列に追加(push() は引数に指定した数値を配列の最後に追加する配列メソッド)。

JavaScript コンソールで console.log(dataset) とタイプし、配列の中身を見てみましょう。25個のランダムな数値がこんな感じで配列を埋め尽くしているはずです。

Random values in console

ご覧のように数値はすべて 14.793717765714973 のような decimal型(浮動小数点型)になっていて、最初のサンプルの 14 のような整数型ではありません。このサンプルに関しては decimal 型で問題はありませんが、もし整数型が必要な場合は JavaScript の Math.round() メソッドが使えます。具体的には、次のランダムな数を生成する行を

    var newNumber = Math.random() * 30;

次のように Math.round で囲みます。

    var newNumber = Math.round(Math.random() * 30);

サンプルです。再びコンソール画面を開いて、配列の中身が整数になっているか確認してみましょう。

Random integer values in console

いよいよ次章から SVG を使った視覚化に突入です。

次章はSVG の基本

インタラクティブ・データ・ヴィジュアライゼーション このチュートリアルの書籍版の翻訳がオライリー・ジャパンより発売されました。タイトルは『インタラクティブ・データビジュアライゼーション ―D3.jsによるデータの可視化』です(画像をクリックするとアマゾンに飛びます)。

このチュートリアルを大幅に拡充し、3倍近い内容となっています。JavaScriptを中心に基礎編をさらに詳しく解説し(書籍版第3章)、応用編としてモーション、イベント、レイアウト、地図の作成法、データのエクスポート(PDFやSVG等)の章が追加されています(同9章~13章)。アマゾンのページで目次を見ることができます。

本チュートリアルがわかりにくいと感じられた方、あるいは本チュートリアルを終え、さらに応用力を身につけたいと思われた方のどちらにもお勧めの内容となっています。

翻訳はコンピュータ・プログラミング関連書籍を多数翻訳されている長尾高弘氏です。