# अर्थपूर्ण दृश्यहरू बनाउने | ](../../sketchnotes/13-MeaningfulViz.png)| |:---:| | अर्थपूर्ण दृश्यहरू - _Sketchnote by [@nitya](https://twitter.com/nitya)_ | > "यदि तपाईंले डेटा लामो समयसम्म यातना दिनुभयो भने, यसले केही पनि स्वीकार गर्नेछ" -- [Ronald Coase](https://en.wikiquote.org/wiki/Ronald_Coase) डेटा वैज्ञानिकको आधारभूत सीपहरूमध्ये एक भनेको अर्थपूर्ण डेटा दृश्य बनाउने क्षमता हो जसले तपाईंलाई आवश्यक प्रश्नहरूको उत्तर दिन मद्दत गर्दछ। तपाईंको डेटा दृश्य बनाउनु अघि, तपाईंले यसलाई सफा र तयार पार्नुपर्छ, जस्तै तपाईंले अघिल्लो पाठहरूमा गरेको थियो। त्यसपछि, तपाईंले डेटा प्रस्तुत गर्ने उत्तम तरिका निर्णय गर्न सुरु गर्न सक्नुहुन्छ। यस पाठमा, तपाईंले समीक्षा गर्नुहुनेछ: 1. सही चार्ट प्रकार कसरी चयन गर्ने 2. भ्रामक चार्टिङबाट कसरी बच्ने 3. रंगसँग कसरी काम गर्ने 4. पढ्न सजिलो बनाउन चार्टहरू कसरी शैली बनाउने 5. एनिमेटेड वा 3D चार्टिङ समाधान कसरी बनाउने 6. रचनात्मक दृश्य कसरी बनाउने ## [पाठ अघि क्विज](https://ff-quizzes.netlify.app/en/ds/quiz/24) ## सही चार्ट प्रकार चयन गर्नुहोस् अघिल्लो पाठहरूमा, तपाईंले Matplotlib र Seaborn प्रयोग गरेर विभिन्न प्रकारका रोचक डेटा दृश्यहरू निर्माण गर्ने अभ्यास गर्नुभएको थियो। सामान्यतया, तपाईंले सोधिएको प्रश्नको लागि [सही प्रकारको चार्ट](https://chartio.com/learn/charts/how-to-select-a-data-vizualization/) चयन गर्न निम्न तालिका प्रयोग गर्न सक्नुहुन्छ: | तपाईंलाई चाहिन्छ: | तपाईंले प्रयोग गर्नुपर्छ: | | -------------------------- | ------------------------------- | | समयको साथ डेटा प्रवृत्ति देखाउनुहोस् | रेखा | | श्रेणीहरूको तुलना गर्नुहोस् | बार, पाई | | कुलहरूको तुलना गर्नुहोस् | पाई, स्ट्याक्ड बार | | सम्बन्ध देखाउनुहोस् | स्क्याटर, रेखा, फेसट, डुअल रेखा | | वितरण देखाउनुहोस् | स्क्याटर, हिस्टोग्राम, बक्स | | अनुपात देखाउनुहोस् | पाई, डोनट, वाफल | > ✅ तपाईंको डेटा कस्तो छ भन्ने आधारमा, तपाईंले यसलाई पाठबाट संख्यात्मकमा रूपान्तरण गर्न आवश्यक हुन सक्छ ताकि चार्टले यसलाई समर्थन गर्न सकून्। ## भ्रामक चार्टिङबाट बच्नुहोस् सही डेटा र सही चार्ट चयन गरे पनि, डेटा वैज्ञानिकले डेटा प्रस्तुत गर्ने तरिकामा गल्ती गर्न सक्छन् जसले गलत निष्कर्ष दिन सक्छ। भ्रामक चार्ट र इन्फोग्राफिक्सका धेरै उदाहरणहरू छन्! [](https://www.youtube.com/watch?v=oX74Nge8Wkw "How charts lie") > 🎥 माथिको चित्रमा क्लिक गर्नुहोस् भ्रामक चार्टहरूको बारेमा सम्मेलनको कुरा सुन्न यो चार्टले 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) पनि सङ्कलन गर्दछ। भ्रामक चार्टहरूले आँखा कति सजिलै झुक्याउन सक्छ भन्ने कुरा बुझ्न महत्त्वपूर्ण छ। डेटा वैज्ञानिकको उद्देश्य राम्रो भए पनि, गलत प्रकारको चार्ट चयन गर्दा, जस्तै धेरै श्रेणीहरू भएको पाई चार्ट, भ्रामक हुन सक्छ। ## रंग तपाईंले माथिको 'फ्लोरिडा बन्दुक हिंसा' चार्टमा देख्नुभयो कि रंगले चार्टमा थप अर्थ प्रदान गर्न सक्छ। यदि तपाईंले चार्ट हातले बनाउँदै हुनुहुन्छ भने, [रंग सिद्धान्त](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/)', जहाँ प्रत्येक फूलले फिल्मको दृश्य प्रस्तुत गर्दछ। अर्को उदाहरण 'बुस्ड आउट' हो, जसले 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 औं शताब्दीको अभिजात वर्गका दुई पात्रहरूको सामाजिक चालबाजीको कथा बताउँछ। उपन्यास पत्रहरूको श्रृंखला रूपमा प्रस्तुत गरिएको छ। यसलाई दृश्यात्मक रूपमा प्रस्तुत गर्नुहोस्। तपाईंले Vue.js र D3 प्रयोग गरेर सामाजिक नेटवर्कको एनिमेटेड दृश्य देखाउने वेब एप पूरा गर्नुहुनेछ। एप चल्दा, तपाईं स्क्रिनमा नोडहरू तान्न सक्नुहुन्छ।  ## परियोजना: D3.js प्रयोग गरेर नेटवर्क देखाउने चार्ट बनाउनुहोस् > यो पाठको फोल्डरमा `solution` फोल्डर समावेश छ जहाँ तपाईं पूरा परियोजना हेर्न सक्नुहुन्छ। 1. `starter` फोल्डरको रूटमा 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://ff-quizzes.netlify.app/en/ds/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) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादहरूमा त्रुटि वा अशुद्धता हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।