d3 js tutorial data visualization framework
यह D3.js ट्यूटोरियल डी 3.जेएस क्या है, इसके फायदे, विशेषताएं, चरण-दर-चरण इंस्टॉलेशन प्रक्रिया, और बहुत सारे हैंड-ऑन उदाहरण बताता है, जिससे आप डी 3 सीख सकते हैं:
यह ट्यूटोरियल बताता है कि HTML, डॉक्यूमेंट ऑब्जेक्ट मॉडल (DOM), कैस्केडिंग स्टाइल शीट्स (सीएसएस), स्केलेबल वेक्टर ग्राफिक्स (SVG), कैनवस, और का उपयोग करके डेटा-विज़ुअलाइज़ेशन जावास्क्रिप्ट लाइब्रेरी का उपयोग कैसे किया जा सकता है। एक वेब ब्राउज़र के माध्यम से जावास्क्रिप्ट।
इस ढांचे का उपयोग करते हुए, एक्सएमएल, सीएसवी, या जेएसएन प्रारूप में बाहरी डेटा को वेब सर्वर पर चार्ट, ग्राफ़ या कई विज़ुअलाइज़ेशन प्रारूपों में परिवर्तित किया जा सकता है।
इस ट्यूटोरियल में, हम इस जावास्क्रिप्ट लाइब्रेरी से सभी फंक्शन्स के बारे में जानेंगे और देखेंगे कि कैसे हम वेब ब्राउजर का उपयोग करके वेब सर्वर के माध्यम से डेटा की कल्पना कर सकते हैं।
चलो शुरू करते हैं!!
आप क्या सीखेंगे:
- डी 3 क्या है। जे.एस.
- वेब अवधारणाओं और मानकों को समझना
- D3.js लाइब्रेरी से विभिन्न तरीके और एपीआई
- निष्कर्ष
डी 3 क्या है। जे.एस.
डी 3.जेएस एक डेटा-संचालित फ्रेमवर्क है जो एक हल्के जावास्क्रिप्ट लाइब्रेरी है और कोड की कम लाइनों की आवश्यकता होती है, जो इंटरेक्टिव डेटा विज़ुअलाइज़ेशन चार्ट, ग्राफ़ और भू-स्थानिक मानचित्र प्राप्त करने के लिए बड़े डेटा को संभालने के लिए उपयुक्त है।
यह एक ओपन-सोर्स जावास्क्रिप्ट लाइब्रेरी है जिसका उपयोग मुख्य रूप से डेटा की खोज और विश्लेषण के लिए वेब पेजों के DOM तत्वों में हेरफेर करके ग्राफिकल विज़ुअलाइज़ेशन को प्लॉट करने के लिए किया जाता है।
एक सरणी, XML, CSV और JSON जैसे डेटा स्वरूपों में संग्रहीत डेटा को इस जावास्क्रिप्ट लाइब्रेरी का उपयोग करके HTML तत्वों, कैनवास, या स्केलेबल वेक्टर ग्राफिक्स (SVG) के आकार को जोड़कर ग्राफ़, चार्ट, और कई तरीकों में परिवर्तित किया जा सकता है।
मोबाइल और अन्य उपकरणों से कॉल डिटेल रिकॉर्ड, संदेश, चर्चा, या ट्विटर, फेसबुक, व्हाट्सएप जैसे सोशल मीडिया प्लेटफॉर्म से ट्विट लॉग के रूप में बड़ा डेटा, मार्केट ट्रेंड से लॉग और ट्रेडिंग जानकारी लॉग को चार्ट, ग्राफ़ या में परिवर्तित किया जा सकता है। इस जावास्क्रिप्ट पुस्तकालय का उपयोग करते हुए विभिन्न दृश्य।
ट्विटर, फेसबुक और व्हाट्सएप जैसे विभिन्न सामाजिक नेटवर्किंग प्लेटफार्मों के आगमन के बाद से, विभिन्न संचार जैसे कि ट्विट, संदेश और टिप्पणी लॉग को कैप्चर किए गए विषयों को समझने और भावना पैदा करने के लिए चार्ट, ग्राफ़ आदि जैसे दृश्य स्वरूपों में परिवर्तित किया जा सकता है। विश्लेषण।
दूरसंचार टॉवरों से संदिग्ध कॉल विवरण रिकॉर्ड के समूह के तौर-तरीकों को समझना आसान हो जाता है और संदिग्ध आपराधिक गतिविधियों में शामिल होने के मामले में उनके कॉल पैटर्न की निगरानी करते हैं।
स्टॉक एक्सचेंज में होने वाले परिवर्तनों के आधार पर, बॉम्बे स्टॉक एक्सचेंज (बीएसई), नेशनल स्टॉक एक्सचेंज (एनएसई) जैसे स्टॉक इंडेक्स, जो शेयरों की कीमतों के आंदोलन को दर्शाता है, बाजार की भावनाओं को तय करते हैं और निवेशकों को खरीद या बिक्री में मार्गदर्शन करते हैं। स्टॉक का।
D3.js चार्ट या ग्राफ़ बनाने के लिए मार्केट शेयर गतिविधियों को रूपांतरित कर सकते हैं जो भविष्य में अपराधों या सूचनाओं में किसी भी संलिप्तता की जांच के लिए कॉल डिटेल रिकॉर्ड्स के रूप में बाजार के रुझान या मोबाइल डेटा की संभावना का अनुमान लगा सकते हैं।
D3.js की विशेषताएं
- डेटा-चालित: यह मुख्य रूप से डेटा का पता लगाने और विश्लेषण करने और डेटा की कल्पना करने के लिए इंटरैक्टिव रियल-टाइम ग्राफ़, चार्ट और व्यापक तरीके बनाने के लिए उपयोग किया जाता है।
- डोम हेरफेर: यह एक ओपन-सोर्स जावास्क्रिप्ट लाइब्रेरी है जो DOM तत्वों में हेरफेर करके विभिन्न विज़ुअलाइज़ेशन प्रारूपों में डेटा को परिवर्तित करता है।
- वेब मानकों का उपयोग: यह डेटा विज़ुअलाइज़ेशन प्रारूप बनाने के लिए डॉक्यूमेंट ऑब्जेक्ट मॉडल (DOM), HTML, कैस्केडिंग स्टाइल शीट (CSS), स्केलेबल वेक्टर ग्राफिक्स (SVG) और कैनवास का उपयोग करता है।
- तेज और इंटरएक्टिव: यह डेटा में परिवर्तन करने के लिए अत्यधिक उत्तरदायी है, और एक राज्य से दूसरे राज्य में चयनित DOM तत्व को जल्दी से बदल या बदल सकता है।
- गतिशील परिवर्तन प्रदर्शित करें: इस पुस्तकालय को DOM के साथ त्वरित उत्तरदायी दृश्य उत्पन्न करने के लिए एक तेज गतिशील संक्रमण बनाने के लिए डिज़ाइन किया गया है।
D3.js का उपयोग करने के लाभ
- यह एक ओपन-सोर्स जावास्क्रिप्ट लाइब्रेरी है जिसका उपयोग अन्य जावास्क्रिप्ट फ्रेमवर्क जैसे कि Angular.JS, Ember.JS, या React के साथ किया जा सकता है।
- यह लाइब्रेरी ओपन-सोर्स है, इसलिए कोई व्यक्ति अपने लक्ष्यों को पूरा करने के लिए अपनी स्वयं की सुविधाओं को स्रोत कोड में जोड़ सकता है।
- यह डोम, एचटीएमएल, सीएसएस, एसवीजी और कैनवास जैसे वेब मानकों को संभालता है, इसलिए इसे किसी ब्राउज़र के अलावा किसी अन्य प्लग-इन की आवश्यकता नहीं है, इसके लिए किसी अतिरिक्त डीबगिंग या लर्निंग टूल की आवश्यकता नहीं है।
- यह डोम तत्वों में हेरफेर करके गतिशील, वास्तविक समय परिवर्तन कर सकता है, बिना किसी विलंबता के डेटा विज़ुअलाइज़ेशन में जल्दी से।
- यह डेटा पर काम करता है और जावास्क्रिप्ट लाइब्रेरी में मौजूद डेटा विज़ुअलाइज़ेशन फ़ंक्शन के साथ विशिष्ट और उचित है।
सीखने के लिए आवश्यकताएँ
- पाठ संपादक: HTML, CSS, JavaScript जैसे प्रोग्रामिंग कोड लिखने के लिए नोटपैड ++ या विम जैसे टेक्स्ट एडिटर की आवश्यकता होती है और वांछित आवश्यकता को पूरा करने के लिए उन्हें एकीकृत किया जाता है।
- वेब ब्राउज़र: किसी भी आधुनिक वेब ब्राउज़र, जैसे फ़ायरफ़ॉक्स, गूगल क्रोम, सफारी, ओपेरा या IE9 को कोड को एकीकृत करने के बाद उत्पन्न होने वाले आउटपुट की जांच और सत्यापन के लिए स्थापित किया जाना चाहिए।
- HTML: HTML टैग्स और संरचना की अच्छी समझ एक बुनियादी वेब पेज बनाने और अगले स्तर पर विज़ुअलाइज़ेशन लाने के लिए तत्वों को संरेखित करने में मदद करेगी।
- सीएसएस: कैस्केडिंग स्टाइल शीट (CSS) का उपयोग वेब पेजों के लिए डिज़ाइन, लेआउट और स्क्रीन आकार सहित शैलियों को लागू करने के लिए किया जाता है।
- जुदाई: दस्तावेज़ ऑब्जेक्ट मॉडल (DOM) की मजबूत समझ आवश्यक है क्योंकि वेब दस्तावेज़ों की संरचना और सामग्री को जानना आसान होगा, डेटा विज़ुअलाइज़ेशन के लिए D3.js तक DOM तत्वों को एक्सेस करना आसान होगा।
- जावास्क्रिप्ट: बुनियादी बातों और जावास्क्रिप्ट वस्तुओं की परिचितता सीखने और डी 3 को लागू करने के लिए एक शर्त है। हमारे आवेदन में ताकि डेटा विज़ुअलाइज़ेशन को वेबसर्वर में देखा जा सके।
- वेब सर्वर: Apache Tomcat या IIS (इंटरनेट इनफॉर्मेशन सर्विसेज) सर्वर की तरह एक वेब सर्वर स्थापित होना आवश्यक है, ताकि डेटा को किसी सरणी, ऑब्जेक्ट, XML, CSV, JSON फॉर्मेट में बाहरी रूप से अपलोड किया जा सके और इसे D3 की मदद से बदला जा सके। ग्राफ़, चार्ट और भू-स्थानिक दृश्य जैसे विज़ुअलाइज़ेशन स्वरूपों में js।
D3.js की स्थापना / सेट अप
हमारे वेब पृष्ठों में डेटा विज़ुअलाइज़ेशन बनाने के लिए, हमें अपने HTML वेब पेज में D3.js को शामिल करना होगा।
यह निम्नलिखित तरीकों से किया जा सकता है:
- हमारे क्लाइंट मशीन में D3.js लाइब्रेरी डाउनलोड करें और इसमें d3.min.js का पथ शामिल करें