DC.js - हीट मैप

हीट मैप एक मानचित्र के रूप में डेटा का एक चित्रमय प्रतिनिधित्व है, जिसमें डेटा मूल्यों को रंगों के रूप में दर्शाया जाता है। यह अध्याय गर्मी के नक्शे के बारे में विस्तार से बताता है।

हीट मैप खींचने के लिए आगे बढ़ने से पहले, हमें यह समझना चाहिए dc.heatMapक्लास और उसके तरीके। Dc.heatMap एक चार्ट बनाने की मूल कार्यक्षमता प्राप्त करने के लिए मिश्रण का उपयोग करता है, जो नीचे सूचीबद्ध हैं -

  • dc.colorMixin
  • dc.marginMixin
  • dc.baseMixin

Dc.heatMap का पूर्ण वर्ग आरेख निम्नानुसार है -

Dc.heatMap उपरोक्त निर्दिष्ट मिश्रणों के सभी तरीकों को प्राप्त करता है। ऊष्मा मानचित्र को खींचने की इसकी अपनी विधियाँ हैं, जिन्हें नीचे समझाया गया है -

boxOnClick ([हैंडलर])

इस विधि का उपयोग हैंडलर को प्राप्त करने या सेट करने के लिए किया जाता है, जब किसी व्यक्तिगत सेल को हीटमैप में क्लिक किया जाता है।

कर्नल ([कर्नल))

इस पद्धति का उपयोग हीटमैप के कॉलम बनाने के लिए कुंजी प्राप्त करने या सेट करने के लिए किया जाता है।

colsLabel ([लेबल])

इस पद्धति का उपयोग कॉलम लेबल प्राप्त करने या सेट करने के लिए किया जाता है, जिसे स्तंभ नाम के रूप में दर्शाया जाता है। इसी तरह, हम एक पंक्ति लेबल भी कर सकते हैं।

पंक्तियाँ ([पंक्तियाँ)]

इस पद्धति का उपयोग हीटमैप की पंक्तियों को बनाने के लिए उपयोग किए जाने वाले मूल्यों को प्राप्त करने या सेट करने के लिए किया जाता है।

xAxisOnClick ([हैंडलर])

इस पद्धति का उपयोग हैंडलर को प्राप्त करने या सेट करने के लिए किया जाता है, जब एक्स-अक्ष में एक कॉलम टिक पर क्लिक किया जाता है।

xBorderRadius ([सीमा])

इस विधि का उपयोग एक्स सीमा त्रिज्या को सेट करने के लिए किया जाता है। यदि मान 0 पर सेट है, तो आपको पूर्ण आयताकार मिलेंगे।

हीटमैप ड्रा करें

आइए हम डीसी में एक हीटमैप तैयार करते हैं। ऐसा करने के लिए, हमें नीचे दिए गए चरणों का पालन करना होगा -

चरण 1: एक चर को परिभाषित करें

नीचे दिखाए गए अनुसार एक चर को परिभाषित करते हैं -

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

यहाँ, हीटमैप फ़ंक्शन को आईडी हीटमैप के साथ मैप किया जाता है।

चरण 2: डेटा पढ़ें

से डेटा पढ़ें howell1.csv नीचे दिखाए अनुसार फ़ाइल -

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

यहां, हमने उसी हॉवेल 1। एससीवी फ़ाइल का उपयोग किया है और यह नीचे दिखाए गए अनुसार दिखता है -

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

यहां, हमने लिंग की जांच की है और उपरोक्त सूत्र का उपयोग करके एक्स-अक्ष की ऊंचाई और चौड़ाई सीमा निर्धारित की है।

चरण 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>

अब, ब्राउज़र का अनुरोध करें और हम निम्नलिखित प्रतिक्रिया देखेंगे।