DC.js - พล็อตกระจาย

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

วิธีการแปลงกระจาย

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

dc.coordinateGridMixin

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

dc.scatterPlot รับเมธอดทั้งหมดของ mixins ที่ระบุข้างต้น มันมีวิธีการของตัวเองในการวาดพล็อตกระจายซึ่งอธิบายได้ดังนี้

customSymbol ([สัญลักษณ์])

วิธีนี้ใช้รับหรือตั้งค่าตัวสร้างสัญลักษณ์

emptySize ([ขนาด])

วิธีนี้ใช้เพื่อกำหนดหรือรับรัศมีสำหรับสัญลักษณ์เมื่อกลุ่มว่างเปล่า

excludedColor ([สี])

วิธีนี้ใช้เพื่อรับหรือตั้งค่าสีสำหรับสัญลักษณ์ที่แยกออกจากตัวกรองของแผนภูมิ

excludedOpacity ([ความทึบ])

วิธีนี้ใช้เพื่อรับหรือตั้งค่าความทึบของสัญลักษณ์ที่แยกออกจากตัวกรองของแผนภูมิ

excludedSize ([ขนาด])

ใช้เพื่อกำหนดหรือรับขนาดสำหรับสัญลักษณ์ที่แยกออกจากตัวกรองของแผนภูมิ

highlightedSize ([ขนาด])

ใช้เพื่อกำหนดหรือรับรัศมีสำหรับสัญลักษณ์ที่ไฮไลต์

สัญลักษณ์ ([ชนิด])

ใช้เพื่อรับหรือตั้งค่าประเภทสัญลักษณ์ที่ใช้สำหรับแต่ละจุด

วาดแผนภาพการกระจาย

ให้เราวาดพล็อตกระจายใน 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
ใช้ฟังก์ชัน d3.scale.linear () สำหรับทั้งแกน x และ y
ค่า brushOn ที่เปิดใช้งานเป็นเท็จ
จากนั้นกำหนดป้ายแกน x เป็นความสูงและป้ายแกน y เป็นน้ำหนัก
กำหนดขนาดสัญลักษณ์เป็นแปดและค่าช่องว่างภายในเป็น 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>

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