DC.js - त्वरित गाइड

DC.js ब्राउज़र, मोबाइल उपकरणों में डेटा विश्लेषण के लिए एक उत्कृष्ट जावास्क्रिप्ट पुस्तकालय है और अंततः डेटा विज़ुअलाइज़ेशन बनाने में मदद करता है। डेटा विज़ुअलाइज़ेशन चित्रात्मक या चित्रमय प्रारूप में डेटा की प्रस्तुति है। डेटा विज़ुअलाइज़ेशन का प्राथमिक लक्ष्य सांख्यिकीय ग्राफिक्स, भूखंडों और सूचना ग्राफिक्स के माध्यम से स्पष्ट और कुशलता से जानकारी संवाद करना है। डेटा विज़ुअलाइज़ेशन को विभिन्न जावास्क्रिप्ट फ्रेमवर्क का उपयोग करके नियमित वेब और यहां तक कि मोबाइल एप्लिकेशन में विकसित और एकीकृत किया जा सकता है।

DC.js क्या है?

DC.js बड़े बहुआयामी डेटासेट की खोज के लिए एक चार्टिंग लाइब्रेरी है। यह सीएसएस के अनुकूल एसवीजी प्रारूप में चार्ट को रेंडर करने के लिए डी 3। जेएस इंजन पर निर्भर करता है। यह जटिल डेटा विज़ुअलाइज़ेशन को प्रस्तुत करने की अनुमति देता है और इसमें एक डिज़ाइन किया गया डैशबोर्ड होता है जिसमें बार चार्ट्स, स्कैटर प्लॉट्स, हीट मैप्स आदि होते हैं। DC.js के साथ काम करने के लिए बनाया गया है।Crossfilterडेटा हेरफेर के लिए। DC.js एक एकल (बड़े) डेटासेट को एक उन्नत ऑटो-फ़िल्टरिंग विकल्प के साथ कई परस्पर चार्ट के साथ कल्पना करने में सक्षम बनाता है।

हमें DC.js की आवश्यकता क्यों है?

सामान्य तौर पर, डेटा विज़ुअलाइज़ेशन काफी जटिल प्रक्रिया है और इसे क्लाइंट की तरफ ले जाने के लिए अतिरिक्त कौशल की आवश्यकता होती है। DC.js हमें सरल प्रोग्रामिंग मॉडल का उपयोग करके लगभग किसी भी प्रकार के जटिल डेटा विज़ुअलाइज़ेशन बनाने में सक्षम बनाता है। यह एक खुला स्रोत है, जावास्क्रिप्ट लाइब्रेरी को लेने के लिए बेहद आसान है, जो हमें बहुत कम समय में स्वच्छ कस्टम विज़ुअलाइज़ेशन को लागू करने की अनुमति देता है।

DC.js चार्ट डेटा चालित और बहुत प्रतिक्रियाशील हैं। इसके अलावा, यह प्रयोग करके उपयोगकर्ता इंटरैक्शन के लिए त्वरित प्रतिक्रिया देता हैCrossfilter Library।

DC.js सुविधाएँ

DC.js सर्वश्रेष्ठ डेटा विज़ुअलाइज़ेशन फ्रेमवर्क में से एक है और इसका उपयोग सरल और साथ ही जटिल विज़ुअलाइज़ेशन उत्पन्न करने के लिए किया जा सकता है। कुछ मुख्य विशेषताएं नीचे सूचीबद्ध हैं -

बेहद लचीला।
प्रयोग करने में आसान।
चार्ट का तेजी से प्रतिपादन।
बड़े बहुआयामी डेटासेट का समर्थन करता है।
ओपन सोर्स जावास्क्रिप्ट लाइब्रेरी।

डी.जेएस के लाभ

DC.js एक ओपन सोर्स प्रोजेक्ट है और इसे दूसरों की तुलना में कम कोड की आवश्यकता होती है। यह निम्नलिखित लाभ के साथ आता है -

महान डेटा दृश्य।
चित्रमय फ़िल्टरिंग करता है।
चार्ट और डैशबोर्ड का तेजी से निर्माण।
अत्यधिक इंटरैक्टिव डैशबोर्ड का निर्माण।

अगले अध्याय में, हम समझेंगे कि हमारे सिस्टम पर D3.js कैसे स्थापित करें।

इस अध्याय में, हम सीखेंगे कि DC.js विकास पर्यावरण को कैसे सेट किया जाए। शुरू करने से पहले, हमें निम्नलिखित घटकों की आवश्यकता है -

DC.js पुस्तकालय
Editor
वेब ब्राउज़र
वेब सर्वर

आइए हम विस्तार से एक-एक करके चरणों से गुजरते हैं।

DC.js स्थापना

डीसी स्थापना को स्थापित करना बहुत आसान है। अपनी मशीन पर डीसी को स्थापित करने के लिए नीचे दिए गए चरणों का पालन करें ।

DC लाइब्रेरी डाउनलोड करें

डीसी एक ओपन-सोर्स लाइब्रेरी है; लिंक का उपयोग करेंhttps://github.com/dc-js/dc.js/releases फ़ाइल डाउनलोड करने के लिए।

डीसी फ़ाइल का नवीनतम संस्करण डाउनलोड करें। (अब तक, नवीनतम संस्करण 2.0.2 है।) डाउनलोड पूरा होने के बाद, डीसी फ़ोल्डर को अनज़िप करें और इसे अपने प्रोजेक्ट के रूट फ़ोल्डर या किसी अन्य फ़ोल्डर में पेस्ट करें, जहाँ आप अपनी सभी लाइब्रेरी फ़ाइलों को रखना चाहते हैं।

नमूना HTML पृष्ठ नीचे दिखाया गया है।

<!DOCTYPE html>
<html lang = "en">
   <head>
      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>
   
   <body>
      <script>
         // write your dc code here.. 
      </script>
   </body>
</html>

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

DC.js संपादक

हमें कोड लिखना शुरू करने के लिए एक संपादक की आवश्यकता होगी। जावास्क्रिप्ट के लिए समर्थन के साथ कुछ महान आईडीई (एकीकृत विकास पर्यावरण) हैं -

विजुअल स्टूडियो कोड
WebStorm
Eclipse
SublimeText

ये आईडीई बुद्धिमान कोड पूरा करने के साथ-साथ आधुनिक जावास्क्रिप्ट फ्रेमवर्क में से कुछ का समर्थन करते हैं। यदि हमारे पास कोई फैंसी आईडीई नहीं है, तो हम हमेशा एक बुनियादी संपादक का उपयोग कर सकते हैं जैसे नोटपैड, VI आदि।

वेब ब्राउज़र

IE8 और लोअर को छोड़कर DC.js सभी ब्राउज़रों पर काम करता है।

वेब सर्वर

अधिकांश ब्राउज़र स्थानीय HTML फ़ाइल को सीधे स्थानीय फ़ाइल सिस्टम से सेवित करते हैं। हालांकि, बाहरी डेटा फ़ाइलों को लोड करने की बात आने पर कुछ प्रतिबंध हैं। इस ट्यूटोरियल के बाद के अध्यायों में, हम CSV और JSON जैसी बाहरी फ़ाइलों से डेटा लोड करेंगे। इसलिए, यह हमारे लिए आसान होगा, अगर हम शुरुआत से ही वेब सर्वर सेट करते हैं।

हम किसी भी वेब सर्वर का उपयोग कर सकते हैं, जिसके साथ हम सहज हैं। उदाहरण के लिए - IIS, Apache, आदि।

एक पृष्ठ देखना

