DC.js - 熱力圖

熱力圖是資料以地圖形式的圖形表示，其中資料值以顏色表示。本章詳細解釋了熱力圖。

在繼續繪製熱力圖之前，我們應該瞭解dc.heatMap類及其方法。dc.heatMap 使用 mixins 來獲得繪製圖表的基本功能，這些功能列在下面：

dc.colorMixin
dc.marginMixin
dc.baseMixin

dc.heatMap 的完整類圖如下所示：

dc.heatMap 獲取上述指定 mixins 的所有方法。它有自己的方法來繪製熱力圖，這些方法將在下面解釋：

boxOnClick( [handler])

此方法用於獲取或設定處理程式，當在熱力圖中單擊單個單元格時。

cols( [cols])

此方法用於獲取或設定用於建立熱力圖列的鍵。

colsLabel( [label])

此方法用於獲取或設定列標籤，它表示為列名。類似地，我們也可以執行行標籤。

rows( [rows])

此方法用於獲取或設定用於建立熱力圖行的值。

xAxisOnClick( [handler])

此方法用於獲取或設定處理程式，當在 x 軸上單擊列刻度時。

xBorderRadius( [border])

此方法用於設定 X 邊界半徑。如果將值設定為 0，則您將獲得完整的矩形。

繪製熱力圖

讓我們在 DC 中繪製一個熱力圖。為此，我們需要按照以下步驟操作：

步驟 1：定義變數

讓我們定義一個變數，如下所示：

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

這裡，heatMap 函式對映到 id heatmap。

步驟 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：工作示例

完整的程式碼如下所示。建立一個網頁heatmap.html並向其中新增以下更改。

<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>

現在，請求瀏覽器，我們將看到以下響應。

列印頁面