DC.js - श्रृंखला चार्ट

एक श्रृंखला डेटा का एक सेट है। आप डेटा के आधार पर चार्ट तैयार कर सकते हैं। यह अध्याय बताता है कि श्रृंखला चार्ट को कैसे आकर्षित किया जाए।

श्रृंखला चार्ट तरीके

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

  • dc.stackMixin

Dc.seriesChart का पूर्ण वर्ग आरेख इस प्रकार है -

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

चार्ट ([समारोह])

चार्ट फ़ंक्शन को प्राप्त करने या सेट करने के लिए इस पद्धति का उपयोग किया जाता है।

श्रृंखलाकारक ([अभिगमकर्ता])

इसका उपयोग प्रदर्शित श्रृंखला के लिए एक्सेसर फ़ंक्शन को प्राप्त करने या सेट करने के लिए किया जाता है।

सीरीज़ोर्ट ([सॉर्टफ़ंक्शन))

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

valueSort ([SortFunction])

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

एक श्रृंखला चार्ट ड्रा करें

आइए हम डीसी में एक श्रृंखला चार्ट बनाते हैं। इस उदाहरण में, हम लोगों के नाम का डेटासेट लेते हैं। नमूना डेटा फ़ाइल निम्नानुसार है -

id,name,gender,height,weight
1,Kinsley,Male,168,90
2,Dimitry,Male,177,61
3,Martica,Female,152,76
4,Brittni,Female,156,88
5,Phillip,Male,161,78
6,Sofie,Female,161,71
7,Avril,Female,163,55
8,Allistir,Male,161,75
9,Emelda,Female,154,66
10,Camella,Female,153,52

...............
...............

उपरोक्त नमूना फ़ाइल में कई रिकॉर्ड हैं। आप निम्न लिंक पर क्लिक करके फ़ाइल को डाउनलोड कर सकते हैं और इसे अपने डीसी स्थान पर सहेज सकते हैं।

people_hw.csv

अब, डीसी में एक श्रृंखला चार्ट बनाने के लिए निम्नलिखित चरणों का पालन करें।

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

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

var chart = dc.seriesChart('#line');

यहां, श्रृंखलाकार्ट फ़ंक्शन को id लाइन के साथ मैप किया जाता है।

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

लोगों से डेटा पढ़ें_hw.csv फ़ाइल -

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

यदि डेटा मौजूद नहीं है, तो यह एक त्रुटि देता है। अब, डेटा को एक क्रॉसफ़िल्टर को असाइन करें। एक बार जब हमें डेटा मिल जाता है, तो हम इसे एक-एक करके प्राप्त कर सकते हैं और नीचे दिए गए कोडिंग का उपयोग करके लिंग की जांच कर सकते हैं -

people.forEach(function(x) {
   if(x.gender == 'Male') {
      x.newdata = 1;
   } else {
      x.newdata = 2;
   }
});

चरण 3: एक आयु आयाम बनाएं

अब, आयु के लिए एक आयाम बनाएं जैसा कि नीचे दिखाया गया है -

var hwDimension = mycrossfilter.dimension(function(data) { 
   return [data.gender, data.height];
});

यहां, हमने आयाम सौंपा है और यह लिंग और ऊँचाई को लौटाता है। अब, इसका उपयोग करके समूह बनाएंreduceCount() फ़ंक्शन, जिसे नीचे परिभाषित किया गया है -

var hwGroup = hwDimension.group().reduceCount();

चरण 4: एक चार्ट बनाएं

अब, नीचे दिए गए कोडिंग का उपयोग करके एक श्रृंखला चार्ट बनाएं -

chart
   .width(800)
   .height(600)
   .chart(function(c) { 
      return dc.lineChart(c).interpolate('cardinal').evadeDomainFilter(true); 
   })
   
   .x(d3.scale.linear().domain([145,180]))
   .elasticY(true)
   .brushOn(false)
   .xAxisLabel("Height")
   .yAxisLabel("Count")
   .dimension(hwDimension)
   .group(hwGroup)
   .seriesAccessor(function(d) { return d.key[0];})
   .keyAccessor(function(d) { return +d.key[1]; })
   .valueAccessor(function(d) { return +d.value; })
   legend(dc.legend().x(350).y(500).itemHeight(13).gap(5).horizontal(1).legendWidth(120)\
      .itemWidth(60));

chart.render();

यहाँ,

  • चार्ट की चौड़ाई 800 और ऊंचाई 600 है।
  • D3.scale.linear () विधि का उपयोग करके, हम डोमेन मान निर्दिष्ट करते हैं।
  • SeriesAccessor फ़ंक्शन का उपयोग करते हुए, यह datum के लिए श्रृंखला प्रदर्शित करता है।
  • कुंजी और मूल्य अभिगमकर्ता श्रृंखला से कुंजी और मान लौटाता है।
  • किंवदंती का उपयोग ऊंचाई और चौड़ाई को जोड़ने के लिए किया जा सकता है।

चरण 5: काम करने का उदाहरण

पूर्ण कोड सूची इस प्रकार है। एक वेब पेज बनाएँline_series.html और इसमें निम्नलिखित परिवर्तन जोड़ें।

<html>
   <head>
      <title>Series 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 = "line"></div>
      </div>

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

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

            people.forEach(function(x) {
               if(x.gender == 'Male') {
                  x.newdata = 1;
               } else {
                  x.newdata = 2;
               }
            });

            var hwDimension = mycrossfilter.dimension(function(data) { 
               return [data.gender, data.height];
            });
            var hwGroup = hwDimension.group().reduceCount();

            chart
               .width(800)
               .height(600)
               .chart(function(c) { 
                  return dc.lineChart(c).interpolate('cardinal').evadeDomainFilter(true);
               })
               .x(d3.scale.linear().domain([145,180]))
               .elasticY(true)
               .brushOn(false)
               .xAxisLabel("Height")
               .yAxisLabel("Count")
               .dimension(hwDimension)
               .group(hwGroup)
               .seriesAccessor(function(d) { return d.key[0];})
               .keyAccessor(function(d) { return +d.key[1]; })
               .valueAccessor(function(d) { return +d.value; })
               .legend(dc.legend().x(350).y(500).itemHeight(13).gap(5).horizontal(1)
                  .legendWidth(120).itemWidth(60));

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

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