🃏 🙀 💪🏿 आपके वेब प्रोजेक्ट के लिए डेटा विज़ुअलाइज़ेशन 👨🏿‍🎓 ↩️ 👩🏼‍🍳

अलेक्जेंडर Kasheverov, वरिष्ठ जावास्क्रिप्ट डेवलपर द्वारा पोस्ट किया गया

आपका स्वागत है और पढ़ने का आनंद लें!

उन लोगों के लिए एक लेख, जिन्होंने पहले वेब पर ग्राफिक्स का उपयोग नहीं किया है, लेकिन करने जा रहे हैं। उन लोगों के लिए भी जो इस विषय को अधिक गहराई से जानना चाहते हैं।

लक्ष्य विषय क्षेत्र को रोशन करना और एक विशिष्ट समाधान चुनने की समस्या को सरल बनाना है। पुस्तकालयों के बीच अंतर पर विचार करें और लोकप्रिय विकल्पों को देखें, उदाहरण और बहुत कम सिद्धांत होंगे।

एक बेहतर समझ के लिए - आपको जावास्क्रिप्ट के ज्ञान और वेब के काम की एक बुनियादी समझ की आवश्यकता है।

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

मेरा लेख शायद व्यापक नहीं है, इसलिए टिप्पणियां और निजी संदेश लिखें, मैं सामग्री को सुनने और पूरक करने के लिए तैयार हूं।

तो चलिए!

मान लीजिए कि आपके पास एक साइट है ...

... जिसे आप डेटा विज़ुअलाइज़ेशन के साथ रंगना चाहते थे।

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

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

उदाहरण के लिए, धन्यवाद पर संयुक्त राज्य अमेरिका के भीतर एयरलाइन टिकटों की मांग का दृश्य , जिसे न्यूयॉर्क टाइम्स ने 2015 में पेश किया था। इस तरह के दृश्य को कैसे लागू किया जाए यह तुरंत स्पष्ट नहीं है।

आप विषय क्षेत्र को जाने बिना समस्या का समाधान कैसे करेंगे? सबसे अधिक संभावना है कि विकल्पों में से एक चुनें:

"एक दोस्त की मदद" लें;
Google, समस्या का स्वयं अध्ययन करें और सही उपकरण चुनें।

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

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

तकनीकी विविधता
तकनीकी रूप से, हम किसी पृष्ठ पर डेटा की प्रस्तुति को विभिन्न तरीकों से कार्यान्वित कर सकते हैं:

HTML - क्यों नहीं? हम HTML टैग और CSS का उपयोग करके सबसे सरल बार-चार्ट बना सकते हैं।
एसवीजी एक वेक्टर ग्राफिक्स है, यह पैमाने की परवाह किए बिना एक स्पष्ट छवि की गारंटी देता है। इसका सिंटेक्स XML-जैसा है। सच है, अगर जटिल दृश्य के लिए कई दसियों हज़ार बिंदुओं की आवश्यकता होती है, तो यह प्रदर्शन को महत्वपूर्ण रूप से प्रभावित कर सकता है।
कैनवस - यहाँ हम लगभग कुछ भी आकर्षित कर सकते हैं। ऐसा करने के लिए, हमें पृष्ठ पर एक तत्व बनाने और एपीआई के माध्यम से इसे एक्सेस करने की आवश्यकता है। कुछ आकर्षित करें, रंग, पृष्ठभूमि, पाठ और इतने पर जोड़ें। कैनवस आमतौर पर बड़ी मात्रा में डेटा प्रस्तुत करते हैं।
WebGL - आपको तीन आयामी ग्राफिक्स खींचने की अनुमति देता है।
VML Microsoft, XML- जैसी एक अप्रचलित तकनीक है। उन लोगों के लिए उपयुक्त जिन्हें इंटरनेट एक्सप्लोरर में साइट के सामान्य संचालन को दसवें संस्करण से पुराने सुनिश्चित करना है।

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

क्रियात्मक विविधता

चार्ट कर सकते हैं:

विभिन्न प्रकार के हो:
रैखिक, स्तंभ, वृक्ष-जैसे, आदि।

चित्र यहाँ से लिए गए
अनुकूली बनें:
पेज आकार बदलने का जवाब।

