डेटा विज़ुअलाइज़ेशन के लिए Crossfilter.js, dc.js और D3.js

सुंदर और कार्यात्मक डेटा विज़ुअलाइज़ेशन के प्रेमियों को शुभकामनाएँ! मैं आपके ध्यान में कई जावास्क्रिप्ट पुस्तकालयों का एक छोटा सा अवलोकन लाता हूं, जो कि D3.js के साथ मिलकर , आपको मक्खी पर फ़िल्टरिंग लागू करने की संभावना के साथ बहुआयामी डेटा का एक इंटरैक्टिव विज़ुअलाइज़ेशन बनाने की अनुमति देगा।


रुचि है, तो बिल्ली में आपका स्वागत है।

नोट: यह लेख कुछ हद तक अद्भुत ब्लॉग www.d3noob.org के कई लेखों का संकलन है, जो डेटा विज़ुअलाइज़ेशन के कार्य की मेरी दृष्टि के अनुसार संशोधित और पूरक हैं।

डेटा विज़ुअलाइज़ेशन और एनालिटिक्स

हमारे देश में, इन्फोग्राफिक्स मुख्य रूप से डिजाइनरों द्वारा बनाई गई छवियों (कभी-कभी बहुत खराब नहीं) से जुड़े होते हैं, हालांकि हाल ही में वीडियो भी अधिक सक्रिय हो गए हैं। यह केवल विपणक द्वारा कब्जा किए गए हिमशैल की नोक है, लेकिन असली शक्ति केवल गोताखोर विश्लेषकों और प्रोग्रामर के लिए उपलब्ध है। लेकिन स्थिति के बारे में किसी तरह एक और समय, और अब चलो इंटरैक्टिव इन्फोग्राफिक्स पर वापस आते हैं। आमतौर पर, "इंटरैक्टिव" शब्द का अर्थ है टूलटिप्स प्रदर्शित करने की क्षमता, पैमाने को बदलना, कभी-कभी फ़िल्टर लागू करना और डेटा संरचना को बदलना, लेकिन यह सब, एक नियम के रूप में, पूर्व-विचार आउट लॉजिक (स्क्रिप्ट) का पालन करता है। अब कल्पना करें कि आप कम से कम प्रतिबंधों के साथ डेटा प्रवाह को स्वयं नियंत्रित कर सकते हैं, कल्पना करें कि आप सूची से पसंद तक सीमित न होकर सरल (बिना फॉर्मूलों के) फिल्टर सेट कर सकते हैं। अब और भी कल्पना करें, अर्थात्: सभी परिवर्तन एक बहुआयामी डेटा सरणी का प्रतिनिधित्व करने वाले सभी ग्राफ़ पर लगभग तुरंत प्रदर्शित होते हैं। अच्छा लगता है, है ना?

Crossfilter.js

क्रॉसफ़िल्टर एक ब्राउज़र में बहुआयामी डेटा के साथ काम करने के लिए जावास्क्रिप्ट लाइब्रेरी है। क्रॉसफ़िल्टर एक लाख से अधिक रेखाओं को समाहित किए हुए भले ही आपस में जुड़े डेटा अभ्यावेदन (बहुआयामी डेटा के स्लाइस) के लिए बहुत तेज़ इंटरचेंज (30ms से कम) प्रदान करता है। लाइब्रेरी को सीधे d3.js से संबंधित लोगों द्वारा बनाया गया था, ये माइक बोस्कॉक और जेसन डेविस हैं ।

