# অর্থবহ ভিজ্যুয়ালাইজেশন তৈরি করা | ](../../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) সংগ্রহ করে। এটি বোঝা গুরুত্বপূর্ণ যে প্রতারণামূলক চার্ট দ্বারা চোখ কত সহজে বিভ্রান্ত হতে পারে। এমনকি যদি ডেটা বিজ্ঞানীর উদ্দেশ্য ভালো হয়, একটি খারাপ ধরনের চার্ট নির্বাচন, যেমন খুব বেশি বিভাগ দেখানো একটি পাই চার্ট, প্রতারণামূলক হতে পারে। ## রঙ উপরের 'ফ্লোরিডা বন্দুক সহিংসতা' চার্টে আপনি দেখেছেন কীভাবে রঙ চার্টে একটি অতিরিক্ত অর্থের স্তর যোগ করতে পারে, বিশেষত সেগুলো যা Matplotlib এবং Seaborn-এর মতো লাইব্রেরি ব্যবহার করে ডিজাইন করা হয়নি, যা বিভিন্ন যাচাই করা রঙের লাইব্রেরি এবং প্যালেট নিয়ে আসে। যদি আপনি হাতে একটি চার্ট তৈরি করেন, [রঙ তত্ত্ব](https://colormatters.com/color-and-design/basic-color-theory) সম্পর্কে একটু পড়াশোনা করুন। > ✅ চার্ট ডিজাইন করার সময় সচেতন থাকুন যে অ্যাক্সেসিবিলিটি ভিজ্যুয়ালাইজেশনের একটি গুরুত্বপূর্ণ দিক। আপনার কিছু ব্যবহারকারী রঙ অন্ধ হতে পারেন - আপনার চার্ট কি ভিজ্যুয়াল প্রতিবন্ধী ব্যবহারকারীদের জন্য ভালোভাবে প্রদর্শিত হয়? আপনার চার্টের জন্য রঙ নির্বাচন করার সময় সতর্ক থাকুন, কারণ রঙ এমন অর্থ প্রদান করতে পারে যা আপনি বোঝাতে চান না। উপরের 'উচ্চতা' চার্টে 'পিঙ্ক লেডিস' একটি স্বতন্ত্র 'নারীত্ব' অর্থ প্রদান করে যা চার্টটির অদ্ভুততাকে আরও বাড়িয়ে তোলে। যদিও [রঙের অর্থ](https://colormatters.com/color-symbolism/the-meanings-of-colors) বিশ্বের বিভিন্ন অংশে ভিন্ন হতে পারে এবং তাদের শেড অনুযায়ী অর্থ পরিবর্তন করতে পারে। সাধারণভাবে, রঙের অর্থগুলো অন্তর্ভুক্ত: | রঙ | অর্থ | | ------ | ------------------- | | লাল | শক্তি | | নীল | বিশ্বাস, আনুগত্য | | হলুদ | সুখ, সতর্কতা | | সবুজ | পরিবেশ, ভাগ্য, ঈর্ষা | | বেগুনি | সুখ | | কমলা | প্রাণবন্ততা | যদি আপনাকে কাস্টম রঙ দিয়ে একটি চার্ট তৈরি করতে বলা হয়, নিশ্চিত করুন যে আপনার চার্টগুলো অ্যাক্সেসযোগ্য এবং আপনি যে অর্থ বোঝাতে চান তার সাথে রঙটি সামঞ্জস্যপূর্ণ। ## পড়ার সুবিধার জন্য চার্ট স্টাইল করা চার্টগুলো অর্থবহ নয় যদি সেগুলো পড়ার সুবিধাজনক না হয়! আপনার ডেটার সাথে ভালোভাবে স্কেল করার জন্য আপনার চার্টের প্রস্থ এবং উচ্চতা স্টাইল করার কথা বিবেচনা করুন। যদি একটি ভেরিয়েবল (যেমন সমস্ত ৫০টি রাজ্য) প্রদর্শিত হয়, তাহলে সেগুলোকে Y অক্ষের উপর উল্লম্বভাবে দেখান যদি সম্ভব হয়, যাতে একটি অনুভূমিকভাবে স্ক্রল করা চার্ট এড়ানো যায়। আপনার অক্ষগুলো লেবেল করুন, প্রয়োজন হলে একটি লেজেন্ড প্রদান করুন এবং ডেটার আরও ভালো বোঝার জন্য টুলটিপস অফার করুন। যদি আপনার ডেটা X অক্ষের উপর পাঠ্য এবং দীর্ঘ হয়, তাহলে আরও ভালো পড়ার সুবিধার জন্য পাঠ্যটি কোণাকারে করুন। [Matplotlib](https://matplotlib.org/stable/tutorials/toolkits/mplot3d.html) 3D প্লটিং অফার করে, যদি আপনার ডেটা এটি সমর্থন করে। উন্নত ডেটা ভিজ্যুয়ালাইজেশন `mpl_toolkits.mplot3d` ব্যবহার করে তৈরি করা যেতে পারে।  ## অ্যানিমেশন এবং 3D চার্ট প্রদর্শন আজকের সেরা ডেটা ভিজ্যুয়ালাইজেশনগুলোর মধ্যে কিছু অ্যানিমেটেড। Shirley Wu-এর D3 দিয়ে তৈরি করা অসাধারণ কাজ রয়েছে, যেমন '[film flowers](http://bl.ocks.org/sxywu/raw/d612c6c653fb8b4d7ff3d422be164a5d/)', যেখানে প্রতিটি ফুল একটি সিনেমার ভিজ্যুয়ালাইজেশন। Guardian-এর জন্য আরেকটি উদাহরণ হলো 'bussed out', একটি ইন্টারঅ্যাকটিভ অভিজ্ঞতা যা ভিজ্যুয়ালাইজেশনকে Greensock এবং D3-এর সাথে সংযুক্ত করে এবং একটি স্ক্রোলিটেলিং নিবন্ধ ফরম্যাটে দেখায় কীভাবে NYC তার গৃহহীন সমস্যার সমাধান করে মানুষকে শহর থেকে বের করে দিয়ে।  > "Bussed Out: How America Moves its Homeless" [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 ব্যবহার করে একটি বই "Dangerous Liaisons" এর একটি অ্যানিমেটেড সামাজিক নেটওয়ার্কের ভিজ্যুয়ালাইজেশন প্রদর্শনের চেষ্টা করুন। > "Les Liaisons Dangereuses" একটি এপিস্টোলারি উপন্যাস, বা একটি উপন্যাস যা চিঠির সিরিজ হিসেবে উপস্থাপিত। এটি ১৭৮২ সালে Choderlos de Laclos দ্বারা লেখা হয়েছিল এবং এটি ১৮ শতকের শেষের দিকে ফরাসি অভিজাতদের দুই প্রতিদ্বন্দ্বী নায়কের নৈতিকভাবে দেউলিয়া সামাজিক চালচলনের গল্প বলে। উভয়ই শেষ পর্যন্ত তাদের পরিণতি ভোগ করে, কিন্তু অনেক সামাজিক ক্ষতি না করে নয়। উপন্যাসটি বিভিন্ন লোকের কাছে লেখা চিঠির একটি সিরিজ হিসেবে প্রকাশিত হয়, প্রতিশোধের পরিকল্পনা বা শুধু সমস্যা তৈরি করার জন্য। এই চিঠিগুলোর একটি ভিজ্যুয়ালাইজেশন তৈরি করুন যাতে গল্পের প্রধান চরিত্রগুলোকে ভিজ্যুয়ালি আবিষ্কার করা যায়। আপনি একটি ওয়েব অ্যাপ সম্পন্ন করবেন যা এই সামাজিক নেটওয়ার্কের একটি অ্যানিমেটেড দৃশ্য প্রদর্শন করবে। এটি একটি লাইব্রেরি ব্যবহার করে তৈরি করা হয়েছে যা 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://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) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসম্ভব সঠিক অনুবাদ প্রদানের চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা তার জন্য দায়ী থাকব না।