# بامعنی بصری نمائیاں بنانا | ](../../../sketchnotes/13-MeaningfulViz.png)| |:---:| | بامعنی بصری نمائیاں - _Sketchnote by [@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 "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) کو جمع کرتا ہے۔ یہ سمجھنا ضروری ہے کہ دھوکہ دہی والے چارٹس کے ذریعے آنکھ کو کتنی آسانی سے دھوکہ دیا جا سکتا ہے۔ یہاں تک کہ اگر ڈیٹا سائنسدان کا ارادہ اچھا ہو، تو ایک خراب قسم کے چارٹ کا انتخاب، جیسے کہ بہت زیادہ زمروں کو دکھانے والا پائی چارٹ، دھوکہ دہی کا باعث بن سکتا ہے۔ ## رنگ آپ نے اوپر 'فلوریڈا گن وائلنس' چارٹ میں دیکھا کہ رنگ چارٹس میں ایک اضافی معنی کی تہہ فراہم کر سکتے ہیں، خاص طور پر وہ جو ggplot2 اور RColorBrewer جیسی لائبریریوں کا استعمال کیے بغیر بنائے گئے ہوں، جو مختلف تصدیق شدہ رنگ لائبریریاں اور پیلیٹس فراہم کرتے ہیں۔ اگر آپ ہاتھ سے چارٹ بنا رہے ہیں، تو [رنگ کے اصول](https://colormatters.com/color-and-design/basic-color-theory) کا تھوڑا مطالعہ کریں۔ > ✅ چارٹس ڈیزائن کرتے وقت، یہ یاد رکھیں کہ رسائی بصری نمائیاں کا ایک اہم پہلو ہے۔ آپ کے کچھ صارفین رنگوں کے اندھے ہو سکتے ہیں - کیا آپ کا چارٹ بصری معذوری والے صارفین کے لیے اچھی طرح سے ظاہر ہوتا ہے؟ اپنے چارٹ کے لیے رنگ منتخب کرتے وقت محتاط رہیں، کیونکہ رنگ وہ معنی دے سکتے ہیں جو آپ نہیں دینا چاہتے۔ اوپر 'اونچائی' چارٹ میں 'گلابی خواتین' ایک واضح 'نسوانی' معنی دیتی ہیں جو چارٹ کی عجیب و غریب نوعیت میں اضافہ کرتی ہیں۔ جبکہ [رنگ کے معنی](https://colormatters.com/color-symbolism/the-meanings-of-colors) دنیا کے مختلف حصوں میں مختلف ہو سکتے ہیں، اور ان کے شیڈ کے مطابق ان کے معنی بدل سکتے ہیں۔ عمومی طور پر، رنگ کے معنی درج ذیل ہیں: | رنگ | معنی | | ------ | ------------------- | | سرخ | طاقت | | نیلا | اعتماد، وفاداری | | پیلا | خوشی، احتیاط | | سبز | ماحولیات، قسمت، حسد | | جامنی | خوشی | | نارنجی | توانائی | اگر آپ کو کسٹم رنگوں کے ساتھ چارٹ بنانے کا کام سونپا گیا ہے، تو یقینی بنائیں کہ آپ کے چارٹس قابل رسائی ہوں اور آپ کے منتخب کردہ رنگ اس معنی سے ہم آہنگ ہوں جو آپ دینا چاہتے ہیں۔ ## اپنے چارٹس کو پڑھنے کے قابل بنانے کے لیے اسٹائل کریں چارٹس بامعنی نہیں ہوتے اگر وہ پڑھنے کے قابل نہ ہوں! اپنے چارٹ کی چوڑائی اور اونچائی کو اپنے ڈیٹا کے ساتھ اچھی طرح سے پیمانہ کرنے کے لیے اسٹائل کرنے پر غور کریں۔ اگر ایک متغیر (جیسے تمام 50 ریاستیں) کو ظاہر کرنے کی ضرورت ہو، تو انہیں Y محور پر عمودی طور پر دکھائیں تاکہ افقی طور پر سکرول کرنے والے چارٹ سے بچا جا سکے۔ اپنے محور کو لیبل کریں، اگر ضروری ہو تو ایک لیجنڈ فراہم کریں، اور ڈیٹا کی بہتر تفہیم کے لیے ٹول ٹپس پیش کریں۔ اگر آپ کا ڈیٹا X محور پر متنی اور تفصیلی ہے، تو بہتر پڑھنے کے لیے متن کو زاویہ دے سکتے ہیں۔ [plot3D](https://cran.r-project.org/web/packages/plot3D/index.html) 3D پلاٹنگ پیش کرتا ہے، اگر آپ کا ڈیٹا اس کی حمایت کرتا ہو۔ اس کا استعمال کرتے ہوئے نفیس بصری نمائیاں تیار کی جا سکتی ہیں۔  ## متحرک اور 3D چارٹ ڈسپلے آج کل کی بہترین بصری نمائیاں متحرک ہوتی ہیں۔ Shirley Wu نے D3 کے ساتھ حیرت انگیز نمائیاں بنائی ہیں، جیسے '[فلم کے پھول](http://bl.ocks.org/sxywu/raw/d612c6c653fb8b4d7ff3d422be164a5d/)'، جہاں ہر پھول ایک فلم کی نمائندگی کرتا ہے۔ Guardian کے لیے ایک اور مثال 'بَسڈ آؤٹ' ہے، جو بصری نمائیاں، 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 اگرچہ یہ سبق ان طاقتور بصری نمائیاں لائبریریوں کو گہرائی میں سکھانے کے لیے ناکافی ہے، D3 کو Vue.js ایپ میں استعمال کرنے کی کوشش کریں تاکہ کتاب "Dangerous Liaisons" کو ایک متحرک سوشل نیٹ ورک کے طور پر دکھایا جا سکے۔ > "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) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا عدم درستگی ہو سکتی ہیں۔ اصل دستاویز، جو اس کی مقامی زبان میں ہے، کو مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے لیے ہم ذمہ دار نہیں ہیں۔