parent
dcb21b0d5f
commit
3fd822008f
@ -1,151 +1,175 @@
|
|||||||
# सार्थक डेटा विज़ुअलाइज़ेशन बनाना
|
# सार्थक विज़ुअलाइज़ेशन बनाना
|
||||||
|
|
||||||
| द्वारा ](../../sketchnotes/13-MeaningfulViz.png)|
|
| ](../../sketchnotes/13-MeaningfulViz.png)|
|
||||||
|:---:|
|
|:---:|
|
||||||
| सार्थक डेटा विज़ुअलाइज़ेशन - _[@nitya](https://twitter.com/nitya) द्वारा स्केच नोट_ |
|
| सार्थक विज़ुअलाइज़ेशन - _स्केचनोट द्वारा [@nitya](https://twitter.com/nitya)_ |
|
||||||
|
|
||||||
> "यदि आप डेटा को लंबे समय तक परेशान करेंगे, तो यह कुछ भी स्वीकार कर लेगा" -- [रॉनाल्ड कोस](https://en.wikiquote.org/wiki/Ronald_Coase)
|
> "अगर आप डेटा को पर्याप्त देर तक सताएंगे, तो यह कुछ भी स्वीकार कर लेगा" -- [Ronald Coase](https://en.wikiquote.org/wiki/Ronald_Coase)
|
||||||
|
|
||||||
डेटा वैज्ञानिक की एक बुनियादी कौशल यह है कि वह एक ऐसा सार्थक डेटा विज़ुअलाइज़ेशन बना सके जो आपके सवालों का जवाब देने में मदद करे। डेटा को विज़ुअलाइज़ करने से पहले, आपको यह सुनिश्चित करना होगा कि आपने इसे साफ और तैयार कर लिया है, जैसा कि आपने पिछले पाठों में किया था। इसके बाद, आप यह तय करना शुरू कर सकते हैं कि डेटा को सबसे अच्छे तरीके से कैसे प्रस्तुत किया जाए।
|
एक डेटा वैज्ञानिक का एक मूल कौशल है सार्थक डेटा विज़ुअलाइज़ेशन बनाना जो आपके प्रश्नों का उत्तर देने में मदद करे। डेटा को विज़ुअलाइज़ करने से पहले, आपको यह सुनिश्चित करना होगा कि इसे पहले की तरह साफ़ और तैयार किया गया हो। उसके बाद, आप निर्णय ले सकते हैं कि डेटा को सबसे अच्छी तरह कैसे प्रस्तुत किया जाए।
|
||||||
|
|
||||||
इस पाठ में, आप निम्नलिखित की समीक्षा करेंगे:
|
इस पाठ में, आप समीक्षा करेंगे:
|
||||||
|
|
||||||
1. सही चार्ट प्रकार कैसे चुनें
|
1. सही चार्ट प्रकार कैसे चुनें
|
||||||
2. भ्रामक चार्टिंग से कैसे बचें
|
2. धोखाधड़ी करने वाले चार्टिंग से कैसे बचें
|
||||||
3. रंगों के साथ कैसे काम करें
|
3. रंग का उपयोग कैसे करें
|
||||||
4. अपने चार्ट को पठनीय बनाने के लिए कैसे स्टाइल करें
|
4. पठनीयता के लिए अपने चार्ट को कैसे स्टाइल करें
|
||||||
5. एनिमेटेड या 3D चार्टिंग समाधान कैसे बनाएं
|
5. एनिमेटेड या 3D चार्टिंग समाधान कैसे बनाएं
|
||||||
6. एक रचनात्मक विज़ुअलाइज़ेशन कैसे बनाएं
|
6. रचनात्मक विज़ुअलाइज़ेशन कैसे बनाएं
|
||||||
|
|
||||||
## [पाठ-पूर्व क्विज़](https://ff-quizzes.netlify.app/en/ds/quiz/24)
|
## [प्राच्याविचार क्विज़](https://ff-quizzes.netlify.app/en/ds/quiz/24)
|
||||||
|
|
||||||
## सही चार्ट प्रकार चुनें
|
## सही चार्ट प्रकार चुनें
|
||||||
|
|
||||||
पिछले पाठों में, आपने Matplotlib और Seaborn का उपयोग करके विभिन्न प्रकार के डेटा विज़ुअलाइज़ेशन बनाने का अभ्यास किया। सामान्य तौर पर, आप इस तालिका का उपयोग करके [सही प्रकार का चार्ट](https://chartio.com/learn/charts/how-to-select-a-data-vizualization/) चुन सकते हैं:
|
पिछले पाठों में, आपने Matplotlib और Seaborn का उपयोग करके सभी प्रकार के रोचक डेटा विज़ुअलाइज़ेशन बनाने का प्रयोग किया था। सामान्यतः, आप पूछे जा रहे प्रश्न के लिए इस तालिका का उपयोग करके सही प्रकार का चार्ट चुन सकते हैं:
|
||||||
|
|
||||||
| आपको यह करना है: | आपको यह उपयोग करना चाहिए: |
|
| आपको क्या करना है: | आपको इसका उपयोग करना चाहिए: |
|
||||||
| -------------------------- | ------------------------------- |
|
| ------------------------- | ------------------------------ |
|
||||||
| समय के साथ डेटा रुझान दिखाएं | लाइन |
|
| समय के साथ डेटा प्रवृत्तियों को दिखाना | लाइन |
|
||||||
| श्रेणियों की तुलना करें | बार, पाई |
|
| श्रेणियों की तुलना करना | बार, पाई |
|
||||||
| कुल की तुलना करें | पाई, स्टैक्ड बार |
|
| कुलों की तुलना करना | पाई, स्टैक्ड बार |
|
||||||
| संबंध दिखाएं | स्कैटर, लाइन, फेसट, डुअल लाइन |
|
| सम्बन्ध दिखाना | स्कैटर, लाइन, फेसट, ड्यूल लाइन |
|
||||||
| वितरण दिखाएं | स्कैटर, हिस्टोग्राम, बॉक्स |
|
| वितरण दिखाना | स्कैटर, हिस्टोग्राम, बॉक्स |
|
||||||
| अनुपात दिखाएं | पाई, डोनट, वाफल |
|
| अनुपात दिखाना | पाई, डोनट, वाफल |
|
||||||
|
|
||||||
> ✅ आपके डेटा की संरचना के आधार पर, आपको इसे टेक्स्ट से संख्यात्मक में बदलने की आवश्यकता हो सकती है ताकि चार्ट इसे समर्थन कर सके।
|
> ✅ अपने डेटा की संरचना के आधार पर, आपको टेक्स्ट को संख्यात्मक में परिवर्तित करना पड़ सकता है ताकि कोई दिया गया चार्ट इसे समर्थित कर सके।
|
||||||
|
|
||||||
## भ्रामकता से बचें
|
## धोखा देने से बचें
|
||||||
|
|
||||||
भले ही डेटा वैज्ञानिक सही डेटा के लिए सही चार्ट चुनने में सावधानी बरतें, फिर भी डेटा को इस तरह से प्रदर्शित करने के कई तरीके हैं जो किसी बिंदु को साबित करते हैं, अक्सर डेटा की सच्चाई को कमजोर करने की कीमत पर। भ्रामक चार्ट और इन्फोग्राफिक्स के कई उदाहरण हैं!
|
यहां तक कि यदि एक डेटा वैज्ञानिक सही डेटा के लिए सही चार्ट चुनने में सावधान भी हो, तो डेटा को साबित करने के लिए कई तरीके होते हैं जिनमें अक्सर डेटा का ही अपमान होता है। धोखा देने वाले चार्ट और इन्फोग्राफिक्स के कई उदाहरण हैं!
|
||||||
|
|
||||||
[](https://www.youtube.com/watch?v=oX74Nge8Wkw "हाउ चार्ट्स लाई")
|
[](https://www.youtube.com/watch?v=oX74Nge8Wkw "How charts lie")
|
||||||
|
|
||||||
> 🎥 भ्रामक चार्ट्स पर एक सम्मेलन वार्ता के लिए ऊपर दी गई छवि पर क्लिक करें
|
> 🎥 धोखा देने वाले चार्ट्स पर एक सम्मेलन बातचीत के लिए ऊपर चित्र पर क्लिक करें
|
||||||
|
|
||||||
यह चार्ट X अक्ष को उलट देता है ताकि तारीख के आधार पर सच्चाई के विपरीत दिखाया जा सके:
|
यह चार्ट X अक्ष को उलटा करता है ताकि तारीख के आधार पर सच्चाई के विपरीत दिखा सके:
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
[यह चार्ट](https://media.firstcoastnews.com/assets/WTLV/images/170ae16f-4643-438f-b689-50d66ca6a8d8/170ae16f-4643-438f-b689-50d66ca6a8d8_1140x641.jpg) और भी भ्रामक है, क्योंकि आंखें दाईं ओर खिंचती हैं और यह निष्कर्ष निकालती हैं कि समय के साथ विभिन्न काउंटियों में COVID मामलों में गिरावट आई है। वास्तव में, यदि आप तारीखों को ध्यान से देखें, तो आप पाएंगे कि उन्हें इस भ्रामक गिरावट प्रवृत्ति को दिखाने के लिए पुनर्व्यवस्थित किया गया है।
|
[यह चार्ट](https://media.firstcoastnews.com/assets/WTLV/images/170ae16f-4643-438f-b689-50d66ca6a8d8/170ae16f-4643-438f-b689-50d66ca6a8d8_1140x641.jpg) और भी अधिक धोखाधड़ीपूर्ण है, क्योंकि आंखें दाहिनी तरफ आकर्षित होती हैं और निष्कर्ष निकालती हैं कि समय के साथ, विभिन्न काउंटियों में COVID मामलों में कमी आई है। वास्तव में, यदि आप तिथियों को ध्यान से देखें, तो आप पाएंगे कि उन्हें धोखा देने वाली नीचे की ओर प्रवृत्ति दिखाने के लिए पुन: व्यवस्थित किया गया है।
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
यह कुख्यात उदाहरण रंग और एक उलटे Y अक्ष का उपयोग करके धोखा देता है: बंदूक-अनुकूल कानून पारित होने के बाद बंदूक से होने वाली मौतों में वृद्धि के बजाय, आंखें यह सोचने के लिए मूर्ख बनती हैं कि इसके विपरीत सच है:
|
यह कुख्यात उदाहरण रंग और एक उल्टा Y अक्ष का उपयोग करता है धोखा देने के लिए: बंदूक-समर्थक कानून की पारित होने के बाद बंदूक मौतों में वृद्धि के बजाय, आंख को धोखा दिया गया है कि इसके विपरीत सच है:
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
यह अजीब चार्ट दिखाता है कि अनुपात को कैसे हास्यास्पद प्रभाव के लिए हेरफेर किया जा सकता है:
|
यह विचित्र चार्ट दिखाता है कि अनुपात को कैसे हँसोड़ प्रभाव के लिए चालाकी से बदला जा सकता है:
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
अतुलनीय की तुलना करना एक और संदिग्ध चाल है। 'स्प्यूरियस कोरिलेशन' नामक एक [शानदार वेबसाइट](https://tylervigen.com/spurious-correlations) है, जो 'तथ्यों' को दिखाती है, जैसे कि मेन में तलाक की दर और मार्जरीन की खपत। एक Reddit समूह भी डेटा के [खराब उपयोग](https://www.reddit.com/r/dataisugly/top/?t=all) को एकत्र करता है।
|
अतुलनीय की तुलना करना एक और संदिग्ध चाल है। एक [शानदार वेबसाइट](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) का थोड़ा अध्ययन करें।
|
आपने ऊपर 'फ्लोरिडा बंदूक हिंसा' के चार्ट में देखा कि रंग कैसे चार्ट्स को अतिरिक्त अर्थ दे सकता है, खासकर उन चार्ट्स में जो Matplotlib और Seaborn जैसी लाइब्रेरीज का उपयोग नहीं करते जिनमें कई अनुमोदित रंग पुस्तकालय और पैलेट्स आते हैं। यदि आप हाथ से एक चार्ट बना रहे हैं, तो [रंग सिद्धांत](https://colormatters.com/color-and-design/basic-color-theory) का थोड़ा अध्ययन करें।
|
||||||
|
|
||||||
> ✅ चार्ट डिज़ाइन करते समय, यह ध्यान रखें कि एक्सेसिबिलिटी विज़ुअलाइज़ेशन का एक महत्वपूर्ण पहलू है। आपके कुछ उपयोगकर्ता रंग-अंधे हो सकते हैं - क्या आपका चार्ट दृष्टिबाधित उपयोगकर्ताओं के लिए अच्छी तरह से प्रदर्शित होता है?
|
> ✅ ध्यान रखें, चार्ट डिजाइन करते समय पहुँच योग्यता विज़ुअलाइज़ेशन का एक महत्वपूर्ण पहलू है। आपके कुछ उपयोगकर्ता रंग अंध हो सकते हैं - क्या आपका चार्ट दृष्टिबाधित उपयोगकर्ताओं के लिए अच्छी तरह दिखता है?
|
||||||
|
|
||||||
अपने चार्ट के लिए रंग चुनते समय सावधान रहें, क्योंकि रंग ऐसा अर्थ व्यक्त कर सकता है जिसे आप व्यक्त नहीं करना चाहते। ऊपर 'हाइट' चार्ट में 'पिंक लेडीज़' एक विशिष्ट 'स्त्रीलिंग' अर्थ व्यक्त करती हैं, जो चार्ट की विचित्रता को और बढ़ा देती है।
|
अपने चार्ट के लिए रंग चुनते समय सावधानी बरतें, क्योंकि रंग ऐसा अर्थ प्रदान कर सकता है जो आप अभिप्रेत नहीं करते। ऊपर 'ऊंचाई' चार्ट में 'गुलाबी महिलाएं' स्पष्ट रूप से 'मादा' अर्थ प्रदान करती हैं जो चार्ट की विचित्रता में इज़ाफ़ा करती है।
|
||||||
|
|
||||||
हालांकि [रंग का अर्थ](https://colormatters.com/color-symbolism/the-meanings-of-colors) दुनिया के विभिन्न हिस्सों में अलग-अलग हो सकता है और उनके शेड के अनुसार बदल सकता है। सामान्य तौर पर, रंग के अर्थ निम्नलिखित होते हैं:
|
हालांकि [रंग का अर्थ](https://colormatters.com/color-symbolism/the-meanings-of-colors) दुनिया के विभिन्न हिस्सों में अलग हो सकता है, और उनकी छाया के अनुसार अर्थ बदल सकता है। सामान्य रूप से, रंगों का अर्थ निम्नलिखित होता है:
|
||||||
|
|
||||||
| रंग | अर्थ |
|
| रंग | अर्थ |
|
||||||
| ------ | ------------------- |
|
| ------ | -------------------- |
|
||||||
| लाल | शक्ति |
|
| लाल | शक्ति |
|
||||||
| नीला | विश्वास, निष्ठा |
|
| नीला | विश्वास, निष्ठा |
|
||||||
| पीला | खुशी, सावधानी |
|
| पीला | खुशी, सावधानी |
|
||||||
| हरा | पर्यावरण, भाग्य, ईर्ष्या |
|
| हरा | पर्यावरण, भाग्य, ईर्ष्या |
|
||||||
| बैंगनी | खुशी |
|
| बैंगनी | खुशी |
|
||||||
| नारंगी | जीवंतता |
|
| नारंगी | जीवंतता |
|
||||||
|
|
||||||
यदि आपको कस्टम रंगों के साथ चार्ट बनाने का कार्य सौंपा गया है, तो सुनिश्चित करें कि आपके चार्ट न केवल एक्सेसिबल हैं, बल्कि आपके द्वारा चुने गए रंग उस अर्थ के साथ मेल खाते हैं जिसे आप व्यक्त करना चाहते हैं।
|
यदि आपको कस्टम रंगों के साथ एक चार्ट बनाने का कार्य दिया गया है, तो सुनिश्चित करें कि आपके चार्ट दोनों सुलभ हों और आपके द्वारा चुना गया रंग उस अर्थ के साथ मेल खाता हो जिसे आप संप्रेषित करना चाहते हैं।
|
||||||
|
|
||||||
## पठनीयता के लिए अपने चार्ट को स्टाइल करें
|
## पठनीयता के लिए अपने चार्ट को स्टाइल करें
|
||||||
|
|
||||||
चार्ट तब तक सार्थक नहीं होते जब तक वे पठनीय न हों! अपने चार्ट की चौड़ाई और ऊंचाई को अपने डेटा के साथ अच्छी तरह से स्केल करने के लिए स्टाइल करने पर विचार करें। यदि एक चर (जैसे सभी 50 राज्य) प्रदर्शित करने की आवश्यकता है, तो उन्हें Y अक्ष पर लंबवत दिखाएं ताकि क्षैतिज रूप से स्क्रॉल करने वाले चार्ट से बचा जा सके।
|
यदि चार्ट पठनीय नहीं हैं तो वे सार्थक नहीं होते! अपने चार्ट की चौड़ाई और ऊँचाई को अपने डेटा के साथ अच्छी तरह से स्केल करने के लिए स्टाइलिंग पर एक पल विचार करें। यदि एक चरों (जैसे सभी 50 राज्यों) को दिखाना है, तो उन्हें संभव हो तो Y अक्ष पर लंबवत दिखाएं ताकि क्षैतिज स्क्रॉलिंग वाला चार्ट बनने से बचा जा सके।
|
||||||
|
|
||||||
अपने अक्षों को लेबल करें, यदि आवश्यक हो तो एक लेजेंड प्रदान करें, और डेटा की बेहतर समझ के लिए टूलटिप्स ऑफर करें।
|
अपने अक्षों को लेबल करें, यदि आवश्यक हो तो लेजेंड प्रदान करें, और बेहतर समझ के लिए टूलटिप्स दें।
|
||||||
|
|
||||||
यदि आपका डेटा X अक्ष पर टेक्स्टुअल और विस्तृत है, तो बेहतर पठनीयता के लिए टेक्स्ट को कोणीय बना सकते हैं। [Matplotlib](https://matplotlib.org/stable/tutorials/toolkits/mplot3d.html) 3D प्लॉटिंग प्रदान करता है, यदि आपका डेटा इसका समर्थन करता है। `mpl_toolkits.mplot3d` का उपयोग करके परिष्कृत डेटा विज़ुअलाइज़ेशन बनाए जा सकते हैं।
|
यदि आपका डेटा X अक्ष पर टेक्स्टुअल और बहुत है, तो बेहतर पठनीयता के लिए पाठ को कोणीय बना सकते हैं। [Matplotlib](https://matplotlib.org/stable/tutorials/toolkits/mplot3d.html) 3D प्लॉटिंग प्रदान करता है, यदि आपका डेटा इसे सपोर्ट करता है। `mpl_toolkits.mplot3d` का उपयोग कर जटिल डेटा विज़ुअलाइज़ेशन बनाए जा सकते हैं।
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
## एनिमेशन और 3D चार्ट डिस्प्ले
|
## एनिमेशन और 3D चार्ट डिस्प्ले
|
||||||
|
|
||||||
आज के कुछ बेहतरीन डेटा विज़ुअलाइज़ेशन एनिमेटेड हैं। Shirley Wu ने D3 के साथ अद्भुत विज़ुअलाइज़ेशन बनाए हैं, जैसे '[फिल्म फ्लावर्स](http://bl.ocks.org/sxywu/raw/d612c6c653fb8b4d7ff3d422be164a5d/)', जहां प्रत्येक फूल एक फिल्म का विज़ुअलाइज़ेशन है। एक और उदाहरण 'बस्ट आउट' है, जो एक इंटरैक्टिव अनुभव है जिसमें विज़ुअलाइज़ेशन, Greensock और D3 का उपयोग किया गया है, और NYC के बेघर समस्या को दिखाने के लिए एक स्क्रॉलीटेलिंग लेख प्रारूप का उपयोग किया गया है।
|
आज के कुछ बेहतरीन डेटा विज़ुअलाइज़ेशन एनिमेटेड होते हैं। Shirley Wu के पास D3 के साथ अद्भुत एनिमेटेड विज़ुअलाइज़ेशन हैं, जैसे '[फिल्म फ्लावर्स](http://bl.ocks.org/sxywu/raw/d612c6c653fb8b4d7ff3d422be164a5d/)', जहां प्रत्येक फूल एक फिल्म का विज़ुअलाइज़ेशन है। गार्डियन के लिए एक उदाहरण 'bussed out' है, जो विज़ुअलाइज़ेशन को Greensock और D3 के साथ मिलाकर एक इंटरैक्टिव अनुभव प्रदान करता है, जिसमें स्क्रोलटेलिंग लेख प्रारूप है जो दिखाता है कि NYC अपने बेघर समस्या को शहर से बाहर बस द्वारा कैसे संभालता है।
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
> "बस्ट आउट: अमेरिका अपने बेघर लोगों को कैसे स्थानांतरित करता है" [द गार्जियन](https://www.theguardian.com/us-news/ng-interactive/2017/dec/20/bussed-out-america-moves-homeless-people-country-study) से। विज़ुअलाइज़ेशन Nadieh Bremer और Shirley Wu द्वारा।
|
> "Bussed Out: How America Moves its Homeless" from [the Guardian](https://www.theguardian.com/us-news/ng-interactive/2017/dec/20/bussed-out-america-moves-homeless-people-country-study)। विज़ुअलाइज़ेशन Nadieh Bremer & Shirley Wu द्वारा
|
||||||
|
|
||||||
हालांकि यह पाठ इन शक्तिशाली विज़ुअलाइज़ेशन लाइब्रेरीज़ को गहराई से सिखाने के लिए पर्याप्त नहीं है, D3 का उपयोग करके Vue.js ऐप में एक विज़ुअलाइज़ेशन बनाने का प्रयास करें।
|
यह पाठ इन शक्तिशाली विज़ुअलाइज़ेशन लाइब्रेरीज को गहराई से सिखाने के लिए अपर्याप्त है, लेकिन D3 का उपयोग Vue.js ऐप में करें जो "Dangerous Liaisons" पुस्तक का एनिमेटेड सोशल नेटवर्क विज़ुअलाइज़ेशन बनाए।
|
||||||
|
|
||||||
> "लेस लिआज़ों डेंजरूज़" एक पत्र-रूपक उपन्यास है, जिसे 1782 में चोडर्लोस डी लाक्लोस द्वारा लिखा गया था। यह फ्रांसीसी अभिजात वर्ग के दो नायक, विकॉम्टे डी वालमोंट और मार्क्विस डी मर्टेइल की कहानी बताता है।
|
> "Les Liaisons Dangereuses" एक पत्रिकात्मक उपन्यास है, या ऐसे उपन्यास जो पत्रों की एक श्रृंखला के रूप में प्रस्तुत होता है। इसे 1782 में Choderlos de Laclos ने लिखा था, जो फ्रांसीसी अभिजात वर्ग के दो प्रतिद्वंद्वी पात्रों, विस्कॉन्टे डी वालमोंट और मार्कीज़े डी मर्टुयिल की दुष्ट, नैतिक रूप से भ्रष्ट सामाजिक चालबाज़ियों की कहानी बताता है। वे अंत में नष्ट हो जाते हैं लेकिन बहुत सामाजिक नुकसान पहुंचाते हैं। उपन्यास को उनके सर्कल के विभिन्न लोगों को लिखे गए पत्रों की श्रृंखला के रूप में खुलासा किया जाता है, जो बदला लेने या केवल मुसीबत पैदा करने के लिए योजनाएं बनाते हैं। इन पत्रों का विज़ुअलाइज़ेशन बनाएं ताकि कथा के प्रमुख नायक दृष्टिगत रूप से पता चल सकें।
|
||||||
|
|
||||||
आप एक वेब ऐप पूरा करेंगे जो इस सामाजिक नेटवर्क का एनिमेटेड दृश्य प्रदर्शित करेगा।
|
आप एक वेब ऐप पूर्ण करेंगे जो इस सोशल नेटवर्क का एनिमेटेड दृश्य प्रदर्शित करेगा। यह Vue.js और D3 का उपयोग करके [नेटवर्क का दृश्य](https://github.com/emiliorizzo/vue-d3-network) बनाने के लिए बनाई गई एक लाइब्रेरी का उपयोग करता है। जब ऐप चल रहा हो, तो आप स्क्रीन पर नोड्स को खींच सकते हैं ताकि डेटा को फेरबदल कर सकें।
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
## प्रोजेक्ट: D3.js का उपयोग करके एक नेटवर्क दिखाने के लिए चार्ट बनाएं
|
## प्रोजेक्ट: D3.js का उपयोग करके नेटवर्क दिखाने वाला चार्ट बनाएँ
|
||||||
|
|
||||||
> इस पाठ फ़ोल्डर में एक `solution` फ़ोल्डर शामिल है जहां आप संदर्भ के लिए पूर्ण प्रोजेक्ट पा सकते हैं।
|
> इस पाठ फ़ोल्डर में एक `solution` फ़ोल्डर शामिल है जहाँ आप पूर्ण परियोजना अपने संदर्भ के लिए पा सकते हैं।
|
||||||
|
|
||||||
1. README.md फ़ाइल में दिए गए निर्देशों का पालन करें। सुनिश्चित करें कि आपके सिस्टम पर NPM और Node.js चल रहे हैं।
|
1. स्टार्टर फ़ोल्डर की रूट में README.md फ़ाइल की निर्देशों का पालन करें। सुनिश्चित करें कि आपके कंप्यूटर पर NPM और Node.js चल रहे हों और अपनी परियोजना की निर्भरताएँ इंस्टॉल करने से पहले।
|
||||||
2. `starter/src` फ़ोल्डर खोलें।
|
|
||||||
3. `components/Nodes.vue` में कोड पूरा करें।
|
|
||||||
|
|
||||||
अपने ऐप को टर्मिनल से चलाएं (npm run serve) और विज़ुअलाइज़ेशन का आनंद लें!
|
2. `starter/src` फ़ोल्डर खोलें। आप एक `assets` फ़ोल्डर पाएंगे जहाँ उपन्यास के सभी पत्रों का एक .json फ़ाइल है, नंबरित, 'to' और 'from' एनोटेशन के साथ।
|
||||||
|
|
||||||
|
3. `components/Nodes.vue` में कोड पूरा करें ताकि विज़ुअलाइज़ेशन सक्षम हो सके। `createLinks()` नामक मेथड खोजें और नीचे दिए गए नेस्टेड लूप को जोड़ें।
|
||||||
|
|
||||||
|
.json ऑब्जेक्ट के माध्यम से लूप करें ताकि पत्रों के 'to' और 'from' डेटा को पकड़ सकें और `links` ऑब्जेक्ट बनाएँ ताकि विज़ुअलाइज़ेशन लाइब्रेरी इसे उपयोग कर सके:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
//अक्षरों के माध्यम से लूप करें
|
||||||
|
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://ff-quizzes.netlify.app/en/ds/quiz/25)
|
||||||
|
|
||||||
## समीक्षा और स्व-अध्ययन
|
## समीक्षा और स्व-अध्ययन
|
||||||
|
|
||||||
भ्रामक डेटा विज़ुअलाइज़ेशन पर पढ़ने के लिए यहां कुछ लेख दिए गए हैं:
|
धोखा देने वाले डेटा विज़ुअलाइज़ेशन के बारे में पढ़ने के लिए यहां कुछ लेख हैं:
|
||||||
|
|
||||||
https://gizmodo.com/how-to-lie-with-data-visualization-1563576606
|
https://gizmodo.com/how-to-lie-with-data-visualization-1563576606
|
||||||
|
|
||||||
http://ixd.prattsi.org/2017/12/visual-lies-usability-in-deceptive-data-visualizations/
|
http://ixd.prattsi.org/2017/12/visual-lies-usability-in-deceptive-data-visualizations/
|
||||||
|
|
||||||
ऐतिहासिक संपत्तियों और कलाकृतियों के लिए इन दिलचस्प विज़ुअलाइज़ेशन को देखें:
|
ऐतिहासिक संपत्तियों और कलाकृतियों के लिए ये रोचक विज़ुअलाइज़ेशन देखें:
|
||||||
|
|
||||||
https://handbook.pubpub.org/
|
https://handbook.pubpub.org/
|
||||||
|
|
||||||
यह लेख पढ़ें कि एनिमेशन आपके विज़ुअलाइज़ेशन को कैसे बढ़ा सकता है:
|
देखें कि एनिमेशन आपकी विज़ुअलाइज़ेशन को कैसे बढ़ा सकता है:
|
||||||
|
|
||||||
https://medium.com/@EvanSinar/use-animation-to-supercharge-data-visualization-cd905a882ad4
|
https://medium.com/@EvanSinar/use-animation-to-supercharge-data-visualization-cd905a882ad4
|
||||||
|
|
||||||
## असाइनमेंट
|
## असाइनमेंट
|
||||||
|
|
||||||
[अपना खुद का कस्टम विज़ुअलाइज़ेशन बनाएं](assignment.md)
|
[अपना कस्टम विज़ुअलाइज़ेशन बनाएं](assignment.md)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||||
**अस्वीकरण**:
|
**अस्वीकरण**:
|
||||||
यह दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता सुनिश्चित करने का प्रयास करते हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियां या अशुद्धियां हो सकती हैं। मूल भाषा में उपलब्ध मूल दस्तावेज़ को प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं।
|
इस दस्तावेज़ का अनुवाद AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके किया गया है। जबकि हम सटीकता के लिए प्रयास करते हैं, कृपया ध्यान दें कि स्वचालित अनुवादों में त्रुटियाँ या अशुद्धियाँ हो सकती हैं। मूल दस्तावेज़ अपनी मूल भाषा में ही प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं।
|
||||||
|
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||||
Loading…
Reference in new issue