DC.js - डेटा टेबल

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

डेटा टेबल के तरीके

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

• dc.baseMixin

DddataTable में इस मिक्सिन के सभी तरीके मिलते हैं और डेटा टेबल को ड्रा करने के लिए अपने तरीके हैं, जिन्हें निम्नानुसार समझाया गया है।

शुरुआत (टुकड़ा)

इस पद्धति का उपयोग आरंभ स्लाइस के सूचकांक को प्राप्त करने या निर्धारित करने के लिए किया जाता है। यह पद्धति तब लागू होती है जब पृष्ठांकन लागू किया जाता है।

इसी तरह, आप एंडलिस () फ़ंक्शन भी कर सकते हैं।

कॉलम ([कॉलम])

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

chart.columns([
   function(d) { return d.mark; },
   function(d) { return d.low; },
   function(d) { return d.high; },
   function(d) { return numberFormat(d.high - d.low); },
   function(d) { return d.volume; }
]);

यहाँ, d डेटा सेट में एक पंक्ति का प्रतिनिधित्व करता है। हम डेटा तालिका में कॉलम प्रदर्शित करने के लिए HTML का उपयोग कर सकते हैं।

समूह (groupFunction)

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

आदेश ([आदेश])

इसका उपयोग ऑर्डर फंक्शन को सॉर्ट करने के लिए किया जाता है। यदि क्रम आरोही है, तो डेटा लाने के लिए आयाम () .bottom () का उपयोग करेगा, अन्यथा यह आयाम () शीर्ष () का उपयोग करेगा।

डेटा टेबल उदाहरण

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

चरण 1: शैलियों को जोड़ें

आइए नीचे दिए गए कोडिंग का उपयोग करके CSS में शैलियों को जोड़ते हैं -

.dc-chart { font-size: 12px; }
.dc-table-group { padding-left: 10px; font-size: 14px; font-weight: bold; }
.dc-table-column { padding-left: 10px; font-size: 12px; font-weight: normal; }

यहां, हमने चार्ट, टेबल-समूह और ग्रिड-कॉलम के लिए शैलियों को सौंपा है।

चरण 2: एक चर बनाएं

जैसा कि नीचे दिखाया गया है, हम डीसी में एक चर बनाते हैं -

var barChart = dc.barChart('#line'); // 
var countChart = dc.dataCount("#mystats");
var tableChart = dc.dataTable("#mytable");

यहाँ, हमने एक BarChart वैरिएबल id को लाइन में असाइन किया है, countChart id मिस्ट्री है और tableChart id माईटेबल है।

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

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

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

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

यह इस प्रकार दिखता है -

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

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

चरण 4: आयाम सेट करें

आप नीचे दिए गए कोडिंग का उपयोग करके आयाम सेट कर सकते हैं -

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

आयाम दिए जाने के बाद, नीचे दिए गए कोडिंग का उपयोग करके समूह को आयु दें -

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

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

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

barChart
   .width(400)
   .height(200)
   .x(d3.scale.linear().domain([15,70]))
   .yAxisLabel("Count")
   .xAxisLabel("Age")
   .elasticY(true)
   .elasticX(true)
   .dimension(ageDimension)
   .group(ageGroup);

यहाँ,

• हमने चार्ट की चौड़ाई 400 और ऊंचाई 200 बताई है।
• इसके बाद, हमने डोमेन रेंज को [15,70] के रूप में निर्दिष्ट किया है।
• हमने उम्र के रूप में x- अक्ष लेबल और गणना के रूप में y- अक्ष लेबल निर्धारित किया है।
• हमने लोच और एक्स फ़ंक्शन को सच के रूप में निर्दिष्ट किया है।

चरण 6: डेटा तालिका बनाएं

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

countChart
   .dimension(mycrossfilter)
   .group(mycrossfilter.groupAll());

tableChart
   .dimension(ageDimension)
   .group(function (data) {
      return ~~((Date.now() - new Date(data.DOB)) / (31557600000));
   })

यहां, हमने आयु आयाम निर्दिष्ट किया है और डेटा समूह।

चरण 7: तालिका रेंडर करें

अब, नीचे दिए गए कोडिंग का उपयोग करके ग्रिड को प्रस्तुत करें -

.size(Infinity)
   .columns(['name', 'DOB'])
   .sortBy(function (d) {
      return d.value;
   })
   .order(d3.ascending);

barChart.render();
countChart.render();
tableChart.render();

यहां, हमने DOB का उपयोग करते हुए कॉलम को सॉर्ट किया है और रिकॉर्ड को सॉर्ट किया है।

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

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

<html>
   <head>
      <title>DC datatable sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
      <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>
   
      <style>
         .dc-chart { font-size: 12px; }
         .dc-table-group { padding-left: 10px; font-size: 14px; font-weight: bold; }
         .dc-table-column { padding-left: 10px; font-size: 12px; font-weight: normal; }
      </style>

      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>
   
   <body>
      <div>
         <div style = "width: 600px;">
            <div id = "mystats" class = "dc-data-count" style = "float: right">
               <span class = "filter-count"></span> selected out of <span
               class = "total-count"></span> | <a href = "javascript:dc.filterAll();
               dc.renderAll();">Reset All</a>
            </div>
         </div>

         <div style = "clear: both; padding-top: 20px;">
            <div>
               <div id = "line"></div>
            </div>
         </div>

         <div style = "clear: both">
            <div id = "mytable"></div>
         </div>
      </div>

      <script language = "javascript">
         var barChart = dc.barChart('#line'); // , 'myChartGroup');
         var countChart = dc.dataCount("#mystats");
         var tableChart = dc.dataTable("#mytable");

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

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

            barChart
               .width(400)
               .height(200)
               .x(d3.scale.linear().domain([15,70]))
               .yAxisLabel("Count")
               .xAxisLabel("Age")
               .elasticY(true)
               .elasticX(true)
               .dimension(ageDimension)
               .group(ageGroup);

            countChart
               .dimension(mycrossfilter)
               .group(mycrossfilter.groupAll());

            tableChart
               .dimension(ageDimension)
               .group(function (data) {
                  return ~~((Date.now() - new Date(data.DOB)) / (31557600000));
               })
               .size(Infinity)
               .columns(['name', 'DOB'])
               .sortBy(function (d) {
                  return d.value;
               })
               .order(d3.ascending);

            barChart.render();
            countChart.render();
            tableChart.render();
         });
      </script>
   </body>
</html>

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

20 और 30 के बीच की उम्र का चयन करने के बाद, यह तालिका रिकॉर्ड दिखाता है जैसा कि नीचे स्क्रीनशॉट में दिखाया गया है -