ज्यादातर मामलों में, हम इसे देखने के लिए वेब ब्राउज़र में HTML फ़ाइल को खोल सकते हैं। हालाँकि, बाहरी डेटा स्रोतों को लोड करते समय, स्थानीय वेबसर्वर को चलाने और सर्वर से पृष्ठ देखने के लिए अधिक विश्वसनीय है (http://localhost:8080)।

DC.js अधिकांश फ्रंट-एंड डेवलपर्स के लिए सरल और आसान है। यह D3.js. के किसी भी ज्ञान के बिना, जल्दी से बुनियादी चार्ट बनाने में सक्षम बनाता है। इससे पहले, हम विज़ुअलाइज़ेशन बनाने के लिए DC.js का उपयोग करना शुरू करते हैं; हमें वेब मानकों से परिचित होने की आवश्यकता है। निम्न वेब मानकों का उपयोग अत्यधिक रूप से D3.js में किया जाता है, जो चार्ट प्रस्तुत करने के लिए DC.js की नींव है।

हाइपरटेक्स्ट मार्कअप लैंग्वेज (HTML)
दस्तावेज़ ऑब्जेक्ट मॉडल (DOM)
कैस्केडिंग स्टाइल शीट्स (सीएसएस)

आइए हम इन वेब मानकों में से प्रत्येक को विस्तार से समझें।

हाइपरटेक्स्ट मार्कअप लैंग्वेज (HTML)

जैसा कि हम जानते हैं, HTML का उपयोग वेबपेज की सामग्री को तैयार करने के लिए किया जाता है। इसे ".html" एक्सटेंशन वाली टेक्स्ट फ़ाइल में संग्रहीत किया जाता है।

एक सामान्य बुनियादी HTML उदाहरण जैसा नीचे दिखाया गया है -

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title></title>
   </head>
   
   <body>

   </body>
</html>

दस्तावेज़ ऑब्जेक्ट मॉडल (DOM)

जब एक HTML पेज एक ब्राउज़र द्वारा लोड किया जाता है, तो यह एक पदानुक्रमित संरचना में बदल जाता है। HTML में प्रत्येक टैग DOM में एक तत्व / वस्तु में एक अभिभावक-बच्चे पदानुक्रम के साथ परिवर्तित हो जाता है। यह हमारे HTML को तार्किक रूप से संरचित बनाता है। एक बार DOM बन जाने के बाद, पेज पर मौजूद तत्वों को जोड़ना (जोड़ना / संशोधित / हटाना) करना आसान हो जाता है।

आइए निम्नलिखित HTML दस्तावेज़ का उपयोग करके डोम को समझें -

<!DOCTYPE html>
<html lang = "en">
   <head>
      <title>My Document</title>
   </head>

   <body>
      <div>
         <h1>Greeting</h1>
         <p>Hello World!</p>
      </div>
   </body>
</html>

उपरोक्त HTML दस्तावेज़ का दस्तावेज़ ऑब्जेक्ट मॉडल निम्नानुसार है -

कैस्केडिंग स्टाइल शीट्स (सीएसएस)

जबकि HTML वेबपृष्ठ को एक संरचना देता है, सीएसएस शैलियाँ वेबपृष्ठ को देखने के लिए और अधिक सुखद बनाती हैं। CSS एक स्टाइल शीट भाषा है जिसका उपयोग HTML या XML में लिखे गए दस्तावेज़ की प्रस्तुति का वर्णन करने के लिए किया जाता है (इसमें XML बोली जैसे SVG या XHTML शामिल हैं)। CSS बताता है कि वेबपेज पर तत्वों को कैसे प्रस्तुत किया जाना चाहिए।

जावास्क्रिप्ट

जावास्क्रिप्ट एक ढीला टाइप क्लाइंट साइड स्क्रिप्टिंग भाषा है जो उपयोगकर्ता के ब्राउज़र में निष्पादित होती है। वेब उपयोगकर्ता इंटरफ़ेस को इंटरैक्टिव बनाने के लिए जावास्क्रिप्ट HTML तत्वों (DOM तत्वों) के साथ सहभागिता करता है। जावास्क्रिप्ट ECMAScript मानकों को लागू करता है, जिसमें ECMA-262 विनिर्देश के साथ-साथ अन्य विशेषताओं के आधार पर मुख्य विशेषताएं शामिल हैं, जो ECMAScript मानकों पर आधारित नहीं हैं। जावास्क्रिप्ट ज्ञान DC.js. के लिए एक शर्त है

अवयव

DC.js दो उत्कृष्ट जावास्क्रिप्ट पुस्तकालयों पर आधारित हैं, जो हैं -

Crossfilter
D3.js

Crossfilter

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

D3.js

D3.js डेटा-प्रेरित दस्तावेजों के लिए खड़ा है। D3.js डेटा के आधार पर दस्तावेजों में हेरफेर करने के लिए जावास्क्रिप्ट लाइब्रेरी है। डी 3 डायनेमिक, इंटरएक्टिव, ऑनलाइन डेटा विज़ुअलाइज़ेशन फ्रेमवर्क है और बड़ी संख्या में वेबसाइटों में उपयोग किया जाता है। D3.js द्वारा लिखा गया हैMike Bostock, जिसे पहले के विज़ुअलाइज़ेशन टूलकिट के उत्तराधिकारी के रूप में कहा जाता है Protovis। D3.js का उपयोग सैकड़ों हजारों वेबसाइटों पर किया जाता है।

क्रॉसफिल्टर एक बहुआयामी डेटासेट है। यह एक लाख या अधिक रिकॉर्ड वाले डेटासेट के साथ अत्यंत तेज़ सहभागिता का समर्थन करता है।

मूल अवधारणा

क्रॉसफिल्टर को क्रॉसफिल्टर नेमस्पेस के तहत परिभाषित किया गया है। यह अर्थ वर्जनिंग का उपयोग करता है। एक क्रॉसफिल्टर ऑब्जेक्ट पर विचार करें जो नीचे परिभाषित किए गए फलों के संग्रह के साथ भरा हुआ है -

var fruits = crossfilter ([
   { name: “Apple”, type: “fruit”, count: 20 },
   { name: “Orange”, type: "fruit”, count: 10 },
   { name: “Grapes”, type: “fruit”, count: 50 },
   { name: “Mango”,  type: “fruit”, count: 40 }
]);

यदि हमें किसी समूह में कुल रिकॉर्ड करने की आवश्यकता है, तो हम निम्नलिखित फ़ंक्शन का उपयोग कर सकते हैं -

var count = fruits.groupAll().reduceCount().value();

यदि हम एक विशिष्ट प्रकार से फ़िल्टर करना चाहते हैं -

var filtering = fruits.dimension(function(d) { return d.type; });
filtering.filter(“Grapes”)

इसी तरह, हम क्रॉसफिल्टर के साथ ग्रुपिंग कर सकते हैं। ऐसा करने के लिए, हम निम्नलिखित फ़ंक्शन का उपयोग कर सकते हैं -

var grouping = filtering.group().reduceCount();
var first = grouping.top(2);

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

क्रॉसफ़िल्टर एपीआई

आइए हम उल्लेखनीय क्रॉसफ़िल्टर एपीआई के बारे में विस्तार से जानते हैं।

crossfilter([records])- इसका इस्तेमाल नए क्रॉसफिल्टर के निर्माण के लिए किया जाता है। यदि रिकॉर्ड निर्दिष्ट किया गया है, तो यह एक साथ निर्दिष्ट रिकॉर्ड जोड़ता है। रिकॉर्ड्स जावास्क्रिप्ट ऑब्जेक्ट्स या प्राइमेटिव के किसी भी सरणी हो सकते हैं।
crossfilter.add(records) - निर्दिष्ट रिकॉर्ड को क्रॉसफ़िल्टर में जोड़ता है।
crossfilter.remove() - क्रॉसफ़िल्टर से मौजूदा फ़िल्टरों से मेल खाने वाले सभी रिकॉर्डों को हटा देता है।
crossfilter.size() - क्रॉसफ़िल्टर में रिकॉर्ड की संख्या लौटाता है।
crossfilter.groupAll() - यह सभी रिकॉर्डों को समूहीकृत करने और एकल मान को कम करने के लिए एक फ़ंक्शन है।
crossfilter.dimension(value) - इसका उपयोग निर्दिष्ट मान एक्सेसर फ़ंक्शन का उपयोग करके एक नए आयाम का निर्माण करने के लिए किया जाता है।
dimension.filter(value) - यह आयाम के मिलान मूल्य के रिकॉर्ड को फ़िल्टर करने के लिए उपयोग किया जाता है, और आयाम को लौटाता है।
dimension.filterRange(range) - फिल्टर आयाम के मान के लिए रिकॉर्ड करता है जो रेंज [0] से अधिक या बराबर है, और रेंज [1] से कम है।
dimension.filterAll() - इस आयाम पर किसी भी फ़िल्टर को साफ़ करता है।
dimension.top(k) - इस आयाम के प्राकृतिक क्रम के अनुसार, शीर्ष कश्मीर रिकॉर्ड वाले एक नए सरणी को वापस करने के लिए उपयोग किया जाता है।
dimension.bottom(k) - इस आयाम के प्राकृतिक क्रम के अनुसार, निचले k रिकॉर्ड वाले नए सरणी को वापस करने के लिए इसका उपयोग किया जाता है।
dimension.dispose() - इसका उपयोग क्रॉसफिल्टर से आयाम को हटाने के लिए किया जाता है।

अगले अध्याय में, हम D3.js. के बारे में संक्षेप में समझेंगे।

D3.js एक जावास्क्रिप्ट लाइब्रेरी है जिसका उपयोग ब्राउज़र में इंटरैक्टिव विज़ुअलाइज़ेशन बनाने के लिए किया जाता है। डी 3 लाइब्रेरी हमें एक वेबपेज के तत्वों को एक डाटासेट के संदर्भ में हेरफेर करने की अनुमति देता है। ये तत्व HTML, एसवीजी या कैनवस तत्व हो सकते हैं, और डेटासेट की सामग्री के अनुसार इन्हें प्रस्तुत, हटाया या संपादित किया जा सकता है। यह डोम ऑब्जेक्ट्स में हेरफेर करने के लिए एक पुस्तकालय है। D3.js डेटा अन्वेषण में एक मूल्यवान सहायता हो सकती है। यह आपको अपने डेटा के प्रतिनिधित्व पर नियंत्रण देता है और आपको डेटा इंटरएक्टिविटी जोड़ने देता है।

अन्य पुस्तकालयों की तुलना में D3.js प्रमुख ढांचे में से एक है। यह है क्योंकि; यह वेब और डेटा विज़ुअलाइज़ेशन पर काम करता है और एंटरप्राइज़ ग्रेड का है। एक और कारण इसका शानदार लचीलापन है, जो दुनिया भर के डेवलपर्स को कई उन्नत चार्ट बनाने में सक्षम बनाता है। साथ ही, इसने अपनी कार्यक्षमता को काफी हद तक बढ़ाया है।

आइए हम D3.js की मूल अवधारणाओं को समझते हैं, जो इस प्रकार हैं -

Selections
डेटा जुड़ते हैं
SVG
Transition
Animation
डी 3.जेएस एपीआई

आइए हम इनमें से प्रत्येक अवधारणा को विस्तार से समझें।

चयन

चयन D3.js. में मुख्य अवधारणा में से एक है यह CSS चयनकर्ता अवधारणा पर आधारित है। जिन लोगों ने JQuery का उपयोग किया है और वे पहले से ही जानते हैं, वे आसानी से चयन को समझ सकते हैं। यह हमें CSS चयनकर्ताओं के आधार पर DOM का चयन करने में सक्षम बनाता है और फिर DOM के तत्वों को संशोधित करने या हटाने के लिए विकल्प प्रदान करता है।

डाटा जॉइन करें

डेटा जुड़ना D3.js. में एक और महत्वपूर्ण अवधारणा है यह चयन के साथ-साथ काम करता है और हमें हमारे डेटासेट (संख्यात्मक मानों की एक श्रृंखला) के संबंध में HTML दस्तावेज़ में हेरफेर करने में सक्षम बनाता है। डिफ़ॉल्ट रूप से, D3.js अपने तरीकों में डाटासेट को सर्वोच्च प्राथमिकता देता है और डाटासेट में प्रत्येक आइटम एक HTML तत्व से मेल खाता है।

एसवीजी

एसवीजी का मतलब है Scalable Vector Graphics। एसवीजी एक XML आधारित वेक्टर ग्राफिक्स प्रारूप है। यह लाइन्स, रेक्टैंगल्स, सर्कल्स, एलिप्स इत्यादि विभिन्न आकृतियों को आकर्षित करने के लिए विकल्प प्रदान करता है। इसलिए, एसवीजी के साथ विज़ुअलाइज़ेशन को डिजाइन करना आपको अधिक शक्ति और लचीलापन देता है।

परिवर्तन

एसवीजी एकल एसवीजी आकार तत्व या एसवीजी तत्वों के समूह को बदलने के लिए विकल्प प्रदान करता है। एसवीजी ट्रांसफॉर्म ट्रांसलेट, स्केल, रोटेट और स्क्यू का समर्थन करता है।

TRANSITION

संक्रमण एक राज्य से दूसरे आइटम में बदलने की प्रक्रिया है। D3.js HTML पृष्ठ में संक्रमण करने के लिए एक संक्रमण () विधि प्रदान करता है।

एनीमेशन

D3.js संक्रमण के माध्यम से एनीमेशन का समर्थन करता है। संक्रमण के उचित उपयोग के साथ एनीमेशन किया जा सकता है। परिवर्तन केवल दो प्रमुख फ़्रेमों के साथ कुंजी फ़्रेम एनीमेशन का सीमित रूप हैं:start तथा end। प्रारंभिक कुंजी फ़्रेम आमतौर पर DOM की वर्तमान स्थिति है, और अंतिम कुंजी फ़्रेम आपके द्वारा निर्दिष्ट विशेषताओं, शैलियों और अन्य गुणों का एक सेट है। संक्रमण एक जटिल कोड के बिना एक नए दृश्य में संक्रमण के लिए अच्छी तरह से अनुकूल हैं जो शुरुआती दृश्य पर निर्भर करता है।

डी 3.जेएस एपीआई

आइए हम कुछ महत्वपूर्ण D3.js एपीआई के तरीकों को संक्षेप में समझते हैं।

संग्रह एपीआई

एक संग्रह केवल एक वस्तु है जो कई तत्वों को एक इकाई में समूहित करता है। इसे एक कंटेनर के रूप में भी कहा जाता है। इसमें ऑब्जेक्ट्स, मैप्स, सेट्स और घोंसले शामिल हैं।

पथ एपीआई

आयतों, हलकों, दीर्घवृत्त, पॉलीइन्स, बहुभुज, सीधी रेखाओं और वक्रों को खींचने के लिए पथों का उपयोग किया जाता है। एसवीजी पथ एक आकृति की रूपरेखा का प्रतिनिधित्व करता है, जिसे स्ट्रिप किया जा सकता है, भरा जा सकता है, जिसका उपयोग क्लिपिंग पथ या तीनों के किसी भी संयोजन के रूप में किया जा सकता है।

एक्सिस एपीआई

D3.js कुल्हाड़ियों को खींचने के लिए कार्य प्रदान करता है। एक अक्ष लाइनों, टिक्स और लेबल से बना है। एक अक्ष पैमाने का उपयोग करता है, इस प्रकार प्रत्येक अक्ष को काम करने के लिए एक पैमाने देने की आवश्यकता होगी।

जूमिंग एपीआई

ज़ूम करने से आपकी सामग्री को स्केल करने में मदद मिलती है। आप क्लिक-एंड-ड्रैग दृष्टिकोण का उपयोग करके किसी विशेष क्षेत्र पर ध्यान केंद्रित कर सकते हैं।

परिसीमन-पृथक मूल्य एपीआई

एक सीमांकक एक या एक से अधिक वर्णों का एक क्रम है जिसका उपयोग सादे पाठ या अन्य डेटा में अलग, स्वतंत्र क्षेत्रों के बीच सीमा को निर्दिष्ट करने के लिए किया जाता है। एक फ़ील्ड सीमांकक अल्पविराम द्वारा अलग किए गए मानों का एक क्रम है। संक्षेप में, सीमांकित-पृथक मान कोमा-सेपरेटेड वैल्यूज़ (CSV) या टैब-सेपरेटेड वैल्यूज़ (TSV) हैं।

मिक्सिन एक है abstract functional objectबहुत सारे पूर्व-परिभाषित कार्य होने, जिन्हें जावास्क्रिप्ट कक्षाओं में मिश्रित और उपयोग किया जा सकता है। हालाँकि, उन्हें स्टैंड-अलोन के रूप में उपयोग नहीं किया जा सकता है। उदाहरण के लिए, DC.js एक हैMixin तथा dc.baseMixin, जो इसका उपयोग नहीं किया जा सकता है, लेकिन सभी डीसी चार्ट वर्गों जैसे लाइन चार्ट, पाई चार्ट, आदि द्वारा उपयोग किया जाता है। डीसी में आसानी से और कुशलता से चार्ट बनाने के लिए उपयोगी मिक्सिन का सीमित सेट होता है। वे इस प्रकार हैं -

baseMixin- बेसमिक्सिन सभी प्रकार के चार्ट के लिए सामान्य कार्यक्षमता प्रदान करता है। यह क्रॉसफिल्टर और d3.js जावास्क्रिप्ट लाइब्रेरी को एकीकृत करता है और डी 3 के सीमित ज्ञान के साथ चार्ट बनाने के लिए फ़ंक्शन का एक सरल सेट प्रदान करता है।
capMixin - capMixin एक सीमा (कैप) के नीचे डेटा तत्वों के लिए समूहीकरण सहायता प्रदान करता है।
colorMixin - colorMixin चार्ट के लिए रंग समर्थन प्रदान करता है।
marginMixin - मार्जिनमाइन चार्ट के लिए मार्जिन समर्थन प्रदान करता है।
coordinateGridMixin - ordinateGridMixin चार्ट के लिए समन्वय समर्थन प्रदान करता है।
stackMixin - stackMixin स्टैकिंग समर्थन प्रदान करता है d3.layout.stack।
bubbleMixin - बुलबुलामिक्सिन चार्ट के लिए बुलबुला समर्थन प्रदान करता है।

आइए इन सभी मिश्रणों को बाद के अध्यायों में विस्तार से समझें।

baseMixinकिसी भी प्रकार के चार्ट को बनाने के लिए आवश्यक बुनियादी तरीके प्रदान करता है। यह चार्ट की चौड़ाई को सेट करने से लेकर चार्ट के उन्नत फ़िल्टरिंग तक है।

सामान्य चार्ट विकल्प

basicMixinचार्ट के गुण प्राप्त / सेट करने के लिए कई चार्ट विधियाँ प्रदान करता है। वे इस प्रकार हैं,

chartID() - चार्ट की आंतरिक संख्यात्मक आईडी लौटाता है।
chartGroup( [chartGroup])- उस समूह को हो जाता है या सेट कर देता है, जिसका चार्ट होता है। DC.js में, चार्ट को एक सेट में वर्गीकृत किया जा सकता है। एक समूह के सभी चार्ट में समान क्रॉसफिल्टर डेटासेट साझा करने की उम्मीद है। वे एक साथ फिर से प्रस्तुत किए जाते हैं।

mychart.chartGroup('dashboard');

minWidth( [minWidth]) - चार्ट की न्यूनतम चौड़ाई निर्धारित करता है।

mychart.minWidth(300);

width( [width]) - चार्ट की चौड़ाई प्राप्त या निर्धारित करता है।

mychart.width(600);

minHeight( [minHeight]) - चार्ट की न्यूनतम ऊंचाई प्राप्त या निर्धारित करता है।

mychart.minHeight(300);

height( [height]) - चार्ट की ऊंचाई प्राप्त या निर्धारित करता है।

mychart.height(300);

title( [titleFunction])- शीर्षक समारोह हो जाता है या सेट हो जाता है। शीर्षक चार्ट में एसवीजी तत्व का बाल तत्व का शीर्षक है (उदाहरण के लिए एक बार चार्ट में एक बार)। चार्ट में शीर्षक को ब्राउज़र में टूलटिप के रूप में दर्शाया गया है।

mychart.title(function(data) { 
   return d.key + ': ' + d.value; 
});

label( labelFunction[??]) - शीर्षक () विधि के समान, लेकिन यह शीर्षक के बजाय लेबल सेट करता है।

mychart.label(function(data) { 
   return d.key + ': ' + d.value; 
});

options(opts)- जावास्क्रिप्ट ऑब्जेक्ट का उपयोग करके कोई भी चार्ट विकल्प सेट करता है। प्रत्येक कुंजी चार्ट में उपलब्ध संगत विधि का प्रतिनिधित्व करती है और मिलान विधि प्रासंगिक मूल्य के साथ लागू की जाएगी।

mychart.options ({
   'width' : 300,
   'height' : 300
});

यहां, चौड़ाई () और ऊंचाई () विधि निर्दिष्ट मान के साथ निकाल दी जाएगी।

legend( [legend])- चार्ट के लिए एक किंवदंती संलग्न करता है। किंवदंती का उपयोग कर बनाया जा सकता हैd3.legend() तरीका।

mychart.legend (
   dc.legend()
      .x(500)
      .y(50)
      .itemHeight(12)
      .gap(4))

anchor( parent[??])- रूट एसवीइग्लमेंट को मौजूदा चार्ट के रूट या किसी वैध डी 3 सिंगल चयनकर्ताओं के रूप में सेट करता है। वैकल्पिक रूप से, चार्ट समूह को दूसरे तर्क का उपयोग करके भी सेट किया जा सकता है।
anchorName() - चार्ट के लंगर स्थान के डोम आईडी हो जाता है।
svg( [svgElement]) - चार्ट के SVGElement को लौटाता है।
resetSvg() - DOM में SVG कंटेनर को रीसेट करता है।
root( [rootElement]) - चार्ट के रूट कंटेनर हो जाता है।

डेटा विकल्प

basicMixinचार्ट के लिए डेटा सेट करने के तरीके प्रदान करता है। डेटा को क्रॉसफिल्टर आयाम और समूह के रूप में सेट किया गया है। इसके अलावा, यह अंतर्निहित डेटासेट प्राप्त करने का एक विकल्प प्रदान करता है।

dimension( [dimension])- सेट या चार्ट का आयाम प्राप्त करता है। एक आयाम किसी भी वैध क्रॉसफ़िल्टर आयाम है।

var mycrossfilter = crossfilter([]);
var ageDimension = mycrossfilter.dimension(dc.pluck('age'));
mychart.dimension(ageDimension);

group( group[??])- सेट या चार्ट का समूह प्राप्त करता है। एक समूह किसी भी वैध Crossfilter समूह है। कोड में बाद में इसका उपयोग करने के लिए दूसरे तर्क का उपयोग करके समूह का नाम दिया जा सकता है।

var mycrossfilter = crossfilter([]);
var ageDimension = mycrossfilter.dimension(dc.pluck('age'));
mychart.dimension(ageDimension);
mychart.group(ageDimension.group(crossfilter.reduceCount()));

data( [callback]) - डेटा कॉलबैक सेट करता है और हमें अंतर्निहित चार्ट का डेटा सेट प्राप्त करने में सक्षम बनाता है।

// get all groups
mychart.data(function (group) { 
   return group.all(); 
});

// get top five groups
mychart.data(function (group) { 
   return group.top(5); 
});

keyAccessor( [keyAccessor])- कुंजी एक्सेसर फ़ंक्शन को प्राप्त या सेट करता है। इसका उपयोग अंतर्निहित क्रॉसफिल्टर समूह से कुंजी को पुनः प्राप्त करने के लिए किया जाता है। कुंजी का उपयोग पाई चार्ट में स्लाइस और लाइन / बार चार्ट में एक्स-एक्सिस के लिए किया जाता है। डिफ़ॉल्टkey accessor फ़ंक्शन निम्नानुसार है -

chart.keyAccessor(function(d) { return d.key; });

valueAccessor( [valueAccessor])- मान एक्सेसर फ़ंक्शन को प्राप्त या सेट करता है। इसका उपयोग अंतर्निहित क्रॉसफिल्टर समूह से मूल्य प्राप्त करने के लिए किया जाता है। मान का उपयोग पाई चार्ट में टुकड़ा आकार और लाइन / बार चार्ट में y- अक्ष स्थिति के लिए किया जाता है। डिफ़ॉल्टvalue accessor फ़ंक्शन निम्नानुसार है -

chart.valueAccessor(function(d) { return d.value; });

ordering( [orderFunction])- क्रमिक आयाम का आदेश देने के लिए एक आदेश देता है या सेट करता है। डिफ़ॉल्ट रूप से, एक चार्ट का उपयोग करता हैcrossfilter.quicksort.by तत्वों को सॉर्ट करने के लिए।

_chart.ordering(dc.pluck('key'));

फ़िल्टर विकल्प

छानना DC.js. के मुख्य आकर्षण में से एक है हम चार्ट () विधि और कॉल चार्ट के redrawGroup () या dc.redrawAll () विधि का उपयोग करके चार्ट ऑब्जेक्ट पर सीधे एक या अधिक फ़िल्टर लागू कर सकते हैं और चार्ट पर फ़िल्टरिंग प्रभाव देख सकते हैं। डिफ़ॉल्ट रूप से, एक चार्ट ऑब्जेक्ट फ़िल्टर () विधि का उपयोग करके एक या अधिक फ़िल्टर लेता है, इसे अंतर्निहित क्रॉसफ़िल्टर () डेटा सेट पर लागू करता है, क्रॉसफ़िल्टर से फ़िल्टर किए गए डेटा को प्राप्त करता है और फ़िल्टर किए गए डेटा का उपयोग करके चार्ट को फिर से बनाता है। DC.js चार्ट में फ़िल्टरिंग को संभालने के लिए निम्नलिखित तरीके प्रदान करता है।

फ़िल्टर ([फ़िल्टर])

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

mychart.filter(10);

सभी फ़िल्टर हटाने के लिए, फ़िल्टर विधि को कॉल करें nullमूल्य। फ़िल्टर निम्नलिखित में से कोई भी एक आइटम हो सकता है -

null - चार्ट पहले से लागू सभी फिल्टर को हटा देगा।
single value - चार्ट अंतर्निहित क्रॉसफिल्टर के फिल्टर विधि को कॉल करेगा और आपूर्ति मूल्य भेज देगा।
dc.filters.RangedFilter- यह दो मूल्यों को स्वीकार करता है, निम्न और उच्च। चार्ट निम्न और उच्च मूल्य के बीच की सीमा को छोड़कर सभी डेटा को फ़िल्टर करेगा।
dc.filters.TwoDimensionalFilter - यह दो-आयामी मूल्यों को स्वीकार करता है जो गर्मी के नक्शे में उपयोग किए जाते हैं।
dc.filters.RangedTwoDimensionalFilter - यह dc.filters.RangedFilter के समान है, सिवाय इसके कि यह केवल तितर बितर भूखंडों में उपयोग किए जाने वाले दो-आयामी मूल्य को स्वीकार करता है।

हैफिल्टर ([फ़िल्टर])

जाँचता है कि आपूर्ति फ़िल्टर उपलब्ध है या नहीं चार्ट में।

प्रतिस्थापन (फ़िल्टर)

आपूर्ति किए गए फ़िल्टर के साथ चार्ट के वर्तमान फ़िल्टर को बदलता है।

फिल्टर ()

चार्ट से जुड़े सभी वर्तमान फ़िल्टर लौटाता है।

filterAll ()

चार्ट से जुड़े सभी फ़िल्टर साफ़ करता है।

फ़िल्टरहैंडलर ([फ़िल्टरहैंडलर])

एक फ़िल्टर हैंडलर फ़ंक्शन हो जाता है या सेट हो जाता है। फ़िल्टर हैंडलर फ़ंक्शन का उपयोग चार्ट द्वारा अंतर्निहित डेटासेट को फ़िल्टर करने के लिए किया जाता है। चार्ट में एक डिफ़ॉल्ट फ़िल्टर हैंडलर फ़ंक्शन है और इसे इस पद्धति का उपयोग करके एक कस्टम फ़िल्टर हैंडलर फ़ंक्शन द्वारा प्रतिस्थापित किया जा सकता है। डिफ़ॉल्ट फ़िल्टर हैंडलर इस प्रकार है -

chart.filterHandler(function (dimension, filters) {
   if (filters.length === 0) {
      
      // the empty case (no filtering)
      dimension.filter(null);
   } else if (filters.length === 1 && !filters[0].isFiltered) {
      
      // single value and not a function-based filter
      dimension.filterExact(filters[0]);
   } else if (filters.length === 1 && filters[0].filterType === 'RangedFilter') {
      
      // single range-based filter
      dimension.filterRange(filters[0]);
   } else {
      
      // an array of values, or an array of filter objects
      dimension.filterFunction(function (d) {
         
         for (var i = 0; i < filters.length; i++) {
            var filter = filters[i];
               
            if (filter.isFiltered && filter.isFiltered(d)) {
               return true;
            } else if (filter <= d && filter >= d) {
               return true;
            }
         }
         return false;
      });
   }
   return filters;
});

hasFilterHandler ([hasFilterHandler])

हो जाता है या एक है फिल्टर हैंडलर फ़ंक्शन सेट करता है। यह फ़ंक्शन चार्ट द्वारा यह जांचने के लिए उपयोग किया जाता है कि चार्ट के फ़िल्टर संग्रह में कोई फ़िल्टर उपलब्ध है या नहीं। डिफ़ॉल्ट है-फ़िल्टर हैंडलर निम्नानुसार है -

chart.hasFilterHandler(function (filters, filter) {
   if (filter === null || typeof(filter) === 'undefined') {
      return filters.length > 0;
   }
   
   return filters.some(function (f) {
      return filter <= f && filter >= f;
   });
});

addFilterHandler ([addFilterHandler])

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

chart.addFilterHandler(function (filters, filter) {
   filters.push(filter);
   return filters;
});

removeFilterHandler ([removeFilterHandler])

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

chart.removeFilterHandler(function (filters, filter) {
   for (var i = 0; i < filters.length; i++) {
      
      if (filters[i] <= filter && filters[i] >= filter) {
         filters.splice(i, 1);
         break;
      }
      
   }
   return filters;
});

रीसेटफिल्टरहैंडलर ([रीसेटफिल्टरहैंडलर])

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

function (filters) {
   return [];
}

फ़िल्टरप्रिन्टर ([फ़िल्टरप्रिन्टरफ़ंक्शन])

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

commitHandler ()

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

घटना विकल्प

DC.js कुछ कार्य करने के लिए घटनाओं के एक सीमित सेट को परिभाषित करता है जैसे कि फ़िल्टरिंग, ज़ूमिंग, आदि। DC.js में परिभाषित घटनाओं की सूची इस प्रकार है:

renderlet - संक्रमण के बाद निकाल दिया जाता है और रेंडर किया जाता है।
pretransition - संक्रमण शुरू होने से पहले निकाल दिया गया।
preRender - चार्ट रेंडरिंग से पहले निकाल दिया गया।
postRender - सभी रेंडरलेट के तर्क सहित चार्ट के पूरा होने के बाद निकाल दिया गया।
preRedraw - चार्ट रेडिंग से पहले निकाल दिया गया।
postRedraw - चार्ट के खत्म होने के बाद निकाल दिया गया जिसमें रेंडरलेट के सभी तर्क शामिल हैं।
filtered - एक फिल्टर लागू होने के बाद निकाल दिया, जोड़ा या हटा दिया।
zoomed - जूम ट्रिगर होने के बाद निकाल दिया गया।

basicMixin एक विधि प्रदान करता है, on(event, listener) उपरोक्त सभी निर्धारित घटनाओं के लिए कॉलबैक फ़ंक्शन सेट करना।

on(event, listener) - विशिष्ट घटना के लिए कॉलबैक या श्रोता फ़ंक्शन सेट करता है।
onClick(datum)- यह प्रत्येक चार्ट के लिए ऑनक्लिक हैंडलर के रूप में डी 3 पास है। डिफ़ॉल्ट व्यवहार क्लिक किए गए डेटा (कॉलबैक में पारित) पर फ़िल्टर करना और चार्ट समूह को फिर से बनाना है।

रेंडरिंग विकल्प

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

render()- चार्ट रेंडर करता है। आम तौर पर, इसका उपयोग पहले किया जाएगा, जब चार्ट तैयार किया जाएगा।
renderGroup() - समूह में सभी चार्ट रेंडर करते हैं क्योंकि यह चार्ट है।
renderLabel( [renderLabel]) - लेबल रेंडरिंग को चालू / बंद करता है।
renderTitle( [renderTitle]) - शीर्षक रेंडरिंग को चालू / बंद करना।
redraw() - पूरे चार्ट को फिर से बनाता है।
redrawGroup() - इस चार्ट के अंतर्गत समूह के सभी चार्ट्स को फिर से लिखा जाता है।

संक्रमण विकल्प

BasicMixin चार्ट के संक्रमण प्रभाव को सेट करने के लिए तरीके प्रदान करता है और वे इस प्रकार हैं -

transitionDelay( [delay]) - इस चार्ट उदाहरण के लिए सेट (या मिलीसेकंड में) एनीमेशन संक्रमण में देरी या सेट हो जाता है।
transitionDuration( [duration]) - इस चार्ट उदाहरण के लिए एनीमेशन संक्रमण अवधि (मिलीसेकंड में) सेट या प्राप्त होती है।
useViewBoxResizing( [useViewBoxResizing]) - यदि सेट किया गया है, तो एसवीजी व्यूबॉक्स विशेषताओं के अनुसार चार्ट का आकार बदलता है।
controlsUseVisibility( [controlsUseVisibility]) - यदि सेट किया गया है, तो चार्ट रीसेट और फ़िल्टर नियंत्रणों को दिखाने / छिपाने के लिए प्रदर्शन विशेषता के बजाय दृश्यता विशेषता का उपयोग करता है।

अगले अध्याय में, हम capMixin को समझेंगे।

capMixinएक निश्चित मान के नीचे डेटा तत्व की सूची को 'अन्य' के रूप में समूहित करने में सक्षम बनाता है। यह पंक्ति और पाई चार्ट दोनों में लागू है। CapMixin का पदानुक्रम नीचे दिए गए आरेख में परिभाषित किया गया है।

CapMixin दूसरों को अनुभाग खोजने के लिए चार तरीके प्रदान करता है और वे इस प्रकार हैं -

Method 1: cap( [count]) - उन तत्वों की गिनती को पूरा करता है या सेट करता है जिन्हें टोपी में शामिल किया जाएगा।

Method 2: othersGrouper( [grouperFunction])- कार्य करता है या 'अन्य' समूह करने के लिए फ़ंक्शन सेट करता है। प्रदान की गई डिफ़ॉल्ट फ़ंक्शन निम्नानुसार है।

chart.othersGrouper(function (topItems, restItems) {
   var restItemsSum = d3.sum(restItems, _chart.valueAccessor()),
   restKeys = restItems.map(_chart.keyAccessor());
   
   if (restItemsSum > 0) {
      return topItems.concat([{
         others: restKeys,
         key: _chart.othersLabel(),
         value: restItemsSum
      }]);
   }
   return topItems;
});

Method 3: othersLabel( [label]) - 'अन्य' समूह के लिए लेबल हो जाता है या सेट हो जाता है।

Method 4: takeFront( [takeFront])- कैपिंग की दिशा हो जाती है या सेट हो जाती है। यदि सेट किया जाता है, तो चार्ट डेटा तत्वों के क्रमबद्ध सरणी से सामने की वस्तुओं को लेता है; अन्यथा यह अंतिम आइटम ले जाएगा।

colorMixinसभी चार्ट के लिए रंग समर्थन प्रदान करता है, जिसे रंगों का उपयोग करने की कल्पना करने की आवश्यकता होती है। ColorMixin का पदानुक्रम नीचे दिए गए आरेख में परिभाषित किया गया है।

colorMixin रंगों के साथ काम करने के तरीकों की निम्नलिखित सूची प्रदान करता है और वे इस प्रकार हैं -

colorAccessor ([colorAccessor])

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

mychart.colorAccessor(function (d, i){return i;})

colorDomain ([डोमेन])

रंग मानचित्रण फ़ंक्शन के लिए वर्तमान डोमेन को जाता है या सेट करता है और इसे एक सरणी के रूप में आपूर्ति की जानी चाहिए।

calculateColorDomain ()

ColorAccessor () फ़ंक्शन का उपयोग करके पाए गए डेटा तत्व के न्यूनतम और अधिकतम मानों को निर्धारित करके रंग डोमेन सेट करता है।

रंग ([colorScale])

हो जाता है या एक रंग स्केल सेट करता है। यह स्वीकार करता हैd3.scale।

chart.colors(d3.scale.category20b());
chart.colors(d3.scale.ordinal().range(['red','green','blue']));

linearColors (आर)

प्रक्षेपित रैखिक रंग स्केल सेट करने के लिए एक शॉर्टकट विधि।

chart.linearColors(["#4575b4", "#ffffbf", "#a50026"]);

ordinalColors (आर)

ऑर्डिनल कलर स्केल सेट करने का एक शॉर्टकट तरीका।

chart.ordinalColors(['red','green','blue']);

marginMixinपंक्ति चार्ट और समन्वित ग्रिड चार्ट दोनों के लिए मार्जिन उपयोगिता फ़ंक्शन प्रदान करता है। मार्जिनमिक्सिन का पदानुक्रम नीचे दिए गए आरेख में परिभाषित किया गया है।

मार्जिनमिक्सिन समन्वित अक्ष आधारित चार्ट के लिए मार्जिन सेट करने के लिए एक एकल विधि प्रदान करता है।

मार्जिन ([मार्जिन])

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

a. Right - 50
a. Left - 30
a. Top - 10
a. Bottom - 30

var rightMargin = chart.margins().right; // 50 by default
chart.margins().bottom = 60;

कोऑर्डिनेट एंड एक्सिस भी कहा जाता है coordinateGridMixin कोआर्डिनेट ग्रिड आधारित कंक्रीट चार्ट के कई प्रकार जैसे बार चार्ट, लाइन चार्ट आदि का समर्थन करने के लिए डिज़ाइन किया गया है। निर्देशांक के पदानुक्रम को नीचे दिए आरेख में परिभाषित किया गया है।

निर्देशांक को बनाने में निर्देशांक को कम करने के लिए ordinateGridMixin कई तरीकों का समर्थन करता है और वे इस प्रकार हैं -

ब्रशऑन ([ब्रशऑन])
चार्टबॉडी ([शरीर])
क्लिपपैड ([पैड])
इलास्टिक x ([X])
फोकस ([रेंज])
जी ([रूट])
isOrdinal()
माउसज़ूमेबल ([ज़ूम])
रेंजक्रैट ([रेंज])
round(r)
xAxisMax()
xAxisMin()
xUnitCount()

आइए हम इन विधियों में से प्रत्येक पर संक्षेप में चर्चा करें।

ब्रशऑन ([ब्रशऑन])

यह एक ब्रश-आधारित रेंज फिल्टर है। आप इसे चालू / बंद कर सकते हैं। यदि ब्रश करना चालू है, तो उपयोगकर्ता माउस को एक चार्ट पर खींच सकता है। चालू करने से चार्ट पर अन्य इंटरैक्टिव तत्वों को उजागर किया जा सकता है जैसे कि हाइलाइटिंग, टूल टिप्स और संदर्भ लाइनें। यह नीचे परिभाषित किया गया है -

chart.brushOn = function (brushOn) {
   if (!arguments.length) {
      return _brushOn;
   }
   _brushOn = brushOn;
   return chart;
};

चार्टबॉडी ([शरीर])

इसका उपयोग चार्ट निकाय के लिए एसवीजी समूह को पुनः प्राप्त करने के लिए किया जाता है। आप इस फ़ंक्शन को नीचे दिखाए अनुसार कह सकते हैं -

chart.chartBodyG = function (body) {
   if (!arguments.length) {
      return _chartBodyG;
   }
};

क्लिपपैड ([पैड])

इसका उपयोग क्लिप पथ के लिए पिक्सेल में पैडिंग प्राप्त करने या सेट करने के लिए किया जाता है। यह नीचे परिभाषित किया गया है -

chart.clipPadding = function (pad) {
   if (!arguments.length) {
      return _clipPadding;
   }   
};

इलास्टिक x ([X])

इस विधि का उपयोग लोचदार x- अक्ष व्यवहार को चालू / बंद करने के लिए किया जाता है। यदि x- अक्ष लोच को चालू किया जाता है, तो ग्रिड चार्ट x- अक्ष श्रेणी को पुनर्गणना करने का प्रयास करेगा। यह एक redraw घटना चलाता है जो नीचे परिभाषित की गई है -

chart.elasticX = function (X) {
   if (!arguments.length) {
      return _x;
   }
}

इसी तरह, आप लोचपूर्ण प्रदर्शन कर सकते हैं ([Y])।

फोकस ([रेंज])

इस पद्धति का उपयोग दिए गए रेंज पर ध्यान केंद्रित करने के लिए चार्ट को ज़ूम करने के लिए किया जाता है। दी गई सीमा केवल दो तत्वों ([प्रारंभ, अंत]) वाले एक सरणी होनी चाहिए।

जी ([रूट])

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

isOrdinal ()

चार्ट ऑर्डिनल xUnits को वापस करने के लिए इस विधि का उपयोग किया जाता है। अधिकांश चार्ट्स आर्डिनल डेटा के साथ अलग तरह से व्यवहार करते हैं और उचित तर्क को ट्रिगर करने के लिए इस पद्धति के परिणाम का उपयोग करते हैं।

माउसज़ूमेबल ([ज़ूम])

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

रेंजक्रैट ([रेंज])

इसका उपयोग उदाहरण के साथ जुड़े रेंज चयन चार्ट को प्राप्त करने या सेट करने के लिए किया जाता है।

दौर (आर)

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

xAxisMax ()

चार्ट में प्रदर्शित करने के लिए अधिकतम x मान की गणना करता है। इसी प्रकार, हम Y- अक्ष के लिए प्रदर्शन कर सकते हैं।

xAxisMin ()

चार्ट में प्रदर्शित करने के लिए न्यूनतम x मान की गणना करता है। इसी प्रकार, हम Y- अक्ष के लिए प्रदर्शन कर सकते हैं।

xUnitCount ()

एक्स-अक्ष पर प्रदर्शित इकाइयों की संख्या लौटाता है। इसी प्रकार, हम Y- अक्ष के लिए प्रदर्शन कर सकते हैं।

एक पाई चार्ट एक परिपत्र सांख्यिकीय ग्राफ है। यह एक संख्यात्मक अनुपात दिखाने के लिए स्लाइस में विभाजित है। यह अध्याय बताता है कि DC.js का विस्तार से पाई चार्ट कैसे बनाया जाए।

पाई चार्ट विधियाँ

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

baseMixin
capMixin
colorMixin

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

Dc.pieChart को उपरोक्त निर्दिष्ट मिश्रणों के सभी तरीकों के साथ-साथ पाई चार्ट को विशेष रूप से आकर्षित करने के अपने तरीके हैं। वे इस प्रकार हैं -

cx ([cx])
चित्रपट ([पथ])
खाली शीर्षक ([शीर्षक])
बाहरी लेबल ([लेबल])
इनररैडियस ([इनररेडियस])
minAngleForLabel ([minAngleForLabel])
त्रिज्या ([त्रिज्या])
स्लाइसकैप ([कैप])

आइए हम इनमें से प्रत्येक पर विस्तार से चर्चा करें।

cx ([cx])

इसका उपयोग केंद्र x समन्वय स्थिति को प्राप्त करने या स्थापित करने के लिए किया जाता है, जिसे नीचे परिभाषित किया गया है -

chart.cx = function (cx) {
   if (!arguments.length) {
      return (_cx ||  _chart.width() / 2);
   }
};

इसी तरह, आप वाई-कोऑर्डिनेट पोजिशन कर सकते हैं।

चित्रपट ([पथ])

इस पद्धति का उपयोग पाई चार्ट के लिए पथ बनाने के लिए किया जाता है और इसे नीचे परिभाषित किया जाता है -

chart.drawPaths = function (path) {
   if (arguments.length === 0) {
      return path;
   }
};

खाली शीर्षक ([शीर्षक])

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

chart.emptyTitle = function (title) {
   if (arguments.length === 0) {
      return title;
   }
};

बाहरी लेबल ([लेबल])

इसका उपयोग चार्ट के बाहरी किनारे से स्लाइस लेबल को ऑफसेट करने के लिए किया जाता है। यह नीचे परिभाषित किया गया है -

chart.externalLabels = function (label) {
   if (arguments.length === 0) {
      return label;
   } 
};

इनररैडियस ([इनररेडियस])

इस पद्धति का उपयोग पाई चार्ट के आंतरिक त्रिज्या को प्राप्त करने या स्थापित करने के लिए किया जाता है। यदि आंतरिक त्रिज्या से अधिक है0px, फिर पाई चार्ट को डोनट चार्ट के रूप में प्रस्तुत किया जाएगा। यह नीचे परिभाषित किया गया है -

_chart.innerRadius = function (innerRadius) {
   if (!arguments.length) {
      return _innerRadius;
   }
};

minAngleForLabel ([minAngleForLabel])

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

_chart.minAngleForLabel = function (minAngleForLabel) {
   if (!arguments.length) {
      return _minAngleForLabel;
   }
   _minAngleForLabel = minAngleForLabel;
   return _chart;
};

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

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

_chart.radius = function (radius) {
   if (!arguments.length) {
      return _givenRadius;
   }
   _givenRadius = radius;
   return _chart;
};

स्लाइसकैप ([कैप])

हो जाता है या पाई चार्ट उत्पन्न करेगा स्लाइस की अधिकतम संख्या निर्धारित करता है। शीर्ष स्लाइस उच्च से निम्न तक के मूल्य द्वारा निर्धारित किए जाते हैं। टोपी से अधिक अन्य स्लाइसों को एक ही 'अन्य' स्लाइस में रोल किया जाएगा।

एक पाई चार्ट बनाएं

आइए हम DC में एक पाई चार्ट बनाते हैं। इस पाई चार्ट उदाहरण में, हम एक डाटासेट नाम लेते हैं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

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

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

people.csv

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

चरण 1: एक स्क्रिप्ट शामिल करें

हमें निम्नलिखित कोड का उपयोग करके डी 3, डीसी और क्रॉसफिल्टर को जोड़ना चाहिए -

<script src = "js/d3.js"></script>
<script src = "js/crossfilter.js"></script>
<script src = "js/dc.js"></script>

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

एक प्रकार की वस्तु बनाएं, dc.pieChart जैसा कि नीचे दिखाया गया है -

var pieChart = dc.pieChart('#pie');

यहां पाई आईडी को पाई के साथ मैप किया जाता है।

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

का उपयोग करके अपने डेटा (कहते हैं, People.csv से) पढ़ें d3.csv()समारोह। इसे निम्नानुसार परिभाषित किया गया है -

d3.csv("data/people.csv", function(errors, people) {
   console.log(people);
}

यहां, यदि निर्दिष्ट स्थान में डेटा फ़ाइल उपलब्ध नहीं है, तो d3.csv () फ़ंक्शन एक त्रुटि देता है।

चरण 4: क्रॉसफिल्टर को परिभाषित करें

Crossfilter के लिए एक चर को परिभाषित करें और Crossfilter को डेटा असाइन करें। यह नीचे परिभाषित किया गया है -

var mycrossfilter = crossfilter(people);

चरण 5: एक आयाम बनाएँ

नीचे दिए गए फ़ंक्शन का उपयोग करके लिंग के लिए एक आयाम बनाएं -

var genderDimension = mycrossfilter.dimension(function(data) { 
   return data.gender; 
});

यहां, लोगों के लिंग का उपयोग आयाम के लिए किया जाता है।

चरण 6: घटाएँ ()

उपर्युक्त बनाए गए लिंग आयाम पर समूह () और घटाव () फ़ंक्शन को लागू करके एक क्रॉसफ़िल्टर समूह बनाएं - groupDimension।

var genderGroup = genderDimension.group().reduceCount();

चरण 7: पाई उत्पन्न करें

नीचे दिए गए फ़ंक्शन का उपयोग करके पाई उत्पन्न करें -

pieChart
   .width(800)
   .height(300)
   .dimension(genderDimension)
   .group(genderGroup)
   .on('renderlet', function(chart) {
      chart.selectAll('rect').on('click', function(d) {
         console.log('click!', d);
      });
   });

dc.renderAll();

यहाँ,

पाई चार्ट की चौड़ाई 800 पर सेट है।
पाई चार्ट की ऊंचाई 300 पर सेट है।
पाई चार्ट का आयाम सेट है genderDimension आयाम () विधि का उपयोग करना।
पाई चार्ट का समूह सेट है genderGroup समूह () विधि का उपयोग करना।
अंतर्निहित ईवेंट का उपयोग करते हुए डेटा लॉग करने के लिए एक क्लिक ईवेंट जोड़ा गया, renderlet()। जब भी चार्ट प्रदान किया जाता है या खींचा जाता है, तो रेंडरलेट को लागू किया जाता है।

चरण 8: कार्य उदाहरण

एक नई html फ़ाइल बनाएं, पाई। Html और उपरोक्त सभी चरणों को नीचे दिखाए अनुसार शामिल करें -

<html>
   <head>
      <title>DC.js Pie 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 = "pie"></div>
      </div>

      <script language = "javascript">
         var pieChart = dc.pieChart('#pie');

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

            // gender dimension
            var genderDimension = mycrossfilter.dimension(function(data) { 
               return data.gender; 
            });
            var genderGroup = genderDimension.group().reduceCount();

            pieChart
               .width(800)
               .height(300)
               .dimension(genderDimension)
               .group(genderGroup)
               .on('renderlet', function(chart) {
                  chart.selectAll('rect').on('click', function(d) {
                     console.log('click!', d);
                  });
               });

            dc.renderAll();
         });
      </script>
   </body>
</html>

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

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

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

लाइन चार्ट बनाने के लिए आगे बढ़ने से पहले हमें समझना चाहिए 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>

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

बार चार्ट सबसे अधिक इस्तेमाल किए जाने वाले प्रकार के ग्राफ़ में से एक है और विभिन्न असतत श्रेणियों या समूहों के लिए संख्या, आवृत्ति या अन्य माप (उदाहरण के लिए) को प्रदर्शित करने और तुलना करने के लिए उपयोग किया जाता है। ग्राफ का निर्माण इस प्रकार किया जाता है कि विभिन्न पट्टियों की ऊँचाई या लम्बाई उस श्रेणी के आकार के समानुपाती होती है जिसका वे प्रतिनिधित्व करते हैं।

एक्स-अक्ष (क्षैतिज अक्ष) विभिन्न श्रेणियों का प्रतिनिधित्व करता है जिसका कोई पैमाना नहीं है। Y अक्ष (ऊर्ध्वाधर अक्ष) में एक पैमाना होता है और यह माप की इकाइयों को इंगित करता है। श्रेणियों की संख्या और लंबाई या जटिलता के आधार पर सलाखों को लंबवत या क्षैतिज रूप से खींचा जा सकता है।

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

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

dc.stackMixin
dc.coordinateGridMixin

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

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

हमेशाउपयोग करना (दौर)

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

बारपैडिंग ([पैड])

इस विधि का उपयोग बार आकार के एक अंश के रूप में सलाखों के बीच अंतर प्राप्त करने या स्थापित करने के लिए किया जाता है। संभावित पैडिंग मान 0-1 के बीच हैं।

केंद्रबार ([केंद्रबार])

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

गैप ([गैप])

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

आउटरपैडिंग ([पैड])

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

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

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

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

जैसा कि नीचे दिखाया गया है, हम एक चार्ट चर को परिभाषित करते हैं -

var chart = dc.barChart('#bar');

यहाँ, dc.barChart फ़ंक्शन को कंटेनर के साथ मैप किया गया है bar आईडी के रूप में।

चरण 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] के साथ एक नया रैखिक स्केल बनाने के लिए किया जाता है।
अगला, हम ब्रशऑन मान को गलत पर सेट करते हैं।
हम y- अक्ष लेबल को आयु के रूप में गिनती और x- अक्ष लेबल के रूप में निर्दिष्ट करते हैं।
अंत में, आयुसमूह फ़ंक्शन का उपयोग करके आयु समूह करें।

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

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

