DC.js - Biểu đồ bong bóng

Biểu đồ bong bóng được sử dụng để hiển thị ba chiều của dữ liệu. Đây là một biến thể của biểu đồ phân tán, trong đó các điểm dữ liệu được thay thế bằng bong bóng. Kích thước bong bóng được biểu thị theo thứ nguyên dữ liệu. Nó sử dụng trục ngang và trục dọc làm trục giá trị. Chương này giải thích chi tiết về biểu đồ bong bóng.

Phương pháp biểu đồ bong bóng

Trước khi chuyển sang vẽ biểu đồ bong bóng, chúng ta nên hiểu dc.bubbleChartlớp và các phương thức của nó. Dc.bubbleChart sử dụng các mixin để có được chức năng cơ bản là vẽ biểu đồ, được liệt kê bên dưới:

dc.bubbleMixin
dc.coordinateGridMixin

Sơ đồ lớp hoàn chỉnh của dc.bubbleChart như sau:

Dc.bubbleChart nhận tất cả các phương thức của các mixin được chỉ định ở trên. Nó cũng có các phương pháp riêng để vẽ biểu đồ bong bóng, được giải thích bên dưới:

đàn hồi ([bán kính])

Phương pháp này được sử dụng để kích hoạt bán kính bong bóng. Nếu chúng tôi vô hiệu hóa điều này, thì bán kính bong bóng sẽ tự động được thay đổi tỷ lệ.

sortBubbleSize ([sortBubbleSize])

Phương pháp này được sử dụng để kích hoạt tính năng sắp xếp trong bong bóng. Bong bóng nhỏ hơn sẽ đến trước và sau đó chúng tăng dần.

Vẽ biểu đồ bong bóng

Hãy để chúng tôi vẽ biểu đồ bong bóng ở DC. Để thực hiện việc này, chúng ta cần làm theo các bước dưới đây:

Bước 1: Xác định một biến

Hãy để chúng tôi xác định một biến như hình dưới đây:

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

Ở đây, hàm bubbleChart được ánh xạ với bong bóng id.

Bước 2: Đọc dữ liệu

Đọc dữ liệu từ howell1.csv tập tin.

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

Nếu dữ liệu không có, thì nó sẽ trả về một lỗi. Bây giờ, gán dữ liệu cho một bộ lọc chéo. Ở đây, chúng tôi đã tải xuống tệp howell1.csv. Tệp tương tự sẽ được sử dụng ở đây và nó sẽ trông tương tự như khối mã sau đây.

"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

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

Bước 3: Tìm nạp hồ sơ

Hãy để chúng tôi tìm nạp các bản ghi bằng cách sử dụng mã được cung cấp bên dưới -

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);
});

Ở đây, chúng tôi đã kiểm tra giới tính và đã thiết lập phạm vi chiều cao và chiều rộng trục x bằng công thức trên.

Bước 4: Đặt thứ nguyên

Chúng tôi có thể đặt thứ nguyên bằng cách sử dụng mã được cung cấp bên dưới -

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

Sau khi thứ nguyên đã được chỉ định, hãy nhóm giới tính bằng cách sử dụng mã được cung cấp bên dưới -

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

Bước 5: Tạo biểu đồ

Bây giờ, tạo một biểu đồ bong bóng bằng cách sử dụng mã được cung cấp bên dưới:

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);
   })

Đây,

Chúng tôi đã chỉ định chiều rộng biểu đồ là 1200 và chiều cao là 400.
Tiếp theo, chúng tôi đã chỉ định các điểm ký quỹ.
Sau đó, chúng tôi đã chỉ định thứ nguyên và nhóm giới tính.
Trình truy cập khóa và giá trị trả về khóa và giá trị từ các bong bóng.
Tính toán hàm truy cập giá trị bán kính bằng công thức - Math.floor((p.value / 10)) + 1.

Bước 6: Vẽ bong bóng

Bây giờ, hãy vẽ các bong bóng bằng cách sử dụng mã dưới đây -

.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;
});

Đây,

Hàm d3.scale.linear được sử dụng để xây dựng một tỷ lệ tuyến tính mới với phạm vi miền được chỉ định [0,240] cho trục x.
Tương tự, chúng tôi đã gán các giá trị tỷ lệ tuyến tính y và bán kính.
Chúng tôi đã chỉ định giá trị nhãn bán kính tối thiểu là 1000, giá trị đệm trục x và trục y lần lượt là 200 và 100.
Tiếp theo, chúng tôi đã chỉ định giá trị kích thước tương đối của bong bóng tối đa là 0,7.
Hiển thị các đường lưới ngang và dọc, sau đó lập bản đồ với tiêu đề cho khóa và giá trị bong bóng.

Bước 7: Đặt TickFormat

Đặt định dạng vé cho trục x và trục y bằng cách sử dụng mã được cung cấp bên dưới:

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

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

Cuối cùng, hiển thị biểu đồ bằng cách sử dụng chart.render() phương pháp.

Bước 8: Ví dụ làm việc

Danh sách mã hoàn chỉnh được hiển thị trong khối mã sau. Tạo một trang webbubble.html và thêm các thay đổi sau vào nó.

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

Bây giờ, hãy yêu cầu trình duyệt và chúng tôi sẽ thấy phản hồi sau.