DC.js-ヒートマップ

ヒートマップは、データをマップ形式でグラフィカルに表現したもので、データ値は色で表されます。この章では、ヒートマップについて詳しく説明します。

ヒートマップの描画に進む前に、 dc.heatMap クラスとそのメソッドを理解する必要があります。 dc.heatMapはミックスインを使用して、以下にリストされているチャートを描画する基本的な機能を取得します-

dc.colorMixin
dc.marginMixin
dc.baseMixin

dc.heatMapの完全なクラス図は次のとおりです-

ヒートマップ

dc.heatMapは、上記で指定されたミックスインのすべてのメソッドを取得します。以下に説明するヒートマップを描画する独自のメソッドがあります-

boxOnClick（[handler]）

このメソッドは、ヒートマップで個々のセルがクリックされたときに、ハンドラーを取得または設定するために使用されます。

cols（[cols]）

このメソッドは、キーを取得または設定してヒートマップの列を作成するために使用されます。

colsLabel（[ラベル]）

このメソッドは、列名として表される列ラベルを取得または設定するために使用されます。同様に、行ラベルも実行できます。

行（[行]）

このメソッドは、ヒートマップの行の作成に使用される値を取得または設定するために使用されます。

xAxisOnClick（[ハンドラー]）

このメソッドは、x軸で列の目盛りがクリックされたときに、ハンドラーを取得または設定するために使用されます。

xBorderRadius（[border]）

このメソッドは、X境界の半径を設定するために使用されます。値が0に設定されている場合、完全な長方形が表示されます。

ヒートマップを描く

DCでヒートマップを描きましょう。これを行うには、以下の手順に従う必要があります-

ステップ1：変数を定義する

以下に示すように変数を定義しましょう-

var chart = dc.heatMap('#heatmap');

ここで、heatMap関数はidヒートマップにマップされます。

ステップ2：データを読む

以下に示すように、 howell1.csv ファイルからデータを読み取ります-

d3.csv("data/howell1.csv", function(errors, people) {
   var mycrossfilter = crossfilter(people);
}

ここでは、同じhowell1.csvファイルを使用しており、以下に示すように見えます-

"height","weight","age","male"
151.765,47.8256065,63,1
139.7,36.4858065,63,0
136.525,31.864838,65,0
156.845,53.0419145,41,1
145.415,41.276872,51,0
163.83,62.992589,35,1
149.225,38.2434755,32,0
168.91,55.4799715,27,1
147.955,34.869885,19,0
165.1,54.487739,54,1
154.305,49.89512,47,0

......................
......................

ステップ3：レコードを取得する

以下に示すコーディングを使用してレコードをフェッチしましょう-

people.forEach(function(x) {
   x.age = Math.floor(x.age) + 1;
   x.heightRange = Math.floor(x.height/10) + 1;
   x.weightRange = Math.floor(x.weight/10) + 1;
   if(x.male == 1) {
      x.gender = 1;
   } else {
      x.gender = 2;
   }
});

ここでは、上記の式を使用して、性別を確認し、x軸の高さと幅の範囲を設定しました。

ステップ4：寸法を設定する

以下に示すコーディングを使用して次元を設定できます-

var ageDimension = mycrossfilter.dimension(function(data) {
   return [+data.gender, +data.heightRange];
});

ディメンションが割り当てられた後、以下に示すコーディングを使用して性別をグループ化します-

var genderGroup = genderDimension.group().reduceCount();

ステップ5：チャートを生成する

次に、以下に示すコーディングを使用してヒートマップを生成します-

chart
   .width(20 *45 + 80)
   .height(2* 45 + 40)
   .dimension(ageDimension)
   .group(ageGroup)
   .keyAccessor(function(d) { return +d.key[1]; })
   .valueAccessor(function(d) { return +d.key[0]; })
   .colorAccessor(function(d) { return +d.value; })
   .title(function(d) {
      return "Height Range:   " + ((d.key[1] - 1) *10) + " - " + (d.key[1]* 10) + "cm\n" +
      "Gender:  " + (d.key[0] == 1 ? "Male" : "Female") + "\n" +
      "Count: " + (d.value) + " count";
   })
   .calculateColorDomain()

chart.render();
});

ここに、

グラフの幅を20×45 + 80に、高さを2×45 + 40に割り当てました。
次に、性別のディメンションとグループを割り当てました。
キーと値のアクセサーは、ヒートマップからキーと値を返します。
色を返すには、colorAccessor（）関数を使用する必要があります。
最後に、タイトルを設定し、チャートをレンダリングします。

ステップ6：作業例

完全なコーディングは次のとおりです。 Webページ heatmapl を作成し、次の変更を加えます。

<html>
   <head>
      <title>DC heat map Sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
      <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>

      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>

   <body>
      <div>
         <div id = "heatmap"></div>
      </div>

      <script language = "javascript">
         var chart = dc.heatMap('#heatmap');

         d3.csv("data/howell1.csv", function(errors, people) {
            var mycrossfilter = crossfilter(people);

            people.forEach(function(x) {
               x.age = Math.floor(x.age) + 1;
               x.heightRange = Math.floor(x.height/10) + 1;
               x.weightRange = Math.floor(x.weight/10) + 1;
               if(x.male == 1) {
                  x.gender = 1;
               } else {
                  x.gender = 2;
               }
            });

            var ageDimension = mycrossfilter.dimension(function(data) {
               return [+data.gender, +data.heightRange];
            });

            var ageGroup = ageDimension.group().reduceCount();
            chart
               .width(20 *45 + 80)
               .height(2* 45 + 40)
               .dimension(ageDimension)
               .group(ageGroup)
               .keyAccessor(function(d) { return +d.key[1]; })
               .valueAccessor(function(d) { return +d.key[0]; })
               .colorAccessor(function(d) { return +d.value; })
               .title(function(d) {
                  return "Height Range:   " + ((d.key[1] - 1) *10) + " - " +
                  (d.key[1]* 10) + "cm\n" +
                  "Gender:  " + (d.key[0] == 1 ? "Male" : "Female") + "\n" +
                  "Count: " + (d.value) + " count";})
               .calculateColorDomain()

            chart.render();
         });
      </script>
   </body>
</html>

ここで、ブラウザをリクエストすると、次のレスポンスが表示されます。

Dcjs-heat-map