<html>
   <head>
      <title>DC Bar 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 = "bar"></div>
      </div>

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

         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>

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

समग्र चार्ट एक विशेष प्रकार का चार्ट है जो DC.js. द्वारा प्रदान किया जाता है। यह एक ही समन्वय ग्रिड में कई चार्ट प्रस्तुत करने का विकल्प प्रदान करता है। समग्र चार्ट कोड की एक न्यूनतम लाइन के साथ उन्नत चार्ट विज़ुअलाइज़ेशन विकल्पों को सक्षम करता है।

समग्र चार्ट के तरीके

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

dc.baseMixin
dc.marginMixin
dc.colorMixin
dc.coordinateGridMixin

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

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

रचना ([subChartArray])

एक ही समन्वयित ग्रिड चार्ट में प्रस्तुत किए जाने वाले चार्ट का संग्रह निर्धारित करें।

chart.compose([
   dc.lineChart(chart)
   dc.barChart(chart)
]);

बच्चे()

एक ही समन्वय ग्रिड में रचित सभी चार्ट प्राप्त करता है।

बच्चे (बच्चे के बच्चे)

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

shareTitle ([shareTitle])

चार्ट का साझा शीर्षक हो जाता है या सेट हो जाता है। यदि सेट किया जाता है, तो इसे सभी बच्चों के साथ एक ही समन्वित ग्रिड में बने चार्ट के साथ साझा किया जाएगा।