डेटा के साथ काम करने के दिल में अब फैशनेबल मैप-रिड्यूस के सिद्धांत हैं। एक ऐसे व्यक्ति के लिए जिसने पहले इसका सामना नहीं किया है, यह सब जटिल और भ्रमित करने वाला लगता है, तो आइए इसे समझें। तो वे आमतौर पर बहुआयामी डेटा (एक्सेल से पिवट टेबल याद करते हैं) के साथ क्या करते हैं? उन्हें आमतौर पर विभिन्न तरीकों से वर्गीकृत किया जाता है, संक्षेपित, क्रमबद्ध, मूल्यों की घटना की आवृत्ति आदि गिना जाता है। इसके लिए कमी जिम्मेदार है, और मैप इन सभी जोड़तोड़ों की समानांतर गणना प्रदान करता है। बेशक, वास्तव में, सब कुछ थोड़ा अधिक जटिल है, लेकिन, मुझे लगता है, यह पहली सन्निकटन के लिए करेगा।

तो क्रॉसफ़िल्टर क्या कर सकता है

जैसा कि वे कहते हैं, इसे एक बार देखना बेहतर है, लेकिन आप इसे जीथब लाइब्रेरी के पेज पर कर सकते हैं।


हमसे पहले विभिन्न वर्गों में 231,083 उड़ानों के बारे में जानकारी है। यहां हम पांच डेटा प्रतिनिधित्व देखते हैं: चार बार चार्ट और एक टेबल। Time of Day ग्राफ घंटे के हिसाब से उड़ानों के वितरण को प्रदर्शित करता है। Arrival delay 10 मिनट के अंतराल में समूहीकृत उड़ान देरी की संख्या के वितरण को दर्शाती है। Distance उड़ान रेंज (अंतराल 50 मील) द्वारा उड़ानों के वितरण को दर्शाता है। Date - प्रति दिन उड़ानों की संख्या। और यह सब क्लाइंट की ओर से प्रस्तुत किया गया था, अर्थात्, हमारे ब्राउज़र में, आप देखते हैं, यह इतने डेटा के लिए बुरा नहीं है।

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

और सबसे महत्वपूर्ण बात, "अपाचे लाइसेंस 2.0 के तहत जारी" की यह सभी भव्यता।

बचाव के लिए DC.js

यदि आप क्रॉसफिल्टर के लिए डेमो कोड को देखते हैं, तो आप देखेंगे कि यह 500 से अधिक लाइनों पर फैला हुआ है। ऐसा इसलिए है क्योंकि क्रॉसफिल्टर डेटा की कल्पना करने के लिए नहीं बनाया गया था, बल्कि इसे हेरफेर करने के लिए बनाया गया था। D3.js , बदले में, केवल डेटा विज़ुअलाइज़ेशन के लिए बनाया गया था। यहाँ हम बचाव dc.js पुस्तकालय लेखक निक क्यूई झू के पास आते हैं , जो एक शक्तिशाली उपकरण में हमारे लिए ब्याज की दो प्रौद्योगिकियों को जोड़ती है । दुर्भाग्य से, D3.js रेखांकन की पूरी विविधता हमारे लिए उपलब्ध नहीं होगी, लेकिन जो dc.js में कार्यान्वित की जाती हैं, वे ज्यादातर मामलों के लिए पर्याप्त हैं । DC.js निम्नलिखित चार्ट प्रकारों का समर्थन करता है:

• बार चार्ट
• पाई चार्ट
• पंक्ति चार्ट
• लाइन चार्ट
• बबल चार्ट
• जियो कोरोप्लेथ चार्ट
• डेटा तालिका

कार्यान्वित चार्ट के उदाहरण गिथब प्रोजेक्ट पृष्ठ पर देखे जा सकते हैं। लाइब्रेरी को अपाचे लाइसेंस 2.0 के तहत भी प्रकाशित किया गया है।

अधिक सुंदर और कार्यात्मक इन्फोग्राफिक्स

ठीक है, अब आप कुछ और डेटा विज़ुअलाइज़ेशन टूल जानते हैं और आप ऑन-द-फ्लाई फ़िल्टरिंग के साथ मल्टी-कंपोनेंट ग्राफ़ बना सकते हैं। मैं आपकी योजनाओं के कार्यान्वयन में सफलता की कामना करता हूं।

डेटा विज़ुअलाइज़ेशन हब

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