चित्र यहाँ से लिया गया है ।
एनिमेटेड होने के लिए:
उदाहरण के लिए, तत्वों की उपस्थिति और हटाने की अनुमति दें।

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

बेशक, यह पूरी सूची नहीं है और इसे और अधिक विवरण में विस्तृत किया जा सकता है। लेकिन यह मुझे लगता है कि मैंने मुख्य विशेषताओं का नाम दिया है।

आइए गैर-तकनीकी विशिष्टताओं को देखें

यहाँ वे हैं:

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

अब चलिए अभ्यास करते हैं और उन वास्तविक उत्पादों पर विचार करते हैं जो बाजार में हैं।

2018 में लोकप्रिय समाधान

सशुल्क समाधान

यह पूरी सूची नहीं है, लेकिन यह कई लोकप्रिय पुस्तकालयों को सूचीबद्ध करने के लायक है:

फ्यूजनचैट्स टीम, इंडिया, 2002 द्वारा फ्यूजनचार्ट ।
AnyChart टीम द्वारा संयुक्त राज्य अमेरिका, 2003।
Amharts by AmCharts टीम, लिथुआनिया, 2004।
Highsoft टीम, नॉर्वे, 2009 द्वारा हाइचरेट्स।
Zingchart द्वारा ZingChart टीम, यूएसए, 2009।

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

नि: शुल्क समाधान

Google चार्ट , Google, यूएसए, 2007 द्वारा।
- विवरण
  उत्पाद एक विशाल चयन प्रदान करता है: सरल रैखिक से जटिल संयुक्त, बहु-स्तरीय चार्ट तक। कई तैयार उदाहरण हैं। सुविधाओं को लागू करना आसान है, उदाहरण के लिए, ग्राफिक्स को चित्रों के रूप में एम्बेड या निर्यात किया जा सकता है। पुस्तकालय विभिन्न ब्राउज़रों और प्लेटफार्मों के साथ संगत है, आईओएस और एंड्रॉइड पर चलता है, IE के पुराने संस्करणों का समर्थन करता है और प्लगइन्स की स्थापना की आवश्यकता नहीं है। दृश्य प्रतिपादन के लिए HTML, SVG, VML का उपयोग करता है। एक माइनस है - लाइसेंस के अनुसार, आप स्थानीय रूप से लाइब्रेरी फ़ाइलों का उपयोग नहीं कर सकते हैं।
- लाइसेंस
  उत्पाद मुक्त है, लेकिन खुला स्रोत नहीं है। आपको Google के सर्वर से लाइब्रेरी सोर्स कोड डाउनलोड करना होगा।
- सरल ग्राफ उदाहरण
- उदाहरण
माइक बोस्कोक , यूएसए, 2011 द्वारा डी 3 जे.जे.
- विवरण
  पुस्तकालय डेटा-संचालित दृष्टिकोण का अवतार होने का दावा करता है। कई अन्य लोगों के विपरीत, यह आपको डेटा को ठीक उसी तरह प्रदर्शित करने की अनुमति देता है जिस तरह से आप चाहते हैं। यह लचीली एपीआई के कारण है जिसकी आपको आदत पड़ती है। लाइब्रेरी की कार्यक्षमता आपको किसी भी चार्ट को अनुकूलित करने की अनुमति देती है और Google चार्ट्स की तुलना में अधिक सुविधाएँ प्रदान करती है (बाद वाला सबसे आम चार्ट विकल्प प्रस्तुत करता है)। प्रदर्शन के लिए, आप किसी भी विकल्प का उपयोग कर सकते हैं: html, svg, कैनवस, वेबल, ...
- लाइसेंस
  बीएसडी -3
- सरल ग्राफ उदाहरण
- उदाहरण
चीनी Baidu , चीन, 2013 द्वारा Echarts ।
- विवरण
  चीन से हमारे दोस्तों के डेटा की कल्पना के लिए एक मुफ्त पुस्तकालय। यह वास्तव में ध्यान देने योग्य है, यह तैयार-निर्मित, काफी अच्छी तरह से अनुकूलन करने योग्य मानक चार्ट और उनके संयोजन का एक सेट प्रदान करता है। मैं बॉक्स से बाहर एक अच्छा यूआई और अन्तरक्रियाशीलता नोट करता हूँ। पुस्तकालय डेटा के बड़े संस्करणों के साथ अच्छी तरह से काम करता है और इसमें 3 डी ग्राफ़ सहित कई उदाहरण शामिल हैं। शुद्ध जेएस में लिखा गया, ज़ेंडर लाइब्रेरी का उपयोग कैनवास रेंडरिंग इंजन के रूप में करता है। मंत्रालयों में से - सभी विवरण अंग्रेजी में नहीं हैं और अंग्रेजी बोलने वाला समुदाय छोटा है।