shareColors ([shareColors])

ShareTitle () फ़ंक्शन के समान, सिवाय इसके कि यह शीर्षक के बजाय रंगों को साझा करता है।

राईट ([yScale])

कंपोजिट चार्ट की सही धुरी के लिए y- स्केल प्राप्त करता है या सेट करता है।

rightYAxis ([rightYAxis])

समग्र चार्ट के सही y- अक्ष को प्राप्त या सेट करता है।

rightYAxisLabel (दायां xxLLabel [??])

सही y- अक्ष लेबल हो जाता है या सेट हो जाता है।

संरेखित करें ([संरेखित करें])

बाएं और दाएं y- अक्ष के बीच अलाइनमेंट हो जाता है या सेट हो जाता है।

useRightAxisGridLines ([उपयोगRightAxisGridLines])

हो जाता है या सेट करता है कि कंपोजिट चार्ट के दाएं y- अक्ष से ग्रिडलाइन्स खींचना है या नहीं। डिफ़ॉल्ट व्यवहार बाएं y- अक्ष से आकर्षित करना है।

समग्र चार्ट बनाएं

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

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

जैसा कि नीचे दिखाया गया है, हम एक चार्ट चर को परिभाषित करते हैं -

var chart = dc.compositeChart('#compoiste');

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

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

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

