# सार्थक विज़ुअलाइज़ेशन बनाना | द्वारा ](../../sketchnotes/13-MeaningfulViz.png)| |:---:| | सार्थक विज़ुअलाइज़ेशन - _[@nitya](https://twitter.com/nitya) द्वारा स्केच नोट_ | > "अगर आप डेटा को लंबे समय तक परेशान करेंगे, तो वह कुछ भी स्वीकार कर लेगा" -- [रॉनाल्ड कोस](https://en.wikiquote.org/wiki/Ronald_Coase) एक डेटा वैज्ञानिक की बुनियादी कौशलों में से एक है सार्थक डेटा विज़ुअलाइज़ेशन बनाना, जो आपके सवालों का जवाब देने में मदद करता है। डेटा को विज़ुअलाइज़ करने से पहले, आपको यह सुनिश्चित करना होगा कि आपने इसे साफ और तैयार कर लिया है, जैसा कि आपने पिछले पाठों में किया था। इसके बाद, आप यह तय करना शुरू कर सकते हैं कि डेटा को सबसे अच्छे तरीके से कैसे प्रस्तुत किया जाए। इस पाठ में, आप निम्नलिखित की समीक्षा करेंगे: 1. सही चार्ट प्रकार कैसे चुनें 2. भ्रामक चार्टिंग से कैसे बचें 3. रंगों के साथ कैसे काम करें 4. अपने चार्ट को पढ़ने योग्य बनाने के लिए कैसे स्टाइल करें 5. एनिमेटेड या 3D चार्टिंग समाधान कैसे बनाएं 6. एक रचनात्मक विज़ुअलाइज़ेशन कैसे बनाएं ## [प्री-लेक्चर क्विज़](https://purple-hill-04aebfb03.1.azurestaticapps.net/quiz/24) ## सही चार्ट प्रकार चुनें पिछले पाठों में, आपने Matplotlib और Seaborn का उपयोग करके विभिन्न प्रकार के डेटा विज़ुअलाइज़ेशन बनाने का अभ्यास किया। सामान्य तौर पर, आप इस तालिका का उपयोग करके [सही प्रकार का चार्ट](https://chartio.com/learn/charts/how-to-select-a-data-vizualization/) चुन सकते हैं: | आपको करना है: | आपको उपयोग करना चाहिए: | | -------------------------- | ------------------------------------- | | समय के साथ डेटा रुझान दिखाएं | लाइन | | श्रेणियों की तुलना करें | बार, पाई | | कुल की तुलना करें | पाई, स्टैक्ड बार | | संबंध दिखाएं | स्कैटर, लाइन, फेसट, डुअल लाइन | | वितरण दिखाएं | स्कैटर, हिस्टोग्राम, बॉक्स | | अनुपात दिखाएं | पाई, डोनट, वाफल | > ✅ आपके डेटा की संरचना के आधार पर, आपको इसे टेक्स्ट से संख्यात्मक में बदलने की आवश्यकता हो सकती है ताकि एक दिए गए चार्ट का समर्थन किया जा सके। ## भ्रामकता से बचें भले ही एक डेटा वैज्ञानिक सही डेटा के लिए सही चार्ट चुनने में सावधान हो, डेटा को अक्सर इस तरह से प्रदर्शित किया जा सकता है कि यह एक बिंदु को साबित करे, लेकिन अक्सर डेटा की सच्चाई को कमजोर कर देता है। भ्रामक चार्ट और इन्फोग्राफिक्स के कई उदाहरण हैं! [](https://www.youtube.com/watch?v=oX74Nge8Wkw "हाउ चार्ट्स लाई") > 🎥 ऊपर दी गई छवि पर क्लिक करें भ्रामक चार्ट्स पर एक सम्मेलन वार्ता के लिए यह चार्ट X अक्ष को उलट देता है ताकि तारीख के आधार पर सच्चाई का उल्टा दिखाया जा सके:  [यह चार्ट](https://media.firstcoastnews.com/assets/WTLV/images/170ae16f-4643-438f-b689-50d66ca6a8d8/170ae16f-4643-438f-b689-50d66ca6a8d8_1140x641.jpg) और भी भ्रामक है, क्योंकि आंखें दाईं ओर खींची जाती हैं ताकि यह निष्कर्ष निकाला जा सके कि समय के साथ, विभिन्न काउंटियों में COVID मामलों में गिरावट आई है। वास्तव में, यदि आप तारीखों को ध्यान से देखें, तो आप पाएंगे कि उन्हें उस भ्रामक गिरावट प्रवृत्ति को दिखाने के लिए पुनर्व्यवस्थित किया गया है।  यह कुख्यात उदाहरण रंग और एक उलटे Y अक्ष का उपयोग करके धोखा देता है: बंदूक-समर्थक कानून पारित होने के बाद बंदूक मौतों में वृद्धि के बजाय, वास्तव में आंखें यह सोचने के लिए मूर्ख बन जाती हैं कि विपरीत सच है:  यह अजीब चार्ट दिखाता है कि अनुपात को कैसे मजाकिया तरीके से हेरफेर किया जा सकता है:  अतुलनीय की तुलना करना एक और संदिग्ध चाल है। 'स्प्यूरियस कोरिलेशन' नामक एक [शानदार वेबसाइट](https://tylervigen.com/spurious-correlations) है जो 'तथ्यों' को दिखाती है जैसे कि मेन में तलाक दर और मार्जरीन की खपत। एक Reddit समूह भी डेटा के [खराब उपयोग](https://www.reddit.com/r/dataisugly/top/?t=all) को एकत्र करता है। यह समझना महत्वपूर्ण है कि भ्रामक चार्ट्स द्वारा आंखें कितनी आसानी से मूर्ख बन सकती हैं। भले ही डेटा वैज्ञानिक का इरादा अच्छा हो, एक खराब प्रकार का चार्ट चुनना, जैसे कि बहुत अधिक श्रेणियों को दिखाने वाला पाई चार्ट, भ्रामक हो सकता है। ## रंग आपने ऊपर 'फ्लोरिडा गन वायलेंस' चार्ट में देखा कि कैसे रंग चार्ट्स में अतिरिक्त अर्थ प्रदान कर सकते हैं, विशेष रूप से वे जो Matplotlib और Seaborn जैसी लाइब्रेरी का उपयोग करके डिज़ाइन नहीं किए गए हैं, जो विभिन्न प्रमाणित रंग लाइब्रेरी और पैलेट के साथ आते हैं। यदि आप हाथ से चार्ट बना रहे हैं, तो [रंग सिद्धांत](https://colormatters.com/color-and-design/basic-color-theory) का थोड़ा अध्ययन करें। > ✅ चार्ट डिज़ाइन करते समय, ध्यान रखें कि एक्सेसिबिलिटी विज़ुअलाइज़ेशन का एक महत्वपूर्ण पहलू है। आपके कुछ उपयोगकर्ता रंग अंधे हो सकते हैं - क्या आपका चार्ट दृष्टि बाधित उपयोगकर्ताओं के लिए अच्छी तरह से प्रदर्शित होता है? अपने चार्ट के लिए रंग चुनते समय सावधान रहें, क्योंकि रंग वह अर्थ व्यक्त कर सकता है जिसे आप व्यक्त नहीं करना चाहते। ऊपर 'हाइट' चार्ट में 'पिंक लेडीज' एक विशिष्ट 'स्त्री' अर्थ व्यक्त करती हैं, जो चार्ट की विचित्रता को और बढ़ा देती है। हालांकि [रंग का अर्थ](https://colormatters.com/color-symbolism/the-meanings-of-colors) दुनिया के विभिन्न हिस्सों में अलग हो सकता है, और उनके शेड के अनुसार बदलने की प्रवृत्ति होती है। सामान्य तौर पर, रंग अर्थों में शामिल हैं: | रंग | अर्थ | | ------ | ------------------- | | लाल | शक्ति | | नीला | विश्वास, निष्ठा | | पीला | खुशी, सतर्कता | | हरा | पर्यावरण, भाग्य, ईर्ष्या | | बैंगनी | खुशी | | नारंगी | जीवंतता | यदि आपको कस्टम रंगों के साथ चार्ट बनाने का काम सौंपा गया है, तो सुनिश्चित करें कि आपके चार्ट्स एक्सेसिबल हैं और आपके द्वारा चुना गया रंग उस अर्थ के साथ मेल खाता है जिसे आप व्यक्त करना चाहते हैं। ## अपने चार्ट को पढ़ने योग्य बनाने के लिए स्टाइलिंग चार्ट्स सार्थक नहीं होते यदि वे पढ़ने योग्य नहीं होते! अपने डेटा के साथ अच्छी तरह से स्केल करने के लिए अपने चार्ट की चौड़ाई और ऊंचाई को स्टाइल करने पर विचार करें। यदि एक वेरिएबल (जैसे सभी 50 राज्यों) को प्रदर्शित करने की आवश्यकता है, तो उन्हें Y अक्ष पर लंबवत दिखाएं यदि संभव हो ताकि क्षैतिज रूप से स्क्रॉल करने वाले चार्ट से बचा जा सके। अपने अक्षों को लेबल करें, यदि आवश्यक हो तो एक लीजेंड प्रदान करें, और डेटा की बेहतर समझ के लिए टूलटिप्स की पेशकश करें। यदि आपका डेटा X अक्ष पर टेक्स्टुअल और विस्तृत है, तो बेहतर पढ़ने के लिए टेक्स्ट को कोण दें। [Matplotlib](https://matplotlib.org/stable/tutorials/toolkits/mplot3d.html) 3D प्लॉटिंग प्रदान करता है, यदि आपका डेटा इसका समर्थन करता है। `mpl_toolkits.mplot3d` का उपयोग करके परिष्कृत डेटा विज़ुअलाइज़ेशन बनाए जा सकते हैं।  ## एनिमेशन और 3D चार्ट डिस्प्ले आज के कुछ बेहतरीन डेटा विज़ुअलाइज़ेशन एनिमेटेड हैं। Shirley Wu ने D3 के साथ अद्भुत विज़ुअलाइज़ेशन बनाए हैं, जैसे '[फिल्म फ्लावर्स](http://bl.ocks.org/sxywu/raw/d612c6c653fb8b4d7ff3d422be164a5d/)', जहां प्रत्येक फूल एक फिल्म का विज़ुअलाइज़ेशन है। Guardian के लिए एक और उदाहरण है 'बस्ट आउट', एक इंटरैक्टिव अनुभव जो विज़ुअलाइज़ेशन को Greensock और D3 के साथ जोड़ता है और NYC के बेघर समस्या को दिखाने के लिए स्क्रॉलटेलिंग लेख प्रारूप का उपयोग करता है।  > "बस्ट आउट: अमेरिका अपने बेघर लोगों को कैसे स्थानांतरित करता है" [Guardian](https://www.theguardian.com/us-news/ng-interactive/2017/dec/20/bussed-out-america-moves-homeless-people-country-study) से। विज़ुअलाइज़ेशन Nadieh Bremer और Shirley Wu द्वारा हालांकि यह पाठ इन शक्तिशाली विज़ुअलाइज़ेशन लाइब्रेरी को गहराई से सिखाने के लिए पर्याप्त नहीं है, Vue.js ऐप में D3 का उपयोग करके 'डेंजरस लायज़न्स' पुस्तक का एनिमेटेड सोशल नेटवर्क विज़ुअलाइज़ेशन बनाने का प्रयास करें। > "Les Liaisons Dangereuses" एक पत्रात्मक उपन्यास है, या एक उपन्यास जो पत्रों की श्रृंखला के रूप में प्रस्तुत किया गया है। 1782 में Choderlos de Laclos द्वारा लिखा गया, यह 18वीं शताब्दी के फ्रांसीसी अभिजात वर्ग के दो प्रतिद्वंद्वी नायकों, Vicomte de Valmont और Marquise de Merteuil की क्रूर, नैतिक रूप से दिवालिया सामाजिक चालों की कहानी बताता है। दोनों अंत में अपनी मृत्यु का सामना करते हैं लेकिन सामाजिक नुकसान पहुंचाने से पहले नहीं। उपन्यास पत्रों की एक श्रृंखला के रूप में सामने आता है जो उनके सर्कल में विभिन्न लोगों को लिखे गए हैं, बदला लेने की योजना बनाने या बस परेशानी पैदा करने के लिए। इन पत्रों का विज़ुअलाइज़ेशन बनाएं ताकि कथा के प्रमुख पात्रों को दृश्य रूप से खोजा जा सके। आप एक वेब ऐप पूरा करेंगे जो इस सोशल नेटवर्क का एनिमेटेड दृश्य प्रदर्शित करेगा। यह एक लाइब्रेरी का उपयोग करता है जिसे Vue.js और D3 का उपयोग करके [नेटवर्क का विज़ुअल](https://github.com/emiliorizzo/vue-d3-network) बनाने के लिए बनाया गया था। जब ऐप चल रहा हो, तो आप स्क्रीन पर नोड्स को खींच सकते हैं ताकि डेटा को इधर-उधर किया जा सके।  ## प्रोजेक्ट: D3.js का उपयोग करके नेटवर्क दिखाने के लिए चार्ट बनाएं > इस पाठ फ़ोल्डर में एक `solution` फ़ोल्डर शामिल है जहां आप संदर्भ के लिए पूरा प्रोजेक्ट पा सकते हैं। 1. स्टार्ट फ़ोल्डर की रूट में README.md फ़ाइल में दिए गए निर्देशों का पालन करें। सुनिश्चित करें कि आपके मशीन पर NPM और Node.js चल रहे हैं इससे पहले कि आप अपने प्रोजेक्ट की डिपेंडेंसी इंस्टॉल करें। 2. `starter/src` फ़ोल्डर खोलें। आपको एक `assets` फ़ोल्डर मिलेगा जहां आप .json फ़ाइल पा सकते हैं जिसमें उपन्यास के सभी पत्र, क्रमांकित, 'to' और 'from' एनोटेशन के साथ हैं। 3. विज़ुअलाइज़ेशन को सक्षम करने के लिए `components/Nodes.vue` में कोड पूरा करें। `createLinks()` नामक विधि देखें और निम्नलिखित नेस्टेड लूप जोड़ें। .json ऑब्जेक्ट के माध्यम से लूप करें ताकि पत्रों के 'to' और 'from' डेटा को कैप्चर किया जा सके और `links` ऑब्जेक्ट को बनाया जा सके ताकि विज़ुअलाइज़ेशन लाइब्रेरी इसे उपयोग कर सके: ```javascript //loop through letters let f = 0; let t = 0; for (var i = 0; i < letters.length; i++) { for (var j = 0; j < characters.length; j++) { if (characters[j] == letters[i].from) { f = j; } if (characters[j] == letters[i].to) { t = j; } } this.links.push({ sid: f, tid: t }); } ``` अपने टर्मिनल से ऐप चलाएं (npm run serve) और विज़ुअलाइज़ेशन का आनंद लें! ## 🚀 चुनौती इंटरनेट पर भ्रमित करने वाले विज़ुअलाइज़ेशन की खोज करें। लेखक उपयोगकर्ता को कैसे मूर्ख बनाता है, और क्या यह जानबूझकर है? विज़ुअलाइज़ेशन को सही करने का प्रयास करें ताकि वे सही दिखें। ## [पोस्ट-लेक्चर क्विज़](https://purple-hill-04aebfb03.1.azurestaticapps.net/quiz/25) ## समीक्षा और स्व-अध्ययन भ्रामक डेटा विज़ुअलाइज़ेशन के बारे में पढ़ने के लिए यहां कुछ लेख हैं: https://gizmodo.com/how-to-lie-with-data-visualization-1563576606 http://ixd.prattsi.org/2017/12/visual-lies-usability-in-deceptive-data-visualizations/ ऐतिहासिक संपत्तियों और कलाकृतियों के लिए इन दिलचस्प विज़ुअलाइज़ेशन को देखें: https://handbook.pubpub.org/ एनिमेशन आपके विज़ुअलाइज़ेशन को कैसे बढ़ा सकता है, इस पर इस लेख को देखें: https://medium.com/@EvanSinar/use-animation-to-supercharge-data-visualization-cd905a882ad4 ## असाइनमेंट [अपना खुद का कस्टम विज़ुअलाइज़ेशन बनाएं](assignment.md) **अस्वीकरण**: यह दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता सुनिश्चित करने का प्रयास करते हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियां या अशुद्धियां हो सकती हैं। मूल भाषा में उपलब्ध मूल दस्तावेज़ को प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं।