2018 में जानने के लायक 11 जावास्क्रिप्ट दृश्य पुस्तकालय

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

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

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


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

1. डी 3

डी 3 लाइब्रेरी

शायद ओपन सोर्स लाइब्रेरी डी 3 (जिसे डी 3 भी कहा जाता है) को डेटा विज़ुअलाइज़ेशन के लिए मौजूदा जेएस लाइब्रेरी में सबसे लोकप्रिय कहा जा सकता है। विशेष रूप से, इस परियोजना ने गिटहब पर लगभग 80 हजार सितारों को एकत्र किया है। लाइब्रेरी को HTML, SVG और CSS जैसी तकनीकों का उपयोग करके डेटा की कल्पना करने के लिए बनाया गया था।

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

वैसे, इस राय पर ध्यान दें कि डी 3 डेटा विज़ुअलाइज़ेशन के लिए बिल्कुल भी लाइब्रेरी नहीं है । हम मानते हैं कि आप खुद तय कर सकते हैं कि इस पर क्या विचार करना है, और क्या इसे अपने प्रोजेक्ट में इस्तेमाल करना है।

2. चार्ट.जेएस

Chart.js

चार्ट.जेएस लाइब्रेरी, जिसने गीथहब पर लगभग 40 हजार सितारों का संग्रह किया है, एचटीएमएल 5-ग्राफिक्स और <canvas> आधार पर आरेख बनाने के लिए एक बहुत ही लोकप्रिय समाधान है, जिसे उत्तरदायी वेब अनुप्रयोगों को विकसित करने के लिए डिज़ाइन किया गया है। पुस्तकालय का वर्तमान दूसरा संस्करण विभिन्न प्रकार के रेखांकन के संयोजन का समर्थन करता है (8 मूल प्रकार के रेखांकन हैं), विभिन्न समन्वय प्रणाली। Chart.js का उपयोग क्षण के साथ संयोजन के रूप में किया जा सकता है ।js पुस्तकालय। पुस्तकालय, यदि आवश्यक हो, cdnjs से डाउनलोड किया जा सकता है।

3. तीन .js

Three.js

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

4. ECharts और Highcharts जेएस

ECharts के साथ काम करने का एक उदाहरण ( यहाँ से ली गई छवि)

ECharts एक Baidu परियोजना है, जिसने GitHub पर लगभग 30 हजार सितारों को एकत्र किया है, जो एक ब्राउज़र में डेटा विज़ुअलाइज़ेशन और ग्राफ़िंग के लिए एक पुस्तकालय है। यह शुद्ध जावास्क्रिप्ट में <canvas> साथ काम करने के लिए डिज़ाइन किए गए ज़ेंडर लाइब्रेरी का उपयोग करके लिखा गया है।

पुस्तकालय <canvas> , एसवीजी (4.0+) और वीएमएल का उपयोग करके ग्राफिंग का समर्थन करता है। ECharts का उपयोग न केवल डेस्कटॉप या मोबाइल ब्राउज़र के लिए डिज़ाइन किए गए पृष्ठों के विकास में किया जा सकता है, बल्कि प्रभावी सर्वर रेंडरिंग के संगठन के लिए भी किया जा सकता है। यहां इस लाइब्रेरी का उपयोग करने के उदाहरणों की एक गैलरी है, जिसके साथ आप एक इंटरैक्टिव वातावरण में प्रयोग कर सकते हैं।


हाईचर्स जे.एस.

Highcharts JS पुस्तकालय काफी व्यापक रूप से उपयोग किया जाता है, इसने GitHub पर लगभग 8 हजार सितारों को एकत्र किया। डेटा विज़ुअलाइज़ेशन के लिए उसके द्वारा उपयोग किया जाने वाला मुख्य तंत्र SVG तकनीक है, जो ब्राउज़रों के पुराने संस्करणों के लिए VML और <canvas> पर स्विच करने की क्षमता रखता है। ऐसा कहा जाता है कि दुनिया की 100 सबसे बड़ी कंपनियों में से 72 इस लाइब्रेरी का उपयोग करती हैं, जो अगर सही है, तो यह लाइब्रेरी फेसबुक और ट्विटर जैसी बड़ी कंपनियों के बीच सबसे लोकप्रिय चार्टिंग समाधान बनाती है।

5. मेट्रिक्सग्राफिक्स.जेएस

MetricsGraphics.js

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

6. रिचार्ज

Recharts

GitHub पर लगभग 10,000 सितारों के साथ Recharts पुस्तकालय, एक React और D3- आधारित चार्टिंग समाधान है, जो घोषित प्रतिक्रिया घटकों के साथ काम करने जैसा दिखता है। पुस्तकालय एसवीजी के लिए डेवलपर का समर्थन देता है। इसका हल्का निर्भरता वृक्ष (डी 3 सबमॉड्यूल्स पर आधारित) घटक गुणों के माध्यम से अत्यधिक अनुकूलन योग्य है। यहां आप इसके उपयोग के उदाहरण पा सकते हैं।

7. रफाल

Raphaël