d3.csv("data/people.csv", function(errors, 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

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

चरण 3: डेटा को मैप करें

अब, नीचे दिखाए अनुसार डेटा मैप करें -

var ndx = crossfilter();

ndx.add(people.map(function(data) {
   return {
      age: ~~((Date.now() - new Date(data.DOB)) / (31557600000)),
      male: data.gender == 'Male' ? 1 : 0,
      female: data.gender == 'Male' ? 0 : 1
   };
}));

यहां, हमने क्रॉसफ़िल्टर डेटा से आयु को सौंपा। ~~ एक डबल बिटवेट ऑपरेटर नहीं है। इसका उपयोग तेज विकल्प के रूप में किया जाता है।

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

var dim  = ndx.dimension(dc.pluck('age')),

grp1 = dim.group().reduceSum(dc.pluck('male')),
grp2 = dim.group().reduceSum(dc.pluck('female'));

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

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

composite
   .width(768)
   .height(480)
   .x(d3.scale.linear().domain([15,70]))
   .yAxisLabel("Count")
   .xAxisLabel("Age")
   .legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
   .renderHorizontalGridLines(true)
   .compose ([
      dc.lineChart(composite)
         .dimension(dim)
         .colors('red')
         .group(grp1, "Male")
         .dashStyle([2,2]),
      dc.lineChart(composite)
         .dimension(dim)
         .colors('blue')
         .group(grp2, "Female")
         .dashStyle([5,5])
   ])
   
.brushOn(false)
.render();

यहाँ,

चार्ट की चौड़ाई 768 और ऊँचाई 480 है।
D3.scale.linear फ़ंक्शन का उपयोग निर्दिष्ट डोमेन रेंज [15, 70] के साथ एक नया रैखिक स्केल बनाने के लिए किया जाता है।
हम गणना के रूप में आयु और y- अक्ष लेबल के रूप में एक एक्स-अक्ष लेबल प्रदान करते हैं।
इसके बाद, क्षैतिज ग्रिड लाइनों को सच के रूप में प्रस्तुत करें।
लाइन चार्ट रंग मान लिखें - पुरुष लिंग के लिए लाल और महिला के लिए नीला।
अंत में, हम ब्रशऑन वैल्यू को गलत और चार्ट को रेंडर करने के लिए सेट करते हैं।

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

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

<html>
   <head>
      <title>DC composite 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 = "composite"></div>
      </div>

      <script type = "text/javascript">
         var composite = dc.compositeChart("#composite");

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

            ndx.add(people.map(function(data) {
               return {
                  age: ~~((Date.now() - new Date(data.DOB)) / (31557600000)),
                  male: data.gender == 'Male' ? 1 : 0,
                  female: data.gender == 'Male' ? 0 : 1
               };
            }));

            var dim  = ndx.dimension(dc.pluck('age')),

            grp1 = dim.group().reduceSum(dc.pluck('male')),
            grp2 = dim.group().reduceSum(dc.pluck('female'));

            composite
               .width(768)
               .height(480)
               .x(d3.scale.linear().domain([15,70]))
               .yAxisLabel("Count")
               .xAxisLabel("Age")
               .legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
               .renderHorizontalGridLines(true)
               .compose ([
                  dc.lineChart(composite)
                  .dimension(dim)
                  .colors('red')
                  .group(grp1, "Male")
                  .dashStyle([2,2]),
                  dc.lineChart(composite)
                     .dimension(dim)
                     .colors('blue')
                     .group(grp2, "Female")
                     .dashStyle([5,5])
               ])
               .brushOn(false)
               .render();
         });
      </script>
   </body>
</html>

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

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

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

श्रृंखला चार्ट बनाने के लिए आगे बढ़ने से पहले, हमें यह समझना चाहिए 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>

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

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

स्कैटर प्लॉट मेथड्स

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

dc.coordinateGridMixin

Dc.scatterPlot का पूरा वर्ग चित्र इस प्रकार है -

Dc.scatterPlot को उपरोक्त निर्दिष्ट मिश्रणों के सभी तरीके मिलते हैं। तितर बितर भूखंड को खींचने के लिए इसकी अपनी विधियां हैं, जिन्हें निम्नानुसार समझाया गया है।

रिवाज का प्रतीक ([प्रतीक])

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

खाली करना (आकार)

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

बहिष्कृत रंग ([रंग])

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

अपवर्जितता ([अस्पष्टता))

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

बहिष्कृत (आकार)

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

हाइलाइट किए गए आकार ([आकार])

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

प्रतीक ([प्रकार])

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

स्कैटर प्लॉट ड्रा करें

हमें डीसी में एक तितर बितर साजिश आकर्षित करते हैं। इस उदाहरण में, हम एक डाटासेट नाम लेते हैं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

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

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

howell1.csv

अब, डीसी में एक स्कैटर चार्ट बनाने के लिए बाद के चरणों का पालन करें।

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

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

