DC.js - 散點圖

散點圖是一種數學圖表。它使用笛卡爾座標來顯示一組資料中通常兩個變數的值。資料顯示為一系列點，這些點可能是有顏色的。本章詳細解釋了散點圖。

散點圖方法

在繼續繪製散點圖之前，我們應該瞭解dc.scatterPlot類及其方法。dc.scatterPlot 使用 mixins 來獲得繪製圖表的基本功能。dc.scatterPlot 使用的 mixin 如下所示：

dc.coordinateGridMixin

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

dc.scatterPlot 獲取上述指定 mixins 的所有方法。它有自己的方法來繪製散點圖，解釋如下。

customSymbol( [symbol])

此方法用於獲取或設定符號生成器。

emptySize( [size])

此方法用於設定或獲取組為空時符號的半徑。

excludedColor( [color])

此方法用於獲取或設定從圖表過濾器中排除的符號的顏色。

excludedOpacity( [opacity])

此方法用於獲取或設定從圖表過濾器中排除的符號的不透明度。

excludedSize( [size])

它用於設定或獲取從圖表過濾器中排除的符號的大小。

highlightedSize( [size])

它用於設定或獲取突出顯示的符號的半徑。

symbol( [type])

它用於獲取或設定用於每個點的符號型別。

繪製散點圖

讓我們在 DC 中繪製一個散點圖。在這個例子中，讓我們取一個名為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

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

以上示例檔案包含許多記錄。我們可以透過點選以下連結並將檔案儲存到我們的 DC 位置來下載檔案。

howell1.csv

現在，讓我們按照後續步驟在 DC 中繪製散點圖。

步驟 1：定義變數

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

var chart = dc.scatterPlot('#scatter');

這裡，scatterplot() 函式與 id scatter 對映。

步驟 2：讀取資料

從 howell1.csv 檔案讀取資料，如下所示：

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

如果資料不存在，則返回錯誤。稍後，將資料分配給 crossfilter。

步驟 3：獲取記錄

讓我們使用下面給出的程式碼獲取記錄：

people.forEach(function(x) {
   if(x.male == 1) {
      x.gender = "Male";
   } else {
      x.gender = "Female";
   }
});

這裡，我們檢查了性別。

步驟 4：設定維度

您可以使用下面給出的程式碼設定維度：

var hwDimension = mycrossfilter.dimension(function(data) { 
   return [Math.floor(data.height), Math.floor(data.weight)];
});

分配維度後，使用下面給出的程式碼對性別進行分組：

var hwGroup = hwDimension.group().reduceCount();

步驟 5：生成圖表

現在，使用下面給出的程式碼生成熱力圖：

chart
   .width(800)
   .height(600)
   .x(d3.scale.linear().domain([0,180]))
   .y(d3.scale.linear().domain([0,100]))
   .brushOn(false)
   .xAxisLabel("Height")
   .yAxisLabel("Weight")
   .symbolSize(8)
   .clipPadding(10)
   .dimension(hwDimension)
   .group(hwGroup);

這裡，

我們將圖表寬度設定為 800，高度設定為 600。
對 x 軸和 y 軸應用了 d3.scale.linear() 函式。
將 brushOn 值啟用為 false。
然後，將 x 軸標籤設定為高度，將 y 軸標籤設定為體重。
將符號大小設定為 8，填充值設定為 10。
最後，對資料進行分組並渲染圖表。

步驟 6：工作示例

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

<html>
   <head>
   <title>Scatter plot 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 = "scatter"></div>
      </div>

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

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

            people.forEach(function(x) {
               if(x.male == 1) {
                  x.gender = "Male";
               } else {
                  x.gender = "Female";
               }
            });

            var hwDimension = mycrossfilter.dimension(function(data) { 
               return [Math.floor(data.height), Math.floor(data.weight)];
            });
            var hwGroup = hwDimension.group().reduceCount();

            chart
               .width(800)
               .height(600)
               .x(d3.scale.linear().domain([0,180]))
               .y(d3.scale.linear().domain([0,100]))
               .brushOn(false)
               .xAxisLabel("Height")
               .yAxisLabel("Weight")
               .symbolSize(8)
               .clipPadding(10)
               .dimension(hwDimension)
               .group(hwGroup);

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

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

列印頁面