DC.js - लाइन चार्ट

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

लाइन चार्ट के तरीके

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

  • dc.stackMixin
  • dc.coordinateGridMixin

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

Dc.lineChart में उपरोक्त निर्दिष्ट मिश्रणों के सभी तरीकों के साथ-साथ लाइन चार्ट को ड्रा करने के अपने तरीके हैं। उन्हें इस प्रकार समझाया गया है।

पानी का छींटा [शैली]

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

dotRadius ([त्रिज्या])

इस पद्धति का उपयोग डेटा बिंदुओं पर प्रदर्शित डॉट्स के लिए त्रिज्या (पीएक्स में) प्राप्त करने या सेट करने के लिए किया जाता है। इसे निम्नानुसार परिभाषित किया गया है -

chart.dotRadius = function (radius) {
   if (!arguments.length) {
      return radius;
   }
};

प्रक्षेप ([i])

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

रेंडरएरिया ([क्षेत्र])

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

रेंडरडॉट पॉइंट्स ([विकल्प])

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

तनाव ([तनाव])

इस पद्धति का उपयोग खींची गई रेखाओं के लिए तनाव प्राप्त करने या सेट करने के लिए किया जाता है। यह 0 से 1 तक की सीमा में है।

xyTipsOn ([xyTipsOn])

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

एक लाइन चार्ट ड्रा करें

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

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

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

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

यहाँ, dc.linechart फ़ंक्शन को कंटेनर के साथ मैप किया गया है id line

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

से डेटा पढ़ें people.csv फ़ाइल -

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

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

id,name,gender,DOB,MaritalStatus,CreditCardType
1,Damaris,Female,1973-02-18,false,visa-electron
2,Barbe,Female,1969-04-10,true,americanexpress
3,Belia,Female,1960-04-16,false,maestro
4,Leoline,Female,1995-01-19,true,bankcard
5,Valentine,Female,1992-04-16,false,
6,Rosanne,Female,1985-01-05,true,bankcard
7,Shalna,Female,1956-11-01,false,jcb
8,Mordy,Male,1990-03-27,true,china-unionpay

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

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

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

var ageDimension = mycrossfilter.dimension(function(data) { 
    return ~~((Date.now() - new Date(data.DOB)) / (31557600000)) 
});

यहां, हमने क्रॉसफ़िल्टर डेटा से आयु को सौंपा।

~~ एक डबल बिटवेट ऑपरेटर नहीं है। यह के लिए एक तेजी से विकल्प के रूप में प्रयोग किया जाता हैMath.floor() समारोह।

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

var ageGroup = ageDimension.group().reduceCount();

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

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

chart
   .width(800)
   .height(300)
   .x(d3.scale.linear().domain([15,70]))
   .brushOn(false)
   .yAxisLabel("Count")
   .xAxisLabel("Age")
   .dimension(ageDimension)
   .group(ageGroup)
   .on('renderlet', function(chart) {
      chart.selectAll('rect').on('click', function(d) {
         console.log('click!', d);
      });
   });

chart.render();

यहाँ,

  • चार्ट की चौड़ाई 800 और ऊंचाई 300 है।

  • D3.scale.linear फ़ंक्शन का उपयोग निर्दिष्ट डोमेन रेंज [15, 70] के साथ एक नया रैखिक स्केल बनाने के लिए किया जाता है।

  • अगला, हम सेट करते हैं brushOn असत्य का मूल्य।

  • हम y- अक्ष लेबल के रूप में असाइन करते हैं count और एक्स-अक्ष लेबल के रूप में age

  • अंत में, समूह का उपयोग करके आयु ageGroup

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

पूर्ण कोड लिस्टिंग को निम्न कोड ब्लॉक में दिखाया गया है। एक वेब पेज बनाएँline.html और इसमें निम्नलिखित परिवर्तन जोड़ें।

<html>
   <head>
      <title>DC.js Line Chart Sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.min.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.lineChart('#line');

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

            var ageDimension = mycrossfilter.dimension(function(data) { 
               return ~~((Date.now() - new Date(data.DOB)) / (31557600000)) 
            });
            var ageGroup = ageDimension.group().reduceCount();

            chart
               .width(800)
               .height(300)
               .x(d3.scale.linear().domain([15,70]))
               .brushOn(false)
               .yAxisLabel("Count")
               .xAxisLabel("Age")
               .dimension(ageDimension)
               .group(ageGroup)
               .on('renderlet', function(chart) {
                  chart.selectAll('rect').on('click', function(d) {
                     console.log('click!', d);
                  });
               });
            chart.render();
         });
      </script>
   </body>
</html>

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