DC.js - แผนที่ความร้อน

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

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

dc.colorMixin
dc.marginMixin
dc.baseMixin

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

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

boxOnClick ([ตัวจัดการ])

วิธีนี้ใช้เพื่อรับหรือตั้งค่าตัวจัดการเมื่อมีการคลิกเซลล์แต่ละเซลล์ในแผนที่ความร้อน

cols ([cols])

วิธีนี้ใช้รับหรือตั้งค่าคีย์เพื่อสร้างคอลัมน์ของแผนที่ความร้อน

colsLabel ([ป้ายกำกับ])

วิธีนี้ใช้เพื่อรับหรือตั้งค่าป้ายชื่อคอลัมน์ซึ่งแสดงเป็นชื่อคอลัมน์ ในทำนองเดียวกันเราสามารถใช้ป้ายชื่อแถวได้เช่นกัน

แถว ([แถว])

วิธีนี้ใช้เพื่อรับหรือตั้งค่าที่ใช้ในการสร้างแถวของแผนที่ความร้อน

xAxisOnClick ([ตัวจัดการ])

วิธีนี้ใช้เพื่อรับหรือตั้งค่าตัวจัดการเมื่อคลิกขีดคอลัมน์ในแกน x

xBorderRadius ([เส้นขอบ])

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

วาดแผนที่ความร้อน

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

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

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

var chart = dc.heatMap('#heatmap');

ที่นี่ฟังก์ชั่นแผนที่ความร้อนถูกแมปกับ id heatmap

ขั้นตอนที่ 2: อ่านข้อมูล

อ่านข้อมูลจากไฟล์ howell1.csv ไฟล์ดังรูปด้านล่าง -

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

ที่นี่เราได้ใช้ไฟล์ 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) {
   x.age = Math.floor(x.age) + 1;
   x.heightRange = Math.floor(x.height / 10) + 1;
   x.weightRange = Math.floor(x.weight / 10) + 1;
   if(x.male == 1) {
      x.gender = 1;
   } else {
      x.gender = 2;
   }
});

ที่นี่เราได้ตรวจสอบเพศและกำหนดความสูงและช่วงความกว้างของแกน x โดยใช้สูตรด้านบน

ขั้นตอนที่ 4: ตั้งค่ามิติข้อมูล

คุณสามารถกำหนดขนาดโดยใช้การเข้ารหัสที่ระบุด้านล่าง -

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

หลังจากกำหนดมิติข้อมูลแล้วให้จัดกลุ่มเพศโดยใช้การเข้ารหัสที่ระบุด้านล่าง -

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

ขั้นตอนที่ 5: สร้างแผนภูมิ

ตอนนี้สร้างแผนที่ความร้อนโดยใช้การเข้ารหัสที่ระบุด้านล่าง -

chart
   .width(20 * 45 + 80)
   .height(2 * 45 + 40)
   .dimension(ageDimension)
   .group(ageGroup)
   .keyAccessor(function(d) { return +d.key[1]; })
   .valueAccessor(function(d) { return +d.key[0]; })
   .colorAccessor(function(d) { return +d.value; })
   .title(function(d) {
      return "Height Range:   " + ((d.key[1] - 1) * 10) + " - " + (d.key[1] * 10) + "cm\n" +
      "Gender:  " + (d.key[0] == 1 ? "Male" : "Female") + "\n" +
      "Count: " + (d.value) + " count";
   })
   .calculateColorDomain()

chart.render();
});

ที่นี่

เราได้กำหนดความกว้างของแผนภูมิเป็น 20 × 45 + 80 และความสูงเป็น 2 × 45 + 40
จากนั้นเราได้กำหนดมิติข้อมูลเพศและกลุ่ม
ตัวเข้าถึงคีย์และค่าจะส่งคืนคีย์และค่าจากแผนที่ความร้อน
เราต้องใช้ฟังก์ชัน colorAccessor () เพื่อคืนสี
สุดท้ายตั้งชื่อเรื่องและแสดงแผนภูมิ

ขั้นตอนที่ 6: ตัวอย่างการทำงาน

การเข้ารหัสที่สมบูรณ์มีดังนี้ สร้างเว็บเพจheatmap.html และเพิ่มการเปลี่ยนแปลงต่อไปนี้

<html>
   <head>
      <title>DC heat map 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 = "heatmap"></div>
      </div>

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

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

            people.forEach(function(x) {
               x.age = Math.floor(x.age) + 1;
               x.heightRange = Math.floor(x.height / 10) + 1;
               x.weightRange = Math.floor(x.weight / 10) + 1;
               if(x.male == 1) {
                  x.gender = 1;
               } else {
                  x.gender = 2;
               }
            });

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

            var ageGroup = ageDimension.group().reduceCount();
            chart
               .width(20 * 45 + 80)
               .height(2 * 45 + 40)
               .dimension(ageDimension)
               .group(ageGroup)
               .keyAccessor(function(d) { return +d.key[1]; })
               .valueAccessor(function(d) { return +d.key[0]; })
               .colorAccessor(function(d) { return +d.value; })
               .title(function(d) {
                  return "Height Range:   " + ((d.key[1] - 1) * 10) + " - " +
                  (d.key[1] * 10) + "cm\n" +
                  "Gender:  " + (d.key[0] == 1 ? "Male" : "Female") + "\n" +
                  "Count: " + (d.value) + " count";})
               .calculateColorDomain()

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

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