DC.js - 氣泡圖

上一頁
下一頁

氣泡圖用於顯示資料的三個維度。它是散點圖的一種變體，其中資料點被氣泡代替。氣泡的大小根據資料維度表示。它使用水平和垂直軸作為數值軸。本章詳細解釋了氣泡圖。

氣泡圖方法

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

  • dc.bubbleMixin
  • dc.coordinateGridMixin

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

Bubble Chart Methods

dc.bubbleChart獲取上述mixins的所有方法。它也有自己繪製氣泡圖的方法，解釋如下：

elasticRadius( [radius])

此方法用於啟用氣泡半徑。如果我們停用此功能，則氣泡半徑將自動重新縮放。

sortBubbleSize( [sortBubbleSize])

此方法用於啟用氣泡中的排序功能。較小的氣泡將首先出現，然後逐漸增大。

繪製氣泡圖

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

步驟 1：定義變數

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

var chart = dc.bubbleChart('#bubble');

這裡，bubbleChart函式與id bubble對映。

步驟 2：讀取資料

從howell1.csv檔案讀取資料。

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

如果資料不存在，則返回錯誤。現在，將資料分配給crossfilter。這裡，我們已經下載了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) {
   if(x.male == 1) {
      x.gender = "Male";
   } else {
      x.gender = "Female";
   }
   x.heightRange = (((Math.floor(x.height / 10)) + 1) * 10);
   x.weightRange = (((Math.floor(x.weight / 10)) + 1) * 10);
});

在這裡，我們檢查了性別，並使用上述公式設定了x軸高度和寬度範圍。

步驟 4：設定維度

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

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

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

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

步驟 5：生成圖表

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

chart.width(1200)
   .height(400)
   .margins({top: 10, right: 50, bottom: 30, left: 60})
   .dimension(genderDimension)
   .group(genderGroup)
   .keyAccessor(function (p) {
      return p.key[1];
   })
   
   .valueAccessor(function (p) {
      return p.key[2];
   })
   
   .radiusValueAccessor(function (p) {
      return (Math.floor((p.value / 10)) + 1);
   })

這裡：

  • 我們將圖表寬度設定為1200，高度設定為400。

  • 接下來，我們指定了邊距點。

  • 然後我們分配了性別維度和分組。

  • 鍵和值訪問器從氣泡返回鍵和值。

  • 使用公式Math.floor((p.value / 10)) + 1計算半徑值訪問器函式。

步驟 6：繪製氣泡

現在，使用下面給出的程式碼繪製氣泡：

.x(d3.scale.linear().domain([0, 240]))
.y(d3.scale.linear().domain([-40, 120]))
.r(d3.scale.linear().domain([0, 20]))
.minRadiusWithLabel(1000)
.yAxisPadding(100)
.xAxisPadding(200)
.maxBubbleRelativeSize(0.07)
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true)
.renderLabel(true)
.renderTitle(true)
.title(function (p) {
   return p.key[0]
   + "\n"
   + "Height: " + p.key[1] + " cm\n"
   + "Weight: " + p.key[2] + " kg\n"
   + "Count: " + p.value;
});

這裡：

  • d3.scale.linear函式用於使用指定的域範圍[0,240]為x軸構造一個新的線性比例。

  • 類似地，我們分配了y和半徑線性比例值。

  • 我們將最小半徑標籤值指定為1000，x軸和y軸填充值分別為200和100。

  • 接下來，我們指定了最大氣泡相對大小值為0.7。

  • 渲染水平和垂直網格線，然後對映氣泡鍵和值的標題。

步驟 7：設定TickFormat

使用下面給出的程式碼設定x軸和y軸的刻度格式：

chart.yAxis().tickFormat(function (s) {
   return s + " cm";
});

chart.xAxis().tickFormat(function (s) {
   return s + " kg";
});

最後，使用chart.render()方法渲染圖表。

步驟 8：工作示例

完整的程式碼清單如下面的程式碼塊所示。建立一個網頁bubble.html並新增以下更改。

<html>
   <head>
      <title>Bubble chart 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 = "bubble"></div>
      </div>

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

         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";
               }
               x.heightRange = (((Math.floor(x.height / 10)) + 1) * 10);
               x.weightRange = (((Math.floor(x.weight / 10)) + 1) * 10);
            });

            var genderDimension = mycrossfilter.dimension(function(data) {
               return [ data.gender, data.heightRange, data.weightRange ];
            });
            var genderGroup = genderDimension.group().reduceCount();

            chart.width(1200)
               .height(400)
               .margins({top: 10, right: 50, bottom: 30, left: 60})
               .dimension(genderDimension)
               .group(genderGroup)
               .keyAccessor(function (p) {
                  return p.key[1];
               })
               
               .valueAccessor(function (p) {
                  return p.key[2];
               })
               
               .radiusValueAccessor(function (p) {
                  return (Math.floor((p.value / 10)) + 1);
               })
               
               .x(d3.scale.linear().domain([0, 240]))
               .y(d3.scale.linear().domain([-40, 120]))
               .r(d3.scale.linear().domain([0, 20]))
               .minRadiusWithLabel(1000)
               .yAxisPadding(100)
               .xAxisPadding(200)
               .maxBubbleRelativeSize(0.07)
               .renderHorizontalGridLines(true)
               .renderVerticalGridLines(true)
               .renderLabel(true)
               .renderTitle(true)
               .title(function (p) {
                  return p.key[0]
                  + "\n"
                  + "Height: " + p.key[1] + " cm\n"
                  + "Weight: " + p.key[2] + " kg\n"
                  + "Count: " + p.value;
               });
               
            chart.yAxis().tickFormat(function (s) {
               return s + " cm";
            });
               
            chart.xAxis().tickFormat(function (s) {
               return s + " kg";
            });

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

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

列印頁面
上一頁
下一頁
廣告