- लाइसेंस
  बीएसडी
- सरल ग्राफ उदाहरण
- उदाहरण
चार्ट.जेएस ओपन-सोर्स योगदानकर्ताओं द्वारा , दुनिया भर में, 2013।
- विवरण
  पुस्तकालय कई प्रकार के रेखांकन (लेखन के समय 8) के मूल सेट का उपयोग करने का सुझाव देता है। ग्राफिक्स रेंडर करने के लिए कैनवास का उपयोग करता है। एक त्वरित शुरुआत के लिए बहुत अच्छी ट्यूब लाइब्रेरी। मैं यूआई और सुंदर डिजाइन, साथ ही साथ विकास में आसानी पर ध्यान देता हूं।
- लाइसेंस
  एमआईटी
- सरल ग्राफ उदाहरण
- उदाहरण
एक व्यक्तिगत डेवलपर Gion Kunz , स्विट्जरलैंड द्वारा चार्टिस्ट , 2014।
- विवरण
  यह सुंदर उत्तरदायी चार्ट, अनुकूलन का एक सा और एक त्वरित शुरुआत प्रदान करता है। Minuses के - केवल तीन प्रकार के चार्ट (लेखन के समय), साथ ही उनके कुछ संयोजन। ग्राफिक्स रेंडर करने के लिए SVG का उपयोग करता है। अपनी सुंदरता के साथ एक और गर्म, दीपक पुस्तकालय, लेकिन काफी संकीर्ण गुंजाइश।
- लाइसेंस
  एमआईटी
- सरल ग्राफ उदाहरण
- उदाहरण
प्लॉटली टीम, कनाडा, 2015 द्वारा प्लॉट किए गए।
- विवरण
  यह लाइब्रेरी D3.js और stack.gl पर आधारित है। एक उच्च-स्तरीय, घोषणात्मक दृष्टिकोण ध्यान देने योग्य है। यह त्रि-आयामी सहित 20 प्रकार के रेखांकन (लेखन के समय) प्रदान करता है। डी 3जे, जो अंडरलाइ करता है, आपको ग्राफिक्स को अच्छी तरह से अनुकूलित करने की अनुमति देता है। ग्राफिक्स रेंडर करने के लिए SVG, WebGL का उपयोग करता है। एमआईटी लाइसेंस के साथ चार्ट की मात्रा और गुणवत्ता का संयोजन बड़े उत्पादों के डेवलपर्स के लिए आकर्षक हो सकता है।
- लाइसेंस
  एमआईटी
- सरल ग्राफ उदाहरण

मुझे उम्मीद है कि ये विवरण उस समाधान को निर्धारित करने में मदद करेंगे जो आपके कार्य के लिए सही है। अंत में, प्रेरणा के लिए कुछ दिलचस्प दृश्य उदाहरण।

उदाहरण

उबेर से यातायात का दृश्य । Uber जावास्क्रिप्ट और WebGL का उपयोग करके बड़ी मात्रा में ट्रैफ़िक डेटा की कल्पना करता है। इसके लिए पुस्तकालय Uber द्वारा विकसित किया जा रहा है, और MIT लाइसेंस के साथ।
इंटरैक्टिव इन्फोग्राफिक: "प्रसिद्ध रचनात्मक लोगों की दैनिक दिनचर्या । " एक साधारण HTML + सीएसएस लेआउट द्वारा कार्यान्वित।
दिन के दौरान औसत अमेरिकी की कक्षाएं । डेटा एक सर्वेक्षण के आधार पर प्राप्त किया गया था, और उनका विज़ुअलाइज़ेशन डी 3 पर किया गया था, एसवीजी का उपयोग किया जाता है।

आप सभी को धन्यवाद!

आपके वेब प्रोजेक्ट के लिए डेटा विज़ुअलाइज़ेशन