रैफेल की "वेक्टर" लाइब्रेरी (गीथहब पर लगभग 10 हजार सितारे) एक वेब वातावरण में वेक्टर ग्राफिक्स के साथ काम करने के लिए डिज़ाइन की गई है। वह, ग्राफिक ऑब्जेक्ट्स बनाने के लिए बुनियादी तकनीक के रूप में, एसवीजी और वीएमएल का उपयोग करती है। नतीजतन, ग्राफ़िकल ऑब्जेक्ट भी DOM ऑब्जेक्ट हैं जिन्हें आप जावास्क्रिप्ट, ईवेंट हैंडलर का उपयोग करके कनेक्ट कर सकते हैं। पुस्तकालय वर्तमान में फ़ायरफ़ॉक्स 3.0+, सफारी 3.0+, क्रोम 5.0+, ओपेरा 9.5+ और इंटरनेट एक्सप्लोरर 6.0+ जैसे ब्राउज़रों का समर्थन करता है।

7. सी 3

C3 पुस्तकालय उदाहरण

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

8. रिएक्ट-विज़, रिएक्ट वर्चुअलाइज्ड, विजय

रिएक्ट-विज़ घटक किट

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



रिएक्टिज्ड कंपोनेंट सेट

रिएक्ट वर्चुअलाइज्ड घटकों (गीथहब पर लगभग 12 हजार सितारों) के सेट को टैब्लेट डेटा के बड़े सेट के प्रभावी प्रतिपादन को व्यवस्थित करने के लिए डिज़ाइन किया गया है। रिएक्ट वर्चुअलाइज्ड ईएस 6, कॉमनजस और यूएमडी बिल्ड उपलब्ध हैं, प्रोजेक्ट वेबपैक 4 का समर्थन करता है। यदि आप घटकों के इस सेट का उपयोग करने का इरादा रखते हैं, तो इसके प्रलेखन में निर्भरता अनुभाग पर ध्यान दें।


विजय घटक संग्रह

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

9. CartoDB

CartoDB सेवा

कार्टो प्लेटफ़ॉर्म (गिटहब पर लगभग 2 हज़ार सितारे) को जियोडाटा के दृश्य और विश्लेषण के लिए डिज़ाइन किया गया है। इस प्लेटफ़ॉर्म पर, आप जियोडाटा डाउनलोड कर सकते हैं (उदाहरण के लिए, शेपफाइल्स या जियोजेन्स फॉरमेट में), उन्हें कल्पना करें, उन्हें मानचित्र पर रखें, कार्टोएसएस का उपयोग करके उन्हें स्टाइल करें, आप एसक्यूएल का उपयोग करके उन्हें खोज सकते हैं। इस प्लेटफ़ॉर्म के साथ काम करने पर वीडियो ट्यूटोरियल हैं।

10. रॉग्राफ

RAWGraphs

GitHub पर लगभग 5,000 सितारों के साथ RAWGraphs पुस्तकालय एक उपकरण प्रदान करता है जो आपको विज़ुअलाइज़ेशन टूल के साथ डेटा युक्त तालिकाओं को जोड़ने की अनुमति देता है। RAWGraphs D3 पर आधारित है, यह डेवलपर्स को अपने स्वयं के वेक्टर डेटा विज़ुअलाइज़ेशन बनाने की अनुमति देता है। यह विभिन्न स्वरूपों में सारणीबद्ध डेटा के साथ काम करता है, और डेटा का समर्थन करता है जिसे बस अन्य अनुप्रयोगों से कॉपी किया जा सकता है। RAWGraphs के परिणाम एसवीजी प्रारूप में प्रस्तुत किए जाते हैं, उन्हें उपयुक्त अनुप्रयोगों का उपयोग करके संपादित किया जा सकता है, या अपरिवर्तित वेब पृष्ठों पर उपयोग किया जा सकता है। यहाँ इस पुस्तकालय का उपयोग करने के उदाहरण हैं ।

11. मेटाबेस

मेटाबेस

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

बोनस लाइब्रेरी: Taucharts

Taucharts

Taucharts डेटा विज़ुअलाइज़ेशन लाइब्रेरी (GitHub पर लगभग 2 हज़ार सितारे) डी 3 लाइब्रेरी पर आधारित है। यह डेवलपर को दृश्य गुणों के साथ डेटा फ़ील्ड के कनेक्शन को जल्दी से व्यवस्थित करने के लिए एक घोषणात्मक इंटरफ़ेस प्रदान करता है। इसकी वास्तुकला आपको चार्ट बनाने की अनुमति देती है जिसमें एक्स और वाई निर्देशांक ( पहलू चार्ट ) का उपयोग करके चर को समूहीकृत किया जाता है। Taucharts आपको पुन: उपयोग के लिए उपयुक्त प्लगइन्स के साथ चार्ट के व्यवहार का विस्तार करने की अनुमति देता है।

परिणाम

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

• plotly.js
• चार्टिस्ट-js
• लाक्षणिक
• nvd3
• viser
• tui.charts
• datamaps
• shetsee.js
• BizCharts
• सिग्मा-js
• विज़

प्रिय पाठकों! अपनी वेब परियोजनाओं में डेटा की कल्पना करने के लिए आप किन पुस्तकालयों का उपयोग करते हैं?