DC.js - แผนภูมิฟอง

แผนภูมิฟองใช้เพื่อแสดงข้อมูลสามมิติ เป็นรูปแบบของแผนภูมิกระจายซึ่งจุดข้อมูลจะถูกแทนที่ด้วยฟองอากาศ ขนาดฟองจะแสดงตามมิติข้อมูล ใช้แกนแนวนอนและแนวตั้งเป็นแกนค่า บทนี้จะอธิบายเกี่ยวกับแผนภูมิฟองโดยละเอียด

วิธีการแผนภูมิฟอง

ก่อนที่จะวาดแผนภูมิฟองเราควรทำความเข้าใจกับไฟล์ dc.bubbleChartคลาสและวิธีการ dc.bubbleChart ใช้ mixins เพื่อรับฟังก์ชั่นพื้นฐานของการวาดแผนภูมิซึ่งแสดงไว้ด้านล่าง -

  • dc.bubbleMixin
  • dc.coordinateGridMixin

แผนภาพคลาสที่สมบูรณ์ของ dc.bubbleChart มีดังนี้ -

dc.bubbleChart รับวิธีการทั้งหมดของ mixins ที่ระบุข้างต้น นอกจากนี้ยังมีวิธีการวาดแผนภูมิฟองซึ่งอธิบายไว้ด้านล่าง -

elasticRadius ([รัศมี])

วิธีนี้ใช้เพื่อเปิดใช้รัศมีฟอง หากเราปิดการใช้งานนี้รัศมีฟองจะถูกปรับขนาดโดยอัตโนมัติ

sortBubbleSize ([sortBubbleSize])

วิธีนี้ใช้เพื่อเปิดใช้งานคุณลักษณะการเรียงลำดับในฟองอากาศ ฟองอากาศขนาดเล็กจะมาก่อนแล้วจึงค่อยๆเพิ่มขึ้น

วาดแผนภูมิฟอง

ให้เราวาดแผนภูมิฟองใน DC ในการดำเนินการนี้เราต้องทำตามขั้นตอนด้านล่าง -

ขั้นตอนที่ 1: กำหนดตัวแปร

ให้เรากำหนดตัวแปรตามที่แสดงด้านล่าง -

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

ที่นี่ฟังก์ชัน bubbleChart ถูกจับคู่กับฟองรหัส

ขั้นตอนที่ 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 และรัศมี

  • เราระบุค่าป้ายกำกับรัศมีขั้นต่ำเป็น 1,000 ค่าแกน 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>

ตอนนี้ขอเบราว์เซอร์แล้วเราจะเห็นคำตอบต่อไปนี้