DC.js - बबल चार्ट

डेटा के तीन आयामों को प्रदर्शित करने के लिए एक बबल चार्ट का उपयोग किया जाता है। यह तितर बितर चार्ट की एक भिन्नता है, जिसमें डेटा बिंदुओं को बुलबुले के साथ बदल दिया जाता है। बबल आकार को डेटा आयाम के संबंध में दर्शाया गया है। यह मूल्य अक्षों के रूप में क्षैतिज और ऊर्ध्वाधर अक्षों का उपयोग करता है। यह अध्याय बबल चार्ट के बारे में विस्तार से बताता है।

बबल चार्ट तरीके

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

dc.bubbleMixin
dc.coordinateGridMixin

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

Dc.bubbleChart में उपर्युक्त मिश्रण के सभी तरीके मिलते हैं। बबल चार्ट को ड्रा करने के भी अपने तरीके हैं, जिन्हें नीचे समझाया गया है -

इलास्टेरियस ([त्रिज्या])

बुलबुला त्रिज्या को सक्षम करने के लिए इस विधि का उपयोग किया जाता है। यदि हम इसे अक्षम करते हैं, तो बुलबुला त्रिज्या स्वचालित रूप से फिर से व्यवस्थित हो जाएगी।

सॉर्टबसलाइज़ ([क्रमबद्ध करें])

इस विधि का उपयोग बुलबुले में छंटाई सुविधा को सक्षम करने के लिए किया जाता है। छोटे बुलबुले पहले आएंगे और फिर वे धीरे-धीरे बढ़ेंगे।

बबल चार्ट ड्रा करें

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

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

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

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

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

चरण 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) {
   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);
});

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

चरण 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 फ़ंक्शन का उपयोग x- अक्ष के लिए निर्दिष्ट डोमेन रेंज [0,240] के साथ एक नया रैखिक स्केल बनाने के लिए किया जाता है।
इसी तरह, हमने y और त्रिज्या रैखिक पैमाने मान निर्दिष्ट किए।
हमने न्यूनतम त्रिज्या लेबल मान क्रमशः 1000, x- अक्ष और y- अक्ष गद्दी मान के रूप में 200 और 100 के रूप में निर्दिष्ट किया है।
अगला, हमने 0.7 के रूप में एक अधिकतम बुलबुला सापेक्ष आकार निर्दिष्ट किया है।
क्षैतिज और ऊर्ध्वाधर ग्रिड लाइनों को रेंडर करें, फिर बुलबुला कुंजी और मूल्यों के लिए शीर्षक के साथ नक्शा करें।

चरण 7: टिकरफॉर्म सेट करें

नीचे दिए गए कोडिंग का उपयोग करके 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>

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