var chart = dc.scatterPlot('#scatter');

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

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

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

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

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

चरण 3: रिकॉर्ड प्राप्त करें

आइए नीचे दिए गए कोडिंग का उपयोग करके रिकॉर्ड प्राप्त करें -

people.forEach(function(x) {
   if(x.male == 1) {
      x.gender = "Male";
   } else {
      x.gender = "Female";
   }
});

यहां, हमने लिंग की जांच की है।

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

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

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

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

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

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

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

chart
   .width(800)
   .height(600)
   .x(d3.scale.linear().domain([0,180]))
   .y(d3.scale.linear().domain([0,100]))
   .brushOn(false)
   .xAxisLabel("Height")
   .yAxisLabel("Weight")
   .symbolSize(8)
   .clipPadding(10)
   .dimension(hwDimension)
   .group(hwGroup);

यहाँ,

हमने चार्ट की चौड़ाई 800 और ऊंचाई 600 के रूप में दी है।
एक्स और वाई अक्ष दोनों के लिए d3.scale.linear () फ़ंक्शन को लागू किया।
झूठे के रूप में सक्षम ब्रशऑन मान।
फिर, वजन के रूप में ऊंचाई और y- अक्ष लेबल के रूप में एक्स-अक्ष लेबल सौंपा।
प्रतीक का आकार आठ और पैडिंग मान 10 के रूप में सेट करें।
अंत में, डेटा को ग्रुप करें और चार्ट को रेंडर करें।

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

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

<html>
   <head>
   <title>Scatter plot 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 = "scatter"></div>
      </div>

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

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

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

            chart
               .width(800)
               .height(600)
               .x(d3.scale.linear().domain([0,180]))
               .y(d3.scale.linear().domain([0,100]))
               .brushOn(false)
               .xAxisLabel("Height")
               .yAxisLabel("Weight")
               .symbolSize(8)
               .clipPadding(10)
               .dimension(hwDimension)
               .group(hwGroup);

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

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

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

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

बबल चार्ट बनाने के लिए आगे बढ़ने से पहले, हमें यह समझना चाहिए 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>

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

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

हीट मैप खींचने के लिए आगे बढ़ने से पहले, हमें यह समझना चाहिए 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>

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

डेटा सेट का उपयोग डेटा सेट में रिकॉर्ड की कुल संख्या को प्रदर्शित करने के लिए किया जाता है। यह निम्नलिखित दो प्रकार की गणना करता है -

Total-count - रिकॉर्ड की कुल संख्या।
Filter-count - वर्तमान फिल्टर द्वारा रिकॉर्ड किए गए रिकॉर्ड की संख्या।

डेटा गणना के तरीके

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

dc.baseMixin

Dc.dataCount इस मिक्सिन के सभी तरीकों को प्राप्त करता है और नीचे बताए अनुसार डेटा गणना दिखाने के लिए इसकी अपनी विधि है -

formatNumber ([फ़ॉर्मेटर])

इस पद्धति का उपयोग फ़िल्टर गणना और कुल गणना के लिए एक प्रारूप निर्धारित करने या करने के लिए किया जाता है।

html ([विकल्प])

चयनित आइटमों की संख्या दिखाने के लिए HTML टेम्पलेट प्राप्त करने या सेट करने के लिए इसका उपयोग किया जाता है।

For example -

counter.html ({
   all: 'HTML template to use if all items are selected'
})

यहां,%-काउंट का उपयोग करके सभी वस्तुओं का चयन करने के लिए 'सभी' का उपयोग किया जाता है। यदि हम केवल कुछ वस्तुओं का उपयोग करना चाहते हैं, तो हम कुछ रिकॉर्ड का उपयोग करके%-count विकल्प का उपयोग कर सकते हैं।

डेटा गणना उदाहरण

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

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

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

.dc-chart { font-size: 12px; }

यहां, हमने चार्ट के लिए शैलियों को सौंपा है।

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

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

var barChart = dc.barChart('#line'); 
var countChart = dc.dataCount("#mystats");

यहां, हमने एक बारचार् चर आईडी को लाइन में असाइन किया है, जबकि काउंटर्ट आईडी रहस्य है।

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

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

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

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

यहां, हम 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: आयाम सेट करें

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

// age dimension
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] के रूप में निर्दिष्ट किया है।
हमने एक्स-अक्ष लेबल को आयु और गणना के रूप में y- अक्ष लेबल के रूप में सेट किया है।
हमने लोच और एक्स फ़ंक्शन को सच के रूप में निर्दिष्ट किया है।

चरण 6: गिनती चार्ट बनाएं और प्रस्तुत करें

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

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

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

यहाँ, हमने एक क्रॉसफिल्टर चर को आयाम सौंपा है। अंत में, उम्र के आधार पर सभी रिकॉर्डों को समूहित करें।

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

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

<html>
   <head>
      <title>DC datacount 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; }
      </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>

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

         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());

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

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

डेटा गणना प्रारंभिक पृष्ठ नीचे दिखाया गया है।

एक विशेष आयु का चयन करने के बाद, यह नीचे दिए गए स्क्रीनशॉट में दिखाए गए अनुसार मायने रखता है।

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

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

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

dc.baseMixin

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

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

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

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

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

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

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 वैरिएबल आईडी को लाइन में असाइन किया है, countChart id मिस्ट्री है और टेबलचार्ट id mytable है।

चरण 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] के रूप में निर्दिष्ट किया है।
हमने एक्स-अक्ष लेबल को आयु और गणना के रूप में 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 के बीच की उम्र का चयन करने के बाद, यह नीचे दिए गए स्क्रीनशॉट में दिखाए अनुसार तालिका रिकॉर्ड प्रदर्शित करता है -

डेटा ग्रिड का उपयोग अभिलेखों को फ़िल्टर करने और प्रदर्शित करने के लिए किया जाता है। यह अध्याय डेटा ग्रिड के बारे में विस्तार से बताता है।

डेटा ग्रिड के तरीके

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

dc.baseMixin

DddataGrid में इस मिक्सिन के सभी तरीकों के साथ-साथ डेटा ग्रिड को ड्रा करने के अपने तरीके हैं, जिन्हें इस प्रकार समझाया गया है -

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

इसी तरह, आप एंडलिस () कर सकते हैं।

समूह (समारोह)

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

html ([html])

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

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

इसका उपयोग ऑर्डर फंक्शन को सॉर्ट करने के लिए किया जाता है।

आकार ([आकार])

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

SortBy ([SortByFunction])

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

chart.sortBy(function(d) {
   return d.age;
});

डेटा ग्रिड उदाहरण

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

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

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

.dc-chart { font-size: 12px; }
.dc-grid-top { padding-left: 10px; font-size: 14px; font-weight: bold; }
.dc-grid-item { padding-left: 10px; font-size: 12px; font-weight: normal; }

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

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

नीचे बताए अनुसार हम डीसी में एक चर बनाते हैं -

var barChart = dc.barChart('#line'); 
var countChart = dc.dataCount("#mystats");
var gridChart = dc.dataGrid("#mygrid");

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

चरण 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] के रूप में निर्दिष्ट किया है।
हमने एक्स-अक्ष लेबल को आयु और गणना के रूप में y- अक्ष लेबल के रूप में सेट किया है।
हमने लोच और एक्स फ़ंक्शन को सच के रूप में निर्दिष्ट किया है।

चरण 6: ग्रिड चार्ट बनाएं

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

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

चरण 7: ग्रिड रेंडर करें

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

.size(100)
   .htmlGroup (function(d) { 
      return 'Age: ' + d.key +
      '; Count: ' + d.values.length +
      ' people'
   })
   .html (function(d) { return d.name; })
   .sortBy(function (d) {
      return d.name;
   })
   .order(d3.ascending);

barChart.render();
countChart.render();
gridChart.render();

यहां, हमने html () फ़ंक्शन का उपयोग करके नाम को सॉर्ट किया है और अंत में चार्ट का प्रतिपादन किया है।

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

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

<html>
   <head>
      <title>DC datagrid 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-grid-top { padding-left: 10px; font-size: 14px; font-weight: bold; }
         .dc-grid-item { 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 class = "dc-data-grid" id = "mygrid"></div>
         </div>
      </div>

      <script language = "javascript">
         var barChart = dc.barChart('#line'); 
         var countChart = dc.dataCount("#mystats");
         var gridChart = dc.dataGrid("#mygrid");

         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());

            gridChart
               .dimension(ageDimension)
               .group(function (data) {
                  return ~~((Date.now() - new Date(data.DOB)) / (31557600000));
               })
               .size(100)
               .htmlGroup (function(d) { 
                  return 'Age: ' + d.key +
                  '; Count: ' + d.values.length +
                  ' people'
               })
               .html (function(d) { return d.name; })
               .sortBy(function (d) {
                  return d.name;
               })
               .order(d3.ascending);

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

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

प्रारंभ में, ग्रिड चार्ट निम्न स्क्रीनशॉट की तरह दिखता है।

यदि आप 63 और 66 के बीच एक विशेष आयु का चयन करते हैं, तो यह निम्नलिखित रिकॉर्ड को फ़िल्टर करता है।

लीजेंड एक अटैचमेंट स्क्रीन अनुकूलन है। क्षैतिज कथा लेबल को रेंडर करने के लिए इसे अन्य डीसी चार्ट में जोड़ा जा सकता है। इस अध्याय में पौराणिक कथा के बारे में विस्तार से बताया गया है।

किंवदंती के तरीके

किंवदंती निम्नलिखित महत्वपूर्ण तरीकों का समर्थन करती है। आइए हम उनमें से प्रत्येक के बारे में विस्तार से जाने।

AutoItemWidth ([चौड़ाई])

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

legend.autoItemWidth = function (width) {
   if (!arguments.length) {
      return _width;
   }
}

गैप ([गैप])

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

legend.gap = function (gap) {
   if (!arguments.length) {
      return _gap;
   }
}

क्षैतिज ([h])

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

_legend.horizontal = function (h) {
   if (!arguments.length) {
      return _h;
   }
};

आइटमहाइट ([आइटमहाइट])

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

legend.itemHeight = function (itemHeight) {
   if (!arguments.length) {
      return _itemHeight;
   }
};

आइटमविदथ ([आइटमविदथ])

इस पद्धति का उपयोग किंवदंती को क्षैतिज कथा के लिए आइटम की चौड़ाई निर्धारित करने या प्राप्त करने के लिए किया जाता है।

_legend.itemWidth = function (itemWidth) {
   if (!arguments.length) {
      return _itemWidth;
   }
};

पौराणिक कथा (पाठ)

इस विधि का उपयोग किंवदंती पाठ फ़ंक्शन को सेट करने या प्राप्त करने के लिए किया जाता है। किंवदंती विजेट प्रत्येक आइटम के लिए किंवदंती पाठ को प्रस्तुत करने के लिए इस फ़ंक्शन का उपयोग करता है। यदि कोई फ़ंक्शन निर्दिष्ट नहीं है, तो लेजेंड विजेट प्रत्येक समूह से जुड़े नामों को प्रदर्शित करेगा। एक सरल उदाहरण नीचे दिखाया गया है -

legend.legendText(dc.pluck('name'))

maxItems ([आइटम])

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

x ([x])

इसका उपयोग किंवदंती विजेट के लिए x- समन्वय स्थापित करने या प्राप्त करने के लिए किया जाता है और इसे नीचे परिभाषित किया गया है -

legend.x = function (x) {
   if (!arguments.length) {
      return _x;
   }
};

इसी तरह, आप y- कोऑर्डिनेट भी कर सकते हैं।

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

काम करने का उदाहरण

अब, हमारे पास पृष्ठभूमि है और कुछ कोड लिखना शुरू कर सकते हैं। इसमें निम्नलिखित चरण शामिल हैं -

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

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

<style>
   .dc-chart { font-size: 12px; }
   .dc-grid-top { padding-left: 10px; font-size: 14px; font-weight: bold; }
   .dc-grid-item { padding-left: 10px; font-size: 12px; font-weight: normal; }
</style>

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

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

हमें नीचे दिखाए अनुसार DC में एक वैरिएबल बनाते हैं।

var barChart = dc.barChart('#line');
var pieChart = dc.pieChart('#pie'); 
var countChart = dc.dataCount("#mystats");
var gridChart = dc.dataGrid("#mygrid");

यहाँ, हमने लाइन में एक BarChart वैरिएबल id दी है, countChart id मिस्ट्री है, pieChart पाई है और gridChart id mygrid है।

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

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

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

यदि डेटा मौजूद नहीं है, तो यह एक त्रुटि देता है। अब, डेटा को एक क्रॉसफ़िल्टर को असाइन करें। यहां, हमने उसी का उपयोग किया है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: लिंग के लिए आयाम निर्धारित करें

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

// gender dimension
var genderDimension = mycrossfilter.dimension(function(data) { return data.gender; });
var genderGroup = genderDimension.group().reduceCount();

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

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

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- अक्ष लेबल निर्धारित किया है।
हमने लोच और एक्स फ़ंक्शन को सच के रूप में निर्दिष्ट किया है।

चरण 7: एक पाई चार्ट बनाएं

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

pieChart
   .width(200)
   .height(100)
   .dimension(genderDimension)
   .group(genderGroup);

यहाँ,

हमने चार्ट की चौड़ाई 200 बताई है और ऊंचाई 100 की।
अब, लिंग द्वारा आयाम को समूहित करें।

चरण 8: ग्रिड और गिनती चार्ट बनाएं

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

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

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

चरण 9: ग्रिड रेंडर करें और गिनती करें

अब, ग्रिड को प्रस्तुत करें और नीचे कोडिंग का उपयोग करके गणना करें।

.size(100)
   .htmlGroup (function(d) { 
      return 'Age: ' + d.key +
      '; Count: ' + d.values.length +
      ' people'
   })
   .html (function(d) { return d.name; })
   .sortBy(function (d) {
      return d.name;
   })
   .order(d3.ascending);

barChart.render();
pieChart.render();
countChart.render();
gridChart.render();

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

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

<html>
   <head>
      <title>DC dashboard 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-grid-top { padding-left: 10px; font-size: 14px; font-weight: bold; }
         .dc-grid-item { 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 id = "pie"></div>
            </div>
         </div>

         <div style = "clear: both">
            <div class = "dc-data-grid" id = "mygrid"></div>
         </div>
      </div>

      <script language = "javascript">
         var barChart = dc.barChart('#line'); // , 'myChartGroup');
         var pieChart = dc.pieChart('#pie'); //, 'myChartGroup');
         var countChart = dc.dataCount("#mystats");
         var gridChart = dc.dataGrid("#mygrid");

         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();

            // gender dimension
            var genderDimension = mycrossfilter.dimension(function(data) { 
               return data.gender; 
            });
            var genderGroup = genderDimension.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);

         pieChart
            .width(200)
            .height(100)
            .dimension(genderDimension)
            .group(genderGroup);

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

         gridChart
            .dimension(ageDimension)
            .group(function (data) {
               return ~~((Date.now() - new Date(data.DOB)) / (31557600000));
            })
            .size(100)
            .htmlGroup (function(d) { 
               return 'Age: ' + d.key +
               '; Count: ' + d.values.length +
               ' people'
            })
            .html (function(d) { return d.name; })
            .sortBy(function (d) {
               return d.name;
            })
            .order(d3.ascending);

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

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

आप बार, पाई चार्ट पर क्लिक करके खुद देख सकते हैं कि डेटा कैसे